views:

168

answers:

1

Hi all, I'm really stuck. Basically i'm totally new to jquery, but need to add some kind of timer on mousover so that the page doesn't get messed up if the mouse goes all over the page. here's my script.. anyway i can easily implement it?

<script>
jQuery('cc').mouseover(function () {  
$("squareleft3").hide();  
$("twitter").hide();  
$("facebook").hide();  
$("squareright").hide();  
$("getintouch").hide();  
$("getintouch2").hide();  
$("getintouch3").hide();  
$("vicarimage").hide();  
$("squaredown2").hide();  
$("squareleft2").hide();  
$("one").hide();  
$("whatis").hide();  
$("squaredown").hide();  
$("whoweare").hide();  
if ($("whoweare:first").is(":hidden"))   
    if ($("squaredown:first").is(":hidden"))   
    if ($("squareleft3:first").is(":hidden")) { 
    if ($("twitter:first").is(":hidden"))  
if ($("squareright:first").is(":hidden"))  
if ($("getintouch:first").is(":hidden"))
if ($("getintouch2:first").is(":hidden")) 
if ($("getintouch3:first").is(":hidden"))
if ($("vicarimage:first").is(":hidden"))
if ($("squaredown2:first").is(":hidden"))
if ($("squareleft2:first").is(":hidden"))
if ($("one:first").is(":hidden"))
if ($("whatis:first").is(":hidden"))
jQuery('getinvolved').fadeIn(); 
jQuery('squareleft').slideToggleWidth();
} else {
$("squareleft").hide();
$("getinvolved").hide();
} } );
</script>

Cheers.

+1  A: 

Grab a copy of hoverIntent.

Link it in in your HEAD region.

Instead of mouseOver(), use hoverIntent()

There are various additional options to tune the timing thresholds (see documentation).

As others have pointed out, your code is all over the place. But hoverIntent does address the timing problem.

Ken Redler
that doesn't seem to work.. this is clearly a horrific way of fading stuff in/out, could you give me a quick pointer on how i could do this but with hover intent?
Bradley Bell
HoverIntent only lessens the sensitivity of the mouseover, by requiring a certain number of milliseconds without movement before firing. If you want general advice on how to improve your code, that's beyond the scope of this question. But for starters, you should focus on getting a better grasp of how jQuery selectors can obviate the need for multiple conditional statements. Look at toggle(). Look into using one class for multiple elements, so that a single $('.socialbadges').toggle() replaces many if()s. And look into structuring your HTML to be more efficiently targeted by jQuery selectors.
Ken Redler
No idea what your document looks like, but assuming a DIV with a bunch of other tags within, all with a "socialbadges" class, and with the intent of hiding and showing them as you mouse in and out, you'd want something along these lines: $('div#someContainer').hoverIntent( function() { $('.socialbadges').slideToggle() } ). Can't say more without knowing what you're trying to achieve.
Ken Redler
Basically it looks like this..http://img62.imageshack.us/img62/6521/screenshot20100509at154.pngEach box has that script to make it display content in the empty boxes. However, it also has to clear anything out of them first from the other boxes that might already be displaying content, hense all the hiding hiding.Each appearing box has a css set to display:none.Hope you can help!
Bradley Bell
I think this has gone beyond comments. You should update your original question to include all this info, and perhaps a (greatly reduced) version of the relevant HTML. I or others can then look at the question in full, and respond (or edit our answers).
Ken Redler