SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .slideToggle dependant image change

    Hey guys, I'm a JS n00b but I'm looking to create a simple edit to this script. I'm using this JS to show/hide a section of my website. I want an image to change when the image is toggled.

    Code JavaScript:
    <script type="text/javascript">
     
    	$(document).ready(function(){
     
    	        $(".slidingDiv").hide();
    	        $(".show_hide").show();
     
    	    $('.show_hide').click(function(){
    	    $(".slidingDiv").slideToggle();
    	    });
     
    	}); 
    </script>

    Code HTML4Strict:
    <a href="#" class="show_hide"><img src="http://www.sitepoint.com/forums/images/newsletterOpen.gif" alt="Newsletter Sign Up" /></a>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    In the click event, the this keyword will refer to the link that triggered the event, so you could use this to target the image in that link:

    var img = $('img', this);

    You could then use the display state of the sliding div to decide on which image to replace it with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would I need to create a new function to do that? (I'm really n00by)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by iTechno View Post
    Would I need to create a new function to do that? (I'm really n00by)
    It shouldn't be complex enough to warrant that.

    In pseudo-code terms, it would be:

    Code:
    if sliding div is currently hidden
        // the div will shortly be shown, so use appropriate image
    else
        // use image for when div is hidden
    
    toggle sliding div
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm extremely new to JS, would this be the correct way to write an if statement..

    Code JavaScript:
    <script type="text/javascript">
    if (.slidingDiv == show)
    {
    var img = $('images/clicktoclose.gif', this);
    }
     
    else
    {
    var img = $('images/clicktoopen.gif', this);
    }
    </script>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by iTechno View Post
    I'm extremely new to JS, would this be the correct way to write an if statement..

    Problems

    • The code will be in the click function, so the script tags shouldn't be there.
    • The .slidingDiv won't work as it is there, you need to use a jQuery selector to select it, and to retrieve the display value of it.
    • The === operator should be used instead of the == one, as the latter leave far too much room for problems to occur.
    • You need to compare the display property of the sliding div with the string 'none', so that show variable need to be taken out.
    • Opening braces should be at the end of the line
    • The code in the if statement should be indented, to provide a visual indication of the nesting
    • You don't need to assign anything to the img variable
    • It's the image within the clicked link that needs to be changed, which is referred to differently than what you have there
    • The this keyword needs to be a part of the image selector, not with the assignment of the image name


    Code:
    <script type="text/javascript">
    if (.slidingDiv == show)
    {
    var img = $('images/clicktoclose.gif', this);
    }
    else
    {
    var img = $('images/clicktoopen.gif', this);
    }
    </script>
    Other than that though, there's no trouble.


    Solutions

    Let's put this together so that all of those problems are resolved.

    The code will be in the click function, so the script tags shouldn't be there.

    The place where the code should be put is in the place with the ellipses:

    Code javascript:
    $('.show_hide').click(function(){
        ...
        $(".slidingDiv").slideToggle();
    });


    The .slidingDiv won't work as it is there, you need to use a jQuery selector to select it, and to retrieve the display value of it.

    The sort of jQuery selector you would use is: $('.slidingDiv').css('display')


    The === operator should be used instead of the == one, as the latter leave far too much room for problems to occur.

    Using type coercive comparisons more commonly leads to problems for beginners and intermediate users, because it's doing something that they didn't know about or expect. Using the strict comparison leaves much less room for problems to occur.


    You need to compare the display property of the sliding div with the string 'none', so that show variable need to be taken out.

    The string from the CSS display property that we're comparing with is 'none'


    Opening braces should be at the end of the line

    In some languages it doesn't matter where you positioning of the opening brace. With JavaScript, something called Automatic Semicolon Insertion means that you will have problems in certain cases when the opening brace is not at the end of the line.[/b]

    A video called JavaScript: The Good Parts demonstrates this problem with positioning the brace in a very understandable way, from 18:38 in to the video.


    The code in the if statement should be indented, to provide a visual indication of the nesting

    Proper indentation is one of the more important techniques that make your code easily understandable.


    You don't need to assign anything to the img variable

    There's no benefit gained from assigning the jQuery object of the image to a variable.


    It's the image within the clicked link that needs to be changed, which is referred to differently than what you have there

    The image files are assigned to the src attribute of the image.


    The this keyword needs to be a part of the image selector, not with the assignment of the image name

    One way to refer to the image would be $('img', this)

    And then you would set the src attribute to the appropriate image.


    Result

    Code javascript:
    if ($('.slidingDiv').css('display') === 'none') {
        $('img', this).attr('src', 'images/clicktoclose.gif');
    } else {
        $('img', this).attr('src', 'images/clicktoopen.gif');
    }
    Last edited by paul_wilkins; Jul 29, 2011 at 04:46. Reason: hidden should be none
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help! You definitely went above and beyond in helping me out there - I really appreciate it. I guess it's time to take a step back in learning JS to the simpler stuff. BTW, just in case anyone is following this in the future, I changed ('display') === hidden to ('display') === none to make this work in my particular case.

    Thank you again!

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by iTechno View Post
    Thank you so much for your help! You definitely went above and beyond in helping me out there - I really appreciate it. I guess it's time to take a step back in learning JS to the simpler stuff. BTW, just in case anyone is following this in the future, I changed ('display') === hidden to ('display') === none to make this work in my particular case.
    Whoops that's right, it's now edited and updated for when others come across this too.

    Quote Originally Posted by iTechno View Post
    Thank you again!
    You're welcome
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •