StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery functionality to "pause and top up" a timer if the cursor stays within an element
text
Body
copied!<p>The designer I am working with has given me a bit of functionality to work on and I'm not sure how to approach it. She basically wants the following;</p> <ul> <li>When you hover over a link, a panel should drop down (done this bit no problem)</li> <li>The panel should dissapear after 10 seconds (also done no problem)</li> <li>If your cursor is within the panel, the panel should never dissapear. Once your cursor leaves the panel, the 10 second timer should start again (erm..)</li> </ul> <p>Could anyone point me in the right direction of a plugin or article that explains how to achieve this third bit of functioality? I'm a fairly seasoned developer but am struggling with how to approach this or even where to start googling. Here's what I have so far, all working but for that third bullet point. I have a feeling I may need to completely change my approach to get this to work;</p> <pre><code>function showMiniBasket() { $("#basketMiniSummary").slideDown(); } function hideMiniBasket() { $("#basketMiniSummary").fadeOut(); } var config = { over: showMiniBasket, timeout: 10000, out: hideMiniBasket }; $("#basketDropDown").hoverIntent(config); </code></pre> <h1>THE ANSWER...</h1> <p>Based on a suggestion below, the eventual solution was...</p> <pre><code>function showMiniBasket() { $("#basketMiniSummary").slideDown("fast"); } function hideMiniBasket() { if (!$('#basketMiniSummary').hasClass('being_hovered')) { $("#basketMiniSummary").fadeOut(); } } var config = { over: showMiniBasket, timeout: 1000, out: hideMiniBasket }; $("#basketDropDown").hoverIntent(config); $('#basketMiniSummary').hover(function() { //hover in $(this).addClass('being_hovered'); $("#basketMiniSummary").slideDown(); }, function() { //hover out $(this).removeClass('being_hovered'); $("#basketMiniSummary").delay(1000).fadeOut(); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload