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"> </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>
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"> </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>