Minor issue with jQuery function

Discussion in 'Web Design and Development' started by fig, Mar 20, 2013.

  1. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #1
    Hey guys, been working on a jQuery code blurb that's a very simple show/hide system and I could use a bit of help. Clicking a button on the menu shows the graphic associated with that menu item while hiding the one previously visible. Example is here.

    The code is pretty simple in general, here's the exciting part:

    And then repeated for each image, showing and hiding the appropriate sections.

    The issue I'm having is that if a button is clicked to show an image and then clicked again before another menu item is clicked, it hides that image without showing another.

    Any suggestions on how to manage that second click so that the image isn't hidden? Thanks.
     
  2. macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #2
    For each click function you could add an if statement to check the display of the image and if it's display:none then perform the fade and hides. Something like:

    Code:
    $('.showhide_image01').click(function(){
       if( $(".image01").css("display") == "none" ){
          $(".image01").fadeToggle();
          $(".image02").hide();
          $(".image03").hide();
          $(".image04").hide();
          $(".image05").hide();
       }
    });
    
     
  3. fig
    thread starter macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #3
    Awesome, I'll try that out. Thanks!
     
  4. macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #4
    Assuming that all the buttons will be children of a common ancestor, I'd look at event delegation and have a single handler attached to the ancestor. The handler would hide all the images then show the targeted image.

    Some rough code:

    Code:
    var imgs = $('parent > img');
      imgs.hide().filter(':first').show();
                            
      $('div.buttons a').click(function () {
        imgs.hide();
        imgs.filter(this.hash).show();
        $('div.buttons a').removeClass('selected');
        $(this).addClass('selected');
        return false;
      }).filter(':first').click();
    
    The above is a quick edit of some tab selection code I use, you'll need to change 'parent' to something more useful and correct but it won't be too far out.
     
  5. fig
    thread starter macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #5
    That's a bit more involved then I was planning to get at this point (and I do realize my code could be much more efficient) but I'll dig more into that when I have time.

    Appreciate the advice, thanks!
     
  6. macrumors member

    iPaintCode

    Joined:
    Jun 24, 2012
    Location:
    Metro Detroit
    #6
    Codepen.io example for fig

    Hey fig,

    A little example I whipped up, hope it helps you out. I used CSS3 transition for the fading but you could easily swap it out for a jQuery animate if you need an IE<9 fix.

    http://codepen.io/ipaintcode/pen/CDjku

    If you have any questions feel free =)
     
  7. fig
    thread starter macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #7
    That is absolutely awesome, thanks. Only catch is I do need to do it in jQuery and not CSS3, the company I work for deals primarily with corporate clients who are often stuck on older browsers/computer illiterate.

    I'll dig into this a bit and see if I can follow what's going on, greatly appreciate it!
     
  8. macrumors member

    iPaintCode

    Joined:
    Jun 24, 2012
    Location:
    Metro Detroit
    #8
  9. fig
    thread starter macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #9
    Brilliant. Thanks, greatly appreciate it!
     

Share This Page