SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    14
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile JAVA SCRIPT AND JQUERY HELP

    hey friend,s can some one help me in this code ..

    Code:
    <html>
    <head>
    <title> jquery
    </title>
    <style type="text/css">
    ul{
        color:red;
    }
    a{
    text-decoration:none;
    }
    .bk{
    background-color:silver;
    color: white;
    display:box;
    width:140;
    margin-left:0;
    list-style-type:none;
    padding-top: 0px;
    }
    </style>
    <script src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('ul').addClass('bk');
    $('li>ul').hide();
    $('ul>li a').mouseover(function(){
    $('li>ul').slideDown(200);
    });
    $('li>ul').mouseout(function(){
    $('li>ul').slideUp(200);
    });
    });
    
    </script>
    </head>
    <body>
    
    
    
    <ul>
    <li><a href="#"> Author</a>
    <ul>
    <li><a href="#">new</a></li>
    <li><a href="#">old</a></li>
    <li><a href="#">best</a></li>
    <li><a href="#">good</a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
    the error is that when i mouseover the main link it slidedown as i wish and when i mouseout it slide up that i want but here is the point when i mouseout from link it slideup again and again so how can i control it..?
    Last edited by DaveMaxwell; Jan 8, 2013 at 14:18. Reason: added code tag...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there msz900,

    Welcome to the forums.

    One way to solve your problem would be to use setTimeOut()
    With this method, when the mouse enters the menu area, you could call a function to expand it.
    Then, as soon as the mouse leaves the area, you could cancel the function if it hasn't been executed yet.
    This means that when you move your mouse over the menu area again and again, the menu doesn't remember all of this, and will expand only once.

    Here's an example:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Expanding menu example</title>
        <style type="text/css">
          ul{  color:red; }
          a{ text-decoration:none; }
          .bk{
            background-color:silver;
            color: white;
            display:box;
            width:140;
            margin-left:0;
            list-style-type:none;
            padding-top: 0px;
          }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
      </head>
    
      <body>
        <ul id="menu">
          <li>
            <a href="#"> Author</a>
            <ul>
            <li><a href="#">new</a></li>
            <li><a href="#">old</a></li>
            <li><a href="#">best</a></li>
            <li><a href="#">good</a></li>
            </ul>
          </li>
        </ul>
        <script type="text/javascript">
          $(document).ready(function(){
            $('ul').addClass('bk');
            $('li>ul').hide();
            var mnuTimeout = null;
            
            $('#menu').mouseover(function(){
              clearTimeout(mnuTimeout);
              mnuTimeout = setTimeout(function(){$('li>ul').slideDown(200);},50);
            });
            $('#menu').mouseout(function(){
              clearTimeout(mnuTimeout);
              mnuTimeout = setTimeout(function(){$('li>ul').slideUp(200);},50);
            });
          });
        </script>
      </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    14
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    TNXXX. LOVE U...
    U SOLVE A VERY MUH 4 ME :-}
    IT REALY HELP...


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
  •