Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    slidepanel mouseover/hover help

    Alright, this might be a easy fix, but I can't seem to get it to work.
    I have it so when you mouse over the "test1" tab, it drops the panel down like intended.
    The only way I can get it back up is if I mouseover the same tab (or I could make a click function or others), but what I'm interested in achieving is where the user moves their cursor out of the panel that just dropped. In doing so, the entire panel would close back up in its original state.

    I thought maybe it would be another mouseover command, that I had to define it to the panel that shows up after the initial mouseover, but I think I'm wrong. At least, I couldn't get it wrong, if anyone has any suggestions or a solution it'd be most appreciated.

    Code:
    <html>
    <head>
    <title>test slide panel</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
        $(".drop_slide").mouseover(function(){
            $("#panel").slideToggle("medium");
            $(this).toggleClass("active"); return false;
        });     
    });
    </script>
    
    <style type="text/css">
    body {
        margin: 0 auto;
        padding: 0;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
    }
    a:focus {
        outline: none;
    }
    #panel {
        background: grey;
        height: 200px;
        display: none;
    }
    .slide {
        margin: 0;
        padding: 0;
        background-color: red;
    }
    .drop_slide {
        background: url(white-arrow.gif) no-repeat right -50px;
        text-align: center;
        width: 144px;
        height: 31px;
        padding: 10px 10px 0 0;
        margin: 0 auto;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
    }
    .active {
        background-position: right 12px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="panel">
        test for links or something
    </div>
    
    <p class="slide"><a href="#" class="drop_slide">test1</a></p>
    
    
    </body>
    </html>
    This is as close as I can get it with hover, but its not working exactly right either ;;

    Code:
        $(document).ready(function(){
    
        function slide() {
          $("#panel").slideToggle("slow");
          $(this).toggleClass("active");
          return false;
        }
    
        $(".drop_slide").hover(slide, slide);
         
    });

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You could just use this plugin called clueTip:

    http://plugins.learningjquery.com/cl...etting-started

    It's got a property called mouseOutClose which does what you're describing.


  •  

    Posting Permissions

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