Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 20, 2013, 11:30 AM   #1
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Minor issue with jQuery function

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:

Quote:
$(document).ready(function(){

$(".image01").show();
$(".showhide_image01").show();

$('.showhide_image01').click(function(){
$(".image01").fadeToggle();
$(".image02").hide();
$(".image03").hide();
$(".image04").hide();
$(".image05").hide();
});


$(".image02").hide();
$(".showhide_image02").show();

$('.showhide_image02').click(function(){
$(".image02").fadeToggle();
$(".image01").hide();
$(".image03").hide();
$(".image04").hide();
$(".image05").hide();
});
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.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Mar 20, 2013, 01:35 PM   #2
jsm4182
macrumors 6502
 
Join Date: Apr 2006
Location: Newburgh, NY
Send a message via AIM to jsm4182
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();
   }
});
__________________
Mac Mini, 2.3ghz i7, 16GB RAM, 1TB HDD, ML | MacBook Air 13", 1.3ghz i5, 1GB RAM, 128GB SSD, ML | iPhone 5 32GB White | iPad 3 64GB Black
jsm4182 is online now   1 Reply With Quote
Old Mar 20, 2013, 06:03 PM   #3
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Awesome, I'll try that out. Thanks!
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Mar 21, 2013, 02:39 AM   #4
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
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.
Dunmail is offline   0 Reply With Quote
Old Mar 21, 2013, 12:38 PM   #5
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
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!
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Mar 22, 2013, 06:24 AM   #6
iPaintCode
macrumors member
 
Join Date: Jun 2012
Location: Metro Detroit
Send a message via AIM to iPaintCode
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 =)
iPaintCode is offline   1 Reply With Quote
Old Mar 24, 2013, 10:27 PM   #7
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Quote:
Originally Posted by iPaintCode View Post
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 =)
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!
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Mar 25, 2013, 04:26 PM   #8
iPaintCode
macrumors member
 
Join Date: Jun 2012
Location: Metro Detroit
Send a message via AIM to iPaintCode
Updated

Hey Fig,

Swapped it over to non CSS3 transition. It's fully functional but was more or less pseudo code but demonstrates what you need.

http://codepen.io/ipaintcode/pen/CDjku
iPaintCode is offline   1 Reply With Quote
Old Mar 26, 2013, 09:37 AM   #9
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Brilliant. Thanks, greatly appreciate it!
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Minor liquid damage has lead to charging issue. Any help? TomLynn MacBook 1 Feb 27, 2014 07:20 PM
A minor annoying Apple tv mirroring issue. Anybody? L1mera1n Apple TV and Home Theater 6 Jun 6, 2013 04:54 PM
Minor screen noob issue KhonNan MacBook Air 2 Feb 13, 2013 06:56 AM
Minor formatting issue on mobile site Nermal Site and Forum Feedback 4 Nov 13, 2012 08:55 AM
Minor issue when Flash is full-screen Lenoxus OS X 0 Jun 20, 2012 10:28 PM

Forum Jump

All times are GMT -5. The time now is 10:43 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC