SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery help. Probably Easy...

    Hey folks. I've watched enough Jquery tutorials to be dangerous (and completely screw up otherwise fine sites)...but am pretty stumped at how best to accomplish an effect I am looking for.

    Basically, I would like to have an image positioned to the left in a div. When the image is clicked, I would like it to scroll out of view (to the left) and then scroll BACK...to the right...but as a different (slightly changed) image. I attached a pic to get a visual because I am horrible at explaining things.

    Can anyone offer any advice?
    Attached Images Attached Images
    "Do or do not. There is no try." -- Yoda

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    One way is to use the .animate() method to move the object off-screen, so you can then change the object, and animate it back onscreen again.

    It can be more difficult though to develop your own image-change routine, which is why people commonly choose to instead find a plugin that they can make use of instead in order to achieve a similar result.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...


    What if I took the image and made it the background of a wrapper. When the wrapper is clicked, it should be pretty easy to scroll it off screen, modify the CSS (change the background) and scroll it back?

    Am I looking at this all wrong?
    "Do or do not. There is no try." -- Yoda

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Ylang View Post
    Hmmm...


    What if I took the image and made it the background of a wrapper. When the wrapper is clicked, it should be pretty easy to scroll it off screen, modify the CSS (change the background) and scroll it back?

    Am I looking at this all wrong?
    What benefit does the wrapper serve, when moving the image itself is easily achieved by adjusting CSS properties, and the image is easily changed by setting a different src attribute?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! I forgot I could modify src.

    So...thinking out loud here:

    Image (relatively positioned) is clicked.

    I set the left position so that is in effect hidden (image will be placed in a div with overflow: hidden) and use animate() to make it look nice.

    Call a function to toggle the source of the image element.

    Reset the left position so it is shown, again animating() to make it look nice.

    Or am I missing something?
    "Do or do not. There is no try." -- Yoda

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, last thought....

    Wouldn't it be more efficient to use a wrapper with the image as a background? Then I could use sprites (adjusting the css class and shifting the background), and everything would be nice and smooth rather than hitting the server for a new image when it is clicked (at least initially).
    "Do or do not. There is no try." -- Yoda

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Ylang View Post
    Ok, last thought....

    Wouldn't it be more efficient to use a wrapper with the image as a background? Then I could use sprites (adjusting the css class and shifting the background), and everything would be nice and smooth rather than hitting the server for a new image when it is clicked (at least initially).
    That depends on what you intend to use the images for. If it's for an image gallery, the sprites for such a gallery would be much larger than is feasible to use.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I see.

    I just intend to use it for a little "one time use" part of a page. Just for the effect.

    I googled and got pretty close to where I want to be, but it's not perfect. Unfortunately, I do not understand jQuery well enough to fix it.

    HTML Code:
    <html>
    <head>
    <style>
    
    body {
      margin: 0;
      padding: 0;
    }
    
    .switchme {
     position: relative;
     top: 10px;
     left: 0;
     width: 600px;
     height: 10px;
    }
    
    .on {
     background: #00ff00;
    }
    
    .off {
     background: #ff0000;
    }
    
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
     $(document).ready(function() {
       $('#go').click(
        function() {
        
            $(".switchme").animate({left: "-600"}, "slow");
                
            if ($(".switchme").hasClass('on')) {
                $(".switchme").removeClass('on').addClass('off');
            }  else {
                $(".switchme").removeClass('off').addClass('on');
            } 
            $(".switchme").animate({left: "0"}, "slow");
            return false;
        } 
     ); 
     });
    </script>
    
    </head>
    <body>
    <div class="switchme on"> </div> <p><a href="#" id="go">go go!</a></p>
    </body>
    </html>
    

    This works, but for some reason the removeClass function is "skipping ahead in line". It is not waiting for the animate function to complete.
    "Do or do not. There is no try." -- Yoda

  9. #9
    SitePoint Enthusiast ironikart's Avatar
    Join Date
    Apr 2005
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd need to put the code for animating the second part in the completion callback:

    Code:
     $(document).ready(function() {
       $('#go').click(
        function() {
        
            $(".switchme").animate({left: "-600"}, "slow",function(){
                if ($(".switchme").hasClass('on')) {
                    $(".switchme").removeClass('on').addClass('off');
                }  else {
                    $(".switchme").removeClass('off').addClass('on');
                } 
                $(".switchme").animate({left: "0"}, "slow");
            });
            return false;
        } 
     ); 
     });
    You could probably improve the code a little by storing the jquery collection in a variable and toggling one css class rather than having an 'on' and 'off' class (ie, the absence of 'on' is your off state):

    Code:
     $(document).ready(function() {
       $('#go').click(
        function(e) {
            var $switch = $(".switchme");
            $switch.animate({left: "-600"}, "slow",function(){
                $switch.toggleClass('on').animate({left: "0"}, "slow");
            });
            e.preventDefault();
        } 
     ); 
     });

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ironikart View Post
    Code:
     $(document).ready(function() {
       $('#go').click(
        function(e) {
            var $switch = $(".switchme");
            $switch.animate({left: "-600"}, "slow",function(){
                $switch.toggleClass('on').animate({left: "0"}, "slow");
            });
            e.preventDefault();
        } 
     ); 
     });
    Thank you very much!!!!


    I got it working with this:

    Code:
    <script>
     $(document).ready(function() {
       $('#go').click(function() {
        
            $(".switchme").animate({
            left: "-600"
            }, "slow", function() {
                
            if ($(".switchme").hasClass('on')) {
                $(".switchme").removeClass('on').addClass('off');
            }  
    
            else {
                $(".switchme").removeClass('off').addClass('on');
            } 
    
            });
            $(".switchme").animate({left: "0"}, "slow");
            });
    
            return false;
     });
    </script>
    But that was through trial and error and not really understanding what I was doing. Your example is obviously much cleaner.

    I guess I should really just read up on jQuery. Watching a couple basic tutorials is not helping me with syntax, which is where my problem is.



    Again, thank you.
    "Do or do not. There is no try." -- Yoda


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
  •