make background image div wrap around

Question

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 the aforementioned image as a background.

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.

It all works great apart from I can't figure out a way so that when 10 is reached I can smooth scroll to 1 (IE: Wrap around so that when the div is clicked on 10, the number 10 scrolls up and is replaced by the number 1 from the top of the graphic scrolling up). I know I can test the top position and if it is in the correct place just reset it to 0px but that will make it "jump" to 1, not wrap around. I could scroll the length of the jpg in reverse to scroll BACK to 1 but thats not the effect I want - I want it to look like a continous counter that goes from 1 to 10 and then to 1 again.

Here is a jsFiddle for it : http://jsfiddle.net/ChrisJones/zTBYe/2/

Can anyone think of a way to do this please ???

For reference here is the complete code :

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
    #slider{
     width:50px;
     height:500px;
     background: url(numstrip.jpg) no-repeat;
     position:relative;
     top:0px;
    }
    #wrapper{
     width:50px;
     height:50px;
     position:fixed;
     overflow:hidden;
     }
</style>
</head>
<body>
Div is below
<br>
<br>
<div id="wrapper">
    <div id="slider"></div>
</div>
<script type="text/javascript">
 $(document).ready(function () {
     $('#slider').click(function () {
         topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });
 });
</script>
</body>
</html>

I have worked it out but still need some help please :) What I've done is use an img tag in the inner div rather than have image as div background. I slide the div as normal. When div reaches 10 I alter contents of inner div so it has 2 image strips on top of each other & continue scroll. On next 50px iteration I remove top image from the div & reset css "top" position and so on... Here is another jsFiddle : http://jsfiddle.net/ChrisJones/7xBE4/3/ HOWEVER... I now need this to work in the other direction (count from 10 to 1 and scroll UP rather than down - can anyone help please :) ) — Chris Jones, Sep 18 '13 at 17:25

score 0 · Answer 1 · answered Sep 18 '13 at 14:54

0

Added only counter and checked it;

 $(document).ready(function () {
     var counter = 1;
     $('#slider').click(function () {
         if(counter == 10)
             topPos = 0;
         else
             topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
         counter++;
     });
 });

Updated your fiddle, here it is.

http://jsfiddle.net/zTBYe/3/

answered Sep 18 '13 at 14:54

mithataydogmus

366
2
11

Quote from question: "_the number 10 scrolls up and is replaced by the number 1 from the top of the graphic scrolling up_" – Morpheus Sep 18 '13 at 14:55
You mentioned that you right. You can't do this in like that now. Good approach can be slicing each number as different divs and use 'background-position'. And on every click you need to change clicked div's positions and take last div to first. – mithataydogmus Sep 18 '13 at 15:00
1

That's what I though mithataydogmus, to acheive the effect I want I may have to slice into individual 50x50 graphics and use 10 divs. I just though there might be a way to do it with the single strip. – Chris Jones Sep 18 '13 at 15:19

score 0 · Answer 2 · answered Sep 18 '13 at 15:06

Try this, this is help you

    $('#slider').click(function () {
        if($(this).css("top")=='-450px')
            topPos = parseInt($(this).css("top")) + 450;
else
    topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });

Fiddle here

make background image div wrap around

2 Answers2