PDA

View Full Version : Jquery Hover animated <div> help



TJMulderink
07-05-2011, 08:11 PM
Hi.

I want to show a div when I hover over an item and to collapse when I rollout. I get the basics of how to do this, but I do not understand how to work the javascript magic to make it happen.

The problem:
The following works fine, JS is working lovely. Currently it works with 'toggle', 'show', 'hide'. I am wanting it to show/hide on rollover/rollout.

I do not code JS at all, I learn from google and follow tuts - however, I cannot find a way to make this script work when I hover. I can find other scripts to do it, but I was wondering if there was a quick fix to make this script do the same. Like I said, it works with clicks and toggles, but not hover. What am I doing wrong?

The link that handles the event is under the "Real-Time Property Statistics" on the site.

The things you need:
TEST SITE:http://ethostream.mulderinkdesign.com/index.html
THE SCRIPT:http://ethostream.mulderinkdesign.com/js/animatedcollapse.js
THE CSS (not that its needed, but just in case):http://ethostream.mulderinkdesign.com/css/main2.css



<li class="news-item2">

<!--HERE IS THE SCRIPT CALL-->
<h4><a href="javascript:animatedcollapse.toggle('stats')">Real-Time Property Statistics</a></h4>

<div class="article_separator2">&nbsp;</div>

<!--THIS IS THE AREA HIDDEN AND SHOWN-->
<div id="stats" style="display:none;">
<p>Live properties:<span>2314</span></p>
<p>Total guest rooms:<span>215405</span></p>
<p>Today's calls:<span>151</span></p>
<p>Current active users:<span>14086</span></p>
<p>Current authenticated users:<span>77149</span></p>
<p>Users within the last 30 days:<span>3869304</span></p>
</div>


</li>
</ul>
</div>

Nile
07-05-2011, 09:21 PM
<h4><a onmouseover="animatedcollapse.toggle('stats')" onmouseout="animatedcollapse.toggle('stats')" href="javascript:animatedcollapse.toggle('stats')">Real-Time Property Statistics</a></h4>
should do the trick.

good luck

TJMulderink
07-05-2011, 10:01 PM
Wow...I'm baffled that didn't come to me first!

Thanks a ton man!

Nile
07-06-2011, 01:44 AM
No problem, I'm glad to help :D

In an effort to keep things organized, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"