jQuery Spotlight Issue

Question

Im trying to insert a jquery Spotlight snippet ( By Dev7Studios ) on my website. I have to work it out with following scenario:

I mouse over on "Div A" and "Div B" gets highlight-ed. I have to work on jQuery no conflict mode. So far, the script I use is:

jQuery.noConflict();
jQuery(window).load(function() {

    jQuery('#A, #B').bind('mouseover', function(){
        jQuery(this).spotlight({exitEvent:'mouseover', speed:600});

    });

});

With following script, each of the divs get highlighted when mouseover but, I need to make it the way that when mouseovered "Div A", "Div B" gets highlighted. This would be ideal solution.

Possible solution can also be that when mouse over on "Div A", "Div B" gets highlighted together with Div A.

At this moment, with the script I have, Only that Div is getting highlighted, whichever has the mouseover on it.

Any ideas please?

Thank you!

score 1 · Answer 1 · answered May 30 '12 at 19:37

1

Just call the jQuery selector on #b after you mouseover on #a...like below.

jQuery('#A').bind('mouseover', function(){
  jQuery('#B').spotlight({exitEvent: 'mouseover', speed:600});
});

answered May 30 '12 at 19:37

Ohgodwhy

49,779
11
80
110

Thanks for Help. That did the trick with highlight, but Div A did loose its state now, Div A is a button and it has lost its mouse hover effect and clickable stance. Also, with this code, spotlight appears and disappears imediatelly. It doesnt wait till I move mouse away. Any way to get around this? : )) – Jonathan Bell May 30 '12 at 19:43
Can you show me the HTML for DIV A and DIV B? Perhaps put it together in a jsFiddle.net? That shouldn't have caused any issues as to what you described. – Ohgodwhy May 30 '12 at 19:45
Thanks for response @Ohgodwhy I'll be able to get the code in jsfiddle later this evening and will post it here. Thanks for help again. cheers : )) – Jonathan Bell May 30 '12 at 21:00

lucuma · Answer 2 · 2012-05-30T20:26:33.283

1

Update per OP comment:

You could create a map of which elements impact the others.. Perhaps A impacts Z, B impacts A, etc. This is defined by you.. Then you just loop over the map's values

Demo: http://jsfiddle.net/lucuma/4RFWQ/1/

 var map = { 
"#A" : "#B",
"#B" : "#A",
"#Z" : "#A"
}; 

jQuery.each(map, function(key, value) { 
  var val = value;
  jQuery(key).on('mouseover', function() {
      jQuery(val).spotlight({exitEvent:'mouseover',      speed:600});
  });

});

You could also loop over the array and bind

Original:

I think you should do something like this to generalize it:

<div id="a" data-coord="b"></div><div id="b" data-coord="a"></div><div id="z" data-coord="b"></div>

jQuery.noConflict();
jQuery(window).load(function() {

jQuery('#A, #B').bind('mouseover', function(){
    jQuery('#' + jQuery(this).attr('data-coord')).spotlight({exitEvent:'mouseover', speed:600});

});

});

edited May 30 '12 at 20:26

answered May 30 '12 at 19:38

lucuma

18,247
4
66
91

Thanks for input @lucuma but unfortunatelly I wont be able to re-arrange my divs at this stage. Do you think of any possible solutions without touching the html? To only use javascript for desired result? Thanks : )) – Jonathan Bell May 30 '12 at 19:55
@JonathanBell I've udpated the answer. – lucuma May 30 '12 at 20:27
Thanks again. I'll try that. Later tomorrow and will post it here in eitherways if it works or not : )) Thank you. – Jonathan Bell May 30 '12 at 20:59

jQuery Spotlight Issue

2 Answers2