SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Stop running code JQuery

    Hi there,

    Going through JQUERY, NOVICE TO NINJA book I ended up trying a simple accordion sample. Here is the HTML:

    Code:
    <body>
    	
    	<section id="bio">
    		
    	<h2>Whos Hot Right Now?</h2>
    		
    		<h3>Beau Dandy</h3>
    			<div>
    			<img src="imges/rock2.jpg" alt="Beau Dandy"/>
    			<p>Content about Beau Dandy</p>			
    			</div>
    			
    		<h3>Johnny Stardust</h3>
    			<div>
    			<img src="imges/rock2.jpg" alt="Johnny Stardust"/>
    			<p>Content about Johnny Stardust</p>
    			</div>
    			
    		<h3>Glenda tronix</h3>
    			<div>
    			<img src="imges/rock2.jpg" alt="Glendatronix"/>
    			<p>Content about Glendatronix</p>
    			</div>
    			
    	</section>
        
        	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="query-test.js"></script>               
        </body>
    and here is the jquery:

    Code javascript:
     
    $(document).ready(function(){
     
    		$('#bio > div').hide();
    		$('#bio > div:first').show();
     
    		$('#bio h3').click(function() {
    			$('#bio > div:visible').slideToggle(200);
    			if ($(this).next('div').is(':visible')){
     
                            - what would go here? -
     
    			}
    			else
    			{			
    			$(this).next('div').slideToggle(550);	
    			}
    			});
    });

    The if... else... statement wasn't there at first. It wasn't really difficult to make the accordion work, that is, whenever you click on an <h3>, its <div> child shows up (slideToggle) if it's hidden, and any other <div>, child to other <h3>'s, hides away (slideToggle) if it is visible.

    The thing is when you clicked on the <h3> whose <div> child was visible, the slideToggle animation (hiding first and showing back again) took place for that <div> too. So I thought I could come up with an if statement so that if a <div> is visible, when you click on its parent <h3>, jquery stops running and no animation takes place. But I don't really know how to make that happen, what the jquery standard for that is. .stop() is not working... or else Im using it wrong.

    Any tips on how to get that?

    Thx a million in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by whitecreek View Post
    The thing is when you clicked on the <h3> whose <div> child was visible, the slideToggle animation (hiding first and showing back again) took place for that <div> too. So I thought I could come up with an if statement so that if a <div> is visible, when you click on its parent <h3>, jquery stops running and no animation takes place. But I don't really know how to make that happen, what the jquery standard for that is. .stop() is not working... or else Im using it wrong.
    In cases like this, it's better not to undo the damage, but to not let the damage occur in the first place.
    In this case that means not toggling the div that's related to the h3.

    That can be done by removing the if/else statement, and then removing from the initial selection div that's related to the selected h3 element. That stops the div from being hidden with all of the others. Then finally, we only want the next div to be toggled to show if it's already currently hidden.

    Due to the click event being bound to the h3 element, that means that the this keyword will refer to the clicked h3 element, so we should be able to remove any reference to the h3's div with something like this:

    Code javascript:
    $('#bio > div:visible').not($(this).next('div')).slideToggle(200);
    $(this).next('div:hidden').slideToggle(550);

    Which can also be reformatted as:

    Code javascript:
    $('#bio > div:visible')
        .not($(this).next('div'))
        .slideToggle(200);
    $(this).next('div:hidden').slideToggle(550);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect. Here is the complete final JQuery chunk:

    Code JavaScript:
    $(document).ready(function(){
     
    		$('#bio > div').hide();
    		$('#bio > div:first').show();
     
    		$('#bio h3').click(function() {			
    			$('#bio > div:visible').not($(this).next('div')).slideToggle(200);
    			$(this).next('div:hidden').slideToggle(550);
    			});
     
    });

    I guess I wasn't really able to properly address the right div using this, nor to tell (from a JQuery syntax point of view) visible from hidden even when I was already using :visible (which is definitely not right!! ).

    Understood the way of using .not for such cases as this one.

    Sweet. Thx a lot Paul.


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
  •