Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help reversing my jquery sliding div please :)

    Hi all - I really hope someone can help as this is driving me bonkers !

    I have a jpg that is 500px high and 50px wide. It consists of 10 50px x 50px squares each containing a number from 1 to 10 (1 at top of image and 10 at bottom). (The jpg is here : http://i39.tinypic.com/mmq4x5.jpg )

    I then have a 50x50 container div on a page with overflow set to hidden. Inside this I have a 500 high x 50 wide div that contains an img tag that is set to the "image strip" mentioned above.

    Whenever the visitor clicks on the div, I am scrolling the inner div up by 50 pixels using jquery animate (taking 50px off the css top for the inner div). This gives the effect of a smooth scrolling counter.

    When they get to 10 I alter the contents of the inner div by adding the image strip again so there are two images stacked on top of each other. Then on the next "scroll" I remove one of the images. This, basically, allows the counter to smoothly scroll around to 1 again after it has hit 10 and then carry on scrolling up to 10. I have to do it this way because it needs to be a seamless counter that loops around smoothly without any jumping.

    It works a treat - Here is a jsFiddle for it : http://jsfiddle.net/ChrisJones/eLBk4/1/

    So far so good.... HOWEVER (and here is where I need HELP) :

    I now need to create exactly the same thing but in the other direction. IE: I need it to smoothly scroll DOWN from 10 to 1 and then back to 10 with the animation going down rather than up. I can, of course, get that bit working easily but the bit I can't get working is trying to add the 2nd image (when we reach 1) so that it appears to be a seamless scroll back to 1 again...

    Any ideas or help MUCH appreciated

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Quote Originally Posted by spman View Post
    When they get to 10 I alter the contents of the inner div by adding the image strip again so there are two images stacked on top of each other.
    I think that you should have the same approach in this case. The only difference is that you need to insert the new image before the other one (opposite to just appending it after the other one).

    Let's assume you are using .appendTo() right now, you should check for .insertBefore()

    If you are using .append(), you should check for .before()

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    I think that you should have the same approach in this case. The only difference is that you need to insert the new image before the other one (opposite to just appending it after the other one).

    Let's assume you are using .appendTo() right now, you should check for .insertBefore()

    If you are using .append(), you should check for .before()
    I have tried your suggestion but it still doesn't work.

    If you use this new fiddle : http://jsfiddle.net/ChrisJones/7XPK9/3/ and change the height of the wrapper div to a few thousand you will see what is happening, it inserts the new image but resets the top position of the div.

    Help Please Tearing hair out and I am sure it is something obvious I am missing!

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    329
    Thanks
    9
    Thanked 49 Times in 48 Posts
    In your case/ logic,
    perhaps it's better to still add #img2 after #img1:
    Code:
      $('#but').click(function(){ // execute on click of inner div
    
        topPos = parseInt($('#slider').css("top")) + 50;  // get CSS "top" of inner div and subtract 50
        $('#dpos').val(topPos);
    
        if (topPos == -400) // do we need to remove the 2nd image? 
          $('#img2').remove();
        else
          // If current frame is at #img1's '1' & so is in need of another '10' to the top.
          // #img2 is added however to the bottom, so lets move current frame to #img2's '1'
          if (topPos == 50){   
            $('#img1').after('<img id="img2" src="http://i39.tinypic.com/mmq4x5.jpg">');
            $('#slider').css('top', '-500px');
            topPos = -450;
          }
    
        $('#slider').animate({ // Animate the div
          'top': topPos
        }, 200);
    
      });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •