BootstrapTest/timeline.js at master · jillsadowski/BootstrapTest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
var timelineWidth = 0;
var panelWidth = 0;
var firstRun = true;
var totalPanels = 0;
var currentPanel = 0;


$(document).ready(function(){
    panelWidth = $('.timeline .panel_panel').width();
    timelineWidth = $('.timeline').width();
    totalPanels = $('.timeline .panel_panel').length;
    adjustLayout();
    setInterval(checkWindowSize, 1000);

});


function adjustLayout(){

    $('.timeline .panel_panel').each(function(index){
        var newX = panelWidth * index;
        $(this).css('left', newX + 'px');

        var newLabel = $(this).find('.label_label').html();
        $('.timeline nav').append('<a href="#">' + newLabel + '</a>');

    });
    currentPanel = $('.timeline nav a:last-child()').index();


    activateNavigation();
}


function activateNavigation() {

    $('.timeline nav a').on('click', function(){
        currentPanel = $(this).index();
        timelineWidth = $('.timeline').width();
        $('.timeline nav a').removeClass('selected');
        $(this).addClass('selected');

        var timelineOffset = (timelineWidth - panelWidth)* .5;
        var newPosition  = ((currentPanel *panelWidth) * -1) + timelineOffset;

        $('.panel_slider').animate({left:newPosition+ 'px'}, 1000);

        var backgroundWidth = $('.timeline .background_slider img').width();
        var moveAmount = (backgroundWidth - timelineWidth) / totalPanels;
        if(currentPanel != 0) {
            var multiplier = currentPanel + 1;

        }else {

            var multipler = 0;
        }
        var newBackgroundPosition = (moveAmount * multipler) * -1;
        $('.background_slider img.background').animate({left:newBackgroundPosition + 'px'}, 1000);


    });


}

function checkWindowSize () {

    var newTimeLineWidth = $('.timeline').width();

    if(newTimeLineWidth > 500 && timelineWidth > 500){
        //do nothing
    } else if (newTimeLineWidth < 500 && timelineWidth < 500){
        //do nothing
    }else{
        if(newTimeLineWidth > 500 && timelineWidth < 500){
            firstRun = true;
        }
    }


    timelineWidth = newTimeLineWidth;


    if (firstRun == true){
        $('.timeline nav a:nth-child('+(curentPanel +1)+')').trigger('click');
        firstRun = false;

    }
}