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
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can someone please Help with this Jquery code

    Hi:

    I have been trying to get this code to work for a while now and cannot figure out what is wrong. It is for a tri state rollover with images. (I know that I can do this with CSS so please do not answer with that.) The goal is, I am trying to learn jquery and as part of the learning I am trying to figure out what I am missing here.

    What I am having issues with is when you do the mouseover and mouseout events the buttons highlight correctly. However, when I click on a button then click on another button all the buttons that I click stay on. I need to be able to toggle the on state as on click each image like a typical tab control.

    I know that there are better ways of doing this, but I am really trying to learn what I did wrong and I am extreemly frustrted. So if there is anyone out there that can help specifically fix the code I am posting I would really appreciate it. Again, I know that this could be accomplished with certain css techniques, but I would like to understand what I am doing wrong here.

    Code:
    $(document).ready(function() {
    var clicked_obj;
        $("#nav a").mouseover(function() {
            if ( $(this).data("clicked") ) { return; }
            $(this).children("img").each(function() {
                this.src = $(this).attr("src").replace(/_off.gif$/ig,"_on.gif");
            });
        }).mouseout(function() {
            if ( $(this).data("clicked") ) { return; }
            $(this).children("img").each(function() {
                this.src = $(this).attr("src").replace(/_on.gif$/ig,"_off.gif");
            });
        }).click(function() {
            if ( clicked_obj ) {
                $(clicked_obj).removeData("clicked").mouseout();
            }
            clicked_obj = this;
            $(this).data("clicked", true);
            $(this).children("img").each(function() {
                this.src = $(this).attr("src").replace(/_off.gif$/ig,"_clk.gif");
            });
        });
    
    });
    
    
    </script>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
        <body>
            <div id="nav">
                <div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0"  /></div>
                <div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22"  alt="Support" name="support" border="0"/></a></div>
                <div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div>
                <div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div>
            </div>
        </body>
    </html>

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    Do you need to make provision for more than one responsive image element in each of those divs ? If not, the code could be simplified by taking out those children() and each() calls in the mouseover/mouseout code, and modifying the initial selector, e.g. to $("#nav a img"). But anyway, with the existing code, try the following addition:

    Code:
      
      }).click(function() {
            if ( clicked_obj ) {
                $(clicked_obj).removeData("clicked").mouseout();
    
                // reset any existing 'clicked' images to 'off' state            
                $("#nav a img").each(function(){        
                  $(this).attr("src", $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif"));
                });            
                            
            }
    Also note that in the HTML, there are 3 instances of <div id="tab">. Although these divs are not being referenced anywhere, make sure you avoid having multiple elements with the same id.

    Just a point about tri-state rollovers generally (with 'normal', 'hovered' and 'clicked' images) - they can't be done with CSS, as CSS alone cannot do anything in response to a click event. Perhaps you are referring to a plain JavaScript tri-state rollover, not a CSS one.


  •  

    Tags for this Thread

    Posting Permissions

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