Grow your CSS skills. Land your dream job.

Delay a complex moseover

  • # September 27, 2012 at 1:18 pm

    Hi,

    In the Javascript jungle and with all my newbieness, I’m afraid I’m a bit lost!

    So I have this website I’m working on and which is divided in 2 horizontal parts. You jump from one part to the other through a scrollTo script which make the second part slide to the left and replace the first part.

    I want that when the mouse hover the right of the window, the second part slide through, and vice-versa when the second part is shown: hovering on the left of the window will slide back the first part.

    I used an image of 500×20 for the trick, which when hovered do as told above.

    The script is thus:

    onMouseover=” $(‘#wrapper’).scrollTo($(this).attr(‘href’), 1000;”

    Now it works, but when the second part slides to the left to be shown, the mouse is very likely to hover the second image (the one which allow to go back to the first part), and then slide back wether you like it or not… and maybe slide again to the left, then to the right… etc… because the mouse always hover on the 500×20 image which serves as a trigger.

    So, and all of those explanations just for that, I want to set a delay, but this code doesn’t work:

    onMouseover=”setTimeout( $(‘#wrapper’).scrollTo($(this).attr(‘href’), 1000 ), 5000);”

    I thought that by adding function() in front of the call it would work, but to no avail.

    Has someone the slightest idea how to delay my call ? Or, if you visualize what I described, know a better way to achieve what I want ?

    # September 27, 2012 at 2:22 pm

    Honestly, it would be much more beneficial to you to go to http://codepen.io and recreate what you have thus far so we can figure out exactly what you mean…at the very least, pointing us to a live version would help incredibly.

    # September 27, 2012 at 4:52 pm

    Well, thank you for your answer.

    I’ve put up a live version at this address:
    http://plateforme.test.pagesperso-orange.fr/marijoulet/index.html

    This is still only a concept, so no fancy gfx here. Just hover on the big vertical arrow to the right and you’ll see what I mean. Try going back and forth and you’ll eventually reproduce the issue.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".