Results 1 to 4 of 4

Thread: Jquery Hover animated <div> help

  1. #1
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Jquery Hover animated <div> help

    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.co...tedcollapse.js
    THE CSS (not that its needed, but just in case):http://ethostream.mulderinkdesign.com/css/main2.css

    Code:
    <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>

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Code:
    <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
    Jeremy | jfein.net

  3. #3
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow...I'm baffled that didn't come to me first!

    Thanks a ton man!

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    No problem, I'm glad to help

    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"
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •