Results 1 to 5 of 5

Thread: jQuery "if" Statements

  1. #1
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default jQuery "if" Statements

    Got a question involving some jQuery script I was putting together. I essentially have three elements each containing a background image that is set to 200px wide by default however if clicked, will grow to 300px.

    Whenever you either click on one of the other two elements however, the other two shrink back to 200px. Also, if you click on the first element while it's open at 300px, it closes back to 200px so a toggle function is needed.

    Here's what I have so far. Basically it works except a double click is required to reopen an element that has already been closed. Anyone know how to get around this tiny issue? I'm thinking I have to embed some sort of an "if/then" function. Code is below, thanks for taking a look!

    ------------------------------------------

    Code:
    <div class="back22"><a href="#">adfs</a></div>
    
    <br /><br />
    
    <div class="back33"><a href="#">adfs</a></div>
    <br /><br />
    
    <div class="back44"><a href="#">adfs</a></div>
    
    <script>
    
    $(".back22").toggle(function() {
     $(".back22").animate({"width": "300px"}, "slow");
     $(".back33").animate({"width": "200px"}, "slow");
     $(".back44").animate({"width": "200px"}, "slow");
    },
    function() {
     $(".back22").animate({"width": "200px"}, "slow");	
    });
    
    $(".back33").toggle(function() {
     $(".back33").animate({"width": "300px"}, "slow");
     $(".back22").animate({"width": "200px"}, "slow");
     $(".back44").animate({"width": "200px"}, "slow");
    },
    function() {
     $(".back33").animate({"width": "200px"}, "slow");	
    });
    
    
    
    $(".back44").toggle(function() {
     $(".back44").animate({"width": "300px"}, "slow");
     $(".back22").animate({"width": "200px"}, "slow");
     $(".back33").animate({"width": "200px"}, "slow");
    },
    function() {
     $(".back44").animate({"width": "200px"}, "slow");	
    });
    
    	
    </script>
    Last edited by jscheuer1; 10-20-2010 at 07:58 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No. Toggle isn't what's required, at least not the way you've used it. If you use toggle like that it sets up a situation whereby each time the element is clicked it does the opposite of what it did the last time it was clicked. If you change it in a similar way by clicking somewhere else, that doesn't count as a toggle (click) on it. You could perhaps work it out using the .toggle() or .toggleClass() functions. But I think either would be unnecessarily complex.

    Now, I'm not sure exactly what you're going for, but I think this fits what you describe:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
    .back22 a, .back33 a, .back44 a {
    	color: white;
    }
    .back22, .back33, .back44 {
    	color: white;
    	width: 200px;
    }
    .back22 {
    	background-color: red;
    	width: 300px;
    }
    .back33 {
    	background-color: green;
    }
    .back44 {
    	background-color: blue;
    }
    </style>
    </head>
    <body>
    <div class="back22"><a href="#">adfs</a></div>
    
    <br><br>
    
    <div class="back33"><a href="#">adfs</a></div>
    <br><br>
    
    <div class="back44"><a href="#">adfs</a></div>
    
    <script>
    (function($){
    	var theClasses = $('.back22, .back33, .back44').click(function(e){
    		var cur = $(this), others = theClasses.not(cur);
    		others.animate({width: (cur.css('width') === '300px'? 300 : 200)}, "slow");
    		cur.animate({width: (cur.css('width') === '300px'? 200 : 300)}, "slow");
    		e.preventDefault(); // remove if you want the links to fire
    	});
    })(jQuery);
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Hey, thanks for responding! I think that's very close. One thing is off. If you load the page you see all three elements on the screen. You click on the first element and it expands as it should. However, if you click on that same element again, it will contract, however the other two elements expand. The other two should only expand if they're clicked on directly however an element may be shrunk if one of the others is expanded....

    Hope that makes sense, lol....thanks again for looking.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Still not sure if I've got the requirements straight. When you say:

    however an element may be shrunk if one of the others is expanded
    I think you mean:

    however an element should be shrunk if it's expanded and the one that just got clicked is becoming expanded.

    If so:

    Code:
    (function($){
    	var theClasses = $('.back22, .back33, .back44').click(function(e){
    		var speed = 'slow', // set animation speed
    		clicked = $(this), wB = clicked.css('width') === '200px';
    		if(wB){
    			theClasses.not(clicked).animate({width: 200}, speed);
    		}
    		clicked.animate({width: (wB? 300 : 200)}, speed);
    		e.preventDefault(); // remove if you want the links to fire
    	});
    })(jQuery);
    Notes:

    The var name wB is short for width boolean - false unless (under the constraints of the script and styles) the clicked is to be expanded.

    That does mean that the not(clicked) will be contracted if and only if clicked is to be expanded. If any not(clicked) are already contracted, this results in no change to that/those one(s).

    We could do a test to determine that so as to avoid animating an element to its existing width. But unless doing it the way the above code does it presents some problem(s), the code to avoid that would be more complex and probably require more processing time to execute.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Shammus (10-20-2010)

  6. #5
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Hey John, that was it....it works perfectly now. I was sort of thinking there had to be an "if" statement in there somewhere and wasn't sure how to write that in with jQuery.

    Sorry for my poor wording. Yes, an element should be shrunk if it's expanded and the one that just got clicked is becoming expanded.

    Thanks again!

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
  •