www.webdeveloper.com
Results 1 to 2 of 2

Thread: crazy jquery?

  1. #1
    Join Date
    Feb 2013
    Posts
    1

    crazy jquery?

    Hello to all (sorry for my bad english, I'm Italian),
    I write on the forum because I'm literally staggering!
    I have a page in a sliding div in jquery running at 100% which also has a small arrow that turns on the basis of whether it is open or closed.

    Always on the same page I added another sliding div that appear to work but this arrow does not rotate! The code seems more than fair ... You can give him a 'look you?

    Code:
    <html> 
    <head> 
    <script src="js/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
        $("#panel").show(); 
        $(".show_hide").click(function(){ 
            $("#panel").slideToggle("slow"); 
            $(this).toggleClass("lactive"); return false; 
        }); 
         
          
    }); 
    
    $(document).ready(function(){ 
        $("#menu").show(); 
        $(".menu").click(function(){ 
            $("#menu").slideToggle("slow"); 
            $(this).toggleClass("active"); return false; 
        }); 
    }); 
    </script> 
    <style type="text/css" rel="stylesheet"> 
    .sli { 
        margin: 0; 
        padding: 0; 
        background: url(../img/btn-slide.gif) no-repeat center top; 
    }     
    .slide { 
        margin: 0; 
        padding: 0; 
        background: url(../img/btn-slide.gif) no-repeat center top; 
    } 
    .show_hide { 
        background: url(../img/up.png) no-repeat 120px 10px; 
        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: url(../img/down.png) no-repeat 120px 10px; 
    } 
    .lactive { 
        background: url(../img/down.png) no-repeat 120px 10px; 
    } 
    #menu { 
        height:120px; 
        width: 144px; 
        background-color: #e7e7e7; 
        color: green; 
        display: none; 
        border: solid 1px #000; 
        border-bottom-left-radius: 5px; 
        border-bottom-right-radius: 5px; 
        } 
    .menu { 
        background: url(../img/up.png) no-repeat 120px 10px; 
        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; 
    } 
    </style> 
    </head> 
    <body> 
    <!-- primo FUNZIONANTE --> 
    <p class="slide"> 
                      <a href="#" class="show_hide" style="text-decoration: none; "> 
                         Login 
                      </a> 
                    </p> 
    <div id="panel"> <!-- # Pannello nascondibile --> 
                                  Testo qui 
                               </div> 
    
    <hr> 
    
    <!-- secondo NON FUNZIONANTE --> 
    
    <p class="sli"><a href="#" class="menu" style="text-decoration: none; "> 
                             mos 
                              </a></p> 
                <div id="menu"> 
                    menu 
                </div> 
    </body> 
    </html>
    Again, this is apparently working but not turning the arrow as in the first .. What is wrong? I know that I could leave the names of some of the same classes but to make you understand better I called everyone in a different way.
    I forgot to say that if the link instead of the second imposed as a class "show_hide" the arrow works, but I rightly opens and closes the first div and not the second.

  2. #2
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    That seems to be just a CSS issue. In your styles, you define .active sooner than .menu, so .menu has precedence. Either define .menu first or define .active more specific like .menu.active

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles