Question

So I am creating a timeline using positioning in Jquery, and I can easily get the it to move up and down the problem is the timeline only should go from 1943 to 2020. I have gotten the timeline to move up and down easy enough but It will go past the dates and nothing will be visible. I need to make the click function stop if it gets to the end of the timeline.

HTML:

<aside class="timeContainer">

    <div class="timeControlUp">
        <div id="yearUp"></div>
        <div id="decadeUp"></div>
    </div>
    <div class="timeHolder">
        <div class="timeView">
            <div class="longTimeline">

<!-- Year Markers -->            
                <div class="yearMarker">1943</div><div class="yearMarker">1944</div><div class="yearMarker">1945</div><div class="yearMarker">1946</div><div class="yearMarker">1947</div><div class="yearMarker">1948</div><div class="yearMarker">1949</div><div class="yearMarker">1950</div><div class="yearMarker">1951</div><div class="yearMarker">1952</div><div class="yearMarker">1953</div><div class="yearMarker">1954</div><div class="yearMarker">1955</div><div class="yearMarker">1956</div><div class="yearMarker">1957</div><div class="yearMarker">1958</div><div class="yearMarker">1959</div><div class="yearMarker">1960</div><div class="yearMarker">1961</div><div class="yearMarker">1962</div><div class="yearMarker">1963</div><div class="yearMarker">1964</div><div class="yearMarker">1965</div><div class="yearMarker">1966</div><div class="yearMarker">1967</div><div class="yearMarker">1967</div><div class="yearMarker">1969</div><div class="yearMarker">1970</div><div class="yearMarker">1971</div><div class="yearMarker">1972</div><div class="yearMarker">1973</div><div class="yearMarker">1974</div><div class="yearMarker">1975</div><div class="yearMarker">1976</div><div class="yearMarker">1977</div><div class="yearMarker">1978</div><div class="yearMarker">1979</div><div class="yearMarker">1980</div><div class="yearMarker">1981</div><div class="yearMarker">1982</div><div class="yearMarker">1983</div><div class="yearMarker">1984</div><div class="yearMarker">1985</div><div class="yearMarker">1986</div><div class="yearMarker">1987</div><div class="yearMarker">1988</div><div class="yearMarker">1989</div><div class="yearMarker">1990</div><div class="yearMarker">1991</div><div class="yearMarker">1992</div><div class="yearMarker">1993</div><div class="yearMarker">1994</div><div class="yearMarker">1995</div><div class="yearMarker">1996</div><div class="yearMarker">1997</div><div class="yearMarker">1998</div><div class="yearMarker">1999</div><div class="yearMarker">2000</div><div class="yearMarker">2001</div><div class="yearMarker">2002</div><div class="yearMarker">2003</div><div class="yearMarker">2004</div><div class="yearMarker">2005</div><div class="yearMarker">2006</div><div class="yearMarker">2007</div><div class="yearMarker">2008</div><div class="yearMarker">2009</div><div class="yearMarker">2010</div><div class="yearMarker">2011</div><div class="yearMarker">2012</div><div class="yearMarker">2013</div><div class="yearMarker">2014</div><div class="yearMarker">2015</div><div class="yearMarker">2016</div><div class="yearMarker">2017</div><div class="yearMarker">2018</div><div class="yearMarker">2019</div>

<!-- End Year Markers -->           

            <img src="img/dateButton.png" id="dateButton1" class="dateButton" />
            <img src="img/dateButton.png" id="dateButton2" class="dateButton" />
            <img src="img/dateButton.png" id="dateButton3" class="dateButton" />

            </div>
        </div>
    </div>  

The CSS:

/*---------- Start Timeline 2 ---------*/

.timeContainer { position: fixed; width: 100px; height: 90%; margin: 2% 0% 5% 0%; top: 0px; right: 30px; overflow:hidden;}

.timeControlUp { position:absolute; width: 100px; height: 50px; top: 0px; left: 0px; background-image:url(../img/timeButBG.png); z-index: 101; text-align:center;}

#yearUp { position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position:top left; cursor:pointer;}

#yearUp:hover { position: relative; top: 0px; left: 0px; width: 50%; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -100px 0px; cursor:pointer;}

#decadeUp { position: relative; top: -50px; left: 50px; width: 50%; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -52px 0px; cursor: crosshair;}

#decadeUp:hover { position: relative; top: -50px; left: 50px; width: 50px; height: 50px; background-image: url(../img/timeUp.png); background-repeat:no-repeat; background-position: -152px 0px; cursor:pointer;}


.timeHolder { position: absolute; width: 100px; height: 100%; margin: 50px 0px 50px 0px; top: 0px; left: 0px;}

.timeView { position:absolute; width: 100%; height: 28105px; top: -24820px; left: 0px; background-image:url(../img/longTimeBG3.png); background-repeat:repeat-y; background-position: top left; z-index: 90;}

.timeControlDown { position:absolute; width: 100%; height: 50px; bottom: 0px; left: 0px; background-image:url(../img/timeButBG.png); z-index: 101;}

#yearDown { position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position:top left; cursor:pointer;}

#yearDown:hover { position: relative; top: 0px; left: 0px; width: 50%; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -100px 0px; cursor:pointer;}

#decadeDown { position: relative; top: -50px; left: 50px; width: 50%; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -52px 0px; cursor: crosshair;}

#decadeDown:hover { position: relative; top: -50px; left: 50px; width: 50px; height: 50px; background-image: url(../img/timeDown.png); background-repeat:no-repeat; background-position: -152px 0px; cursor:pointer;}

.yearMarker { position:relative; z-index: 91; top:0px; right: 0px; width: 95px; height: 365px; text-align:right; font-family:Verdana, Geneva, sans-serif; font-weight:bold; color: #000; }


.dateButton { width: 40px; cursor:pointer;}
#dateButton1 { position:absolute; z-index: 102; top:25430px; left: 5px; width: 30px; height: 30px; text-align:right; font-family:Verdana, Geneva, sans-serif; font-weight:bold; color: #000; }
#dateButton2 { position:absolute; z-index: 102; top:24687px; left: 5px; width: 30px; height: 30px;}
#dateButton3 { position:absolute; z-index: 102; top:21212px; left: 5px; width: 30px; height: 30px;}

/*---------- End Timeline 2 ---------*/

And the Script itself:

// JavaScript Document
$(document).ready(function() {


$('#yearUp').click(function(){
    $('.timeHolder').animate({
        marginTop: '+=365px',
    }, 1000);
})
$('#yearDown').click(function(){
    $('.timeHolder').animate({
        marginTop: '-=365px',
    }, 1000);
})
$('#decadeUp').click(function(){
    $('.timeHolder').animate({
        marginTop: '+=3650px',
    }, 1000);
})
$('#decadeDown').click(function(){
    $('.timeHolder').animate({
        marginTop: '-=3650px',
    }, 1000);
})




})

Answer 1

OK got it figured out, you have to figure out the initial position and subtract and add the position from your starting point so:

my total height for the div was 28105px

my starting point was 2011(the year):

the position of 2011 was 24829px

this on doc ready is set to 0

so you have to figure where3 to stop and start

here is the script:

// JavaScript Document 

$(document).ready(function() {

    $('#yearUp').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top + 365 <= 24820) {
            $('.timeHolder').animate({
                top: '+=365px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#yearDown').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top - 365 >= -2555) {
            $('.timeHolder').animate({
                top: '-=365px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#decadeUp').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top + 3650 <= 24820) {
            $('.timeHolder').animate({
                top: '+=3650px',
            }, 1000);
        }else{
            return false
        }
    });
    $('#decadeDown').click(function(){
        var pos = $('.timeHolder').position();        
        if (pos.top - 3650 >= -2555) {
            $('.timeHolder').animate({
                top: '-=3650px',
            }, 1000);
        }else{
            return false
        }
    });


});

mad thanks to @PJH for helping to guide the way, sorry I couldn’t provide more images and stuff for the fiddle but being inside the intranet would not allow. Thanks for everyone else for their input