1/* ---------------------------------- 2jQuery Timelinr 0.9.4 3 4tested with jQuery v1.6+ 5©2011 CSSLab.cl 6free for any use, of course... :D 7instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/ 8---------------------------------- */ 9 10jQuery.fn.timelinr = function(options){ 11 // default plugin settings 12 settings = jQuery.extend({ 13 orientation: 'horizontal', // value: horizontal | vertical, default to horizontal 14 containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline 15 datesDiv: '#dates', // value: any HTML tag or #id, default to #dates 16 datesSelectedClass: 'selected', // value: any class, default to selected 17 datesSpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) 18 issuesDiv: '#issues', // value: any HTML tag or #id, default to #issues 19 issuesSelectedClass: 'selected', // value: any class, default to selected 20 issuesSpeed: 200, // value: integer between 100 and 1000 (recommended), default to 200 (fast) 21 issuesTransparency: 0, // value: integer between 0 and 1 (recommended), default to 0.2 22 issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) 23 prevButton: '#prev', // value: any HTML tag or #id, default to #prev 24 nextButton: '#next', // value: any HTML tag or #id, default to #next 25 arrowKeys: 'false', // value: true | false, default to false 26 startAt: 1, // value: integer, default to 1 (first) 27 autoPlay: 'false', // value: true | false, default to false 28 autoPlayDirection: 'forward', // value: forward | backward, default to forward 29 autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs) 30 31 }, options); 32 33 $(function(){ 34 // setting variables... many of them 35 var howManyDates = $(settings.datesDiv+' li').length; 36 var howManyIssues = $(settings.issuesDiv+' li').length; 37 var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); 38 var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass); 39 var widthContainer = $(settings.containerDiv).width(); 40 var heightContainer = $(settings.containerDiv).height(); 41 var widthIssues = $(settings.issuesDiv).width(); 42 var heightIssues = $(settings.issuesDiv).height(); 43 var widthIssue = $(settings.issuesDiv+' li').width(); 44 var heightIssue = $(settings.issuesDiv+' li').height(); 45 var widthDates = $(settings.datesDiv).width(); 46 var heightDates = $(settings.datesDiv).height(); 47 var widthDate = $(settings.datesDiv+' li').width(); 48 var heightDate = $(settings.datesDiv+' li').height(); 49 50 // set positions! 51 if(settings.orientation == 'horizontal') { 52 $(settings.issuesDiv).width(widthIssue*howManyIssues); 53 $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); 54 var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); 55 } else if(settings.orientation == 'vertical') { 56 $(settings.issuesDiv).width(widthIssue*howManyIssues);//$(settings.issuesDiv).height(heightIssue*howManyIssues); 57 /*$(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2-420);*/ 58 var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); 59 } 60 61 $(settings.datesDiv+' a').click(function(event){ 62 event.preventDefault(); 63 // first vars 64 var whichIssue = $(this).text(); 65 var currentIndex = $(this).parent().prevAll().length; 66 67 // moving the elements 68 if(settings.orientation == 'horizontal') { 69 $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); 70 } else if(settings.orientation == 'vertical') { 71 $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); 72 } 73 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1); 74 75 // now moving the dates 76 $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass); 77 $(this).addClass(settings.datesSelectedClass); 78 if(settings.orientation == 'horizontal') { 79 $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:settings.datesSpeed}); 80 } else if(settings.orientation == 'vertical') { 81 /*$(settings.datesDiv).animate({'marginTop':defaultPositionDates-((heightDate-18)*currentIndex)},{queue:false, duration:settings.datesSpeed});*/ 82 } 83 }); 84 85 $(settings.nextButton).bind('click', function(event){ 86 event.preventDefault(); 87 if(settings.orientation == 'horizontal') { 88 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); 89 var currentIssueIndex = currentPositionIssues/widthIssue; 90 var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); 91 var currentIssueDate = currentPositionDates-widthDate;
92 if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) { 93 $(settings.issuesDiv).stop(); 94 $(settings.datesDiv+' li:last-child a').click(); 95 } else { 96 if (!$(settings.issuesDiv).is(':animated')) { 97 $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed}); 98 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 99 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 100 $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:settings.datesSpeed}); 101 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); 102 } 103 } 104 } else if(settings.orientation == 'vertical') { 105 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); 106 var currentIssueIndex = currentPositionIssues/heightIssue; 107 /*var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));*/ 108 var currentIssueDate = currentPositionDates-heightDate; 109 if(currentPositionIssues <= -(widthIssue*(howManyIssues)-(widthIssue))) { 110 $(settings.issuesDiv).stop(); 111 $(settings.datesDiv+' li:last-child a').click(); 112 } else { 113 if (!$(settings.issuesDiv).is(':animated')) { 114 $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed}); 115 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 116 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 117 $(settings.datesDiv).animate(/*{'marginTop':currentIssueDate+18},*/{queue:false, duration:settings.datesSpeed}); 118 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); 119 } 120 } 121 } 122 }); 123 124 $(settings.prevButton).click(function(event){ 125 event.preventDefault(); 126 if(settings.orientation == 'horizontal') { 127 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); 128 var currentIssueIndex = currentPositionIssues/widthIssue; 129 var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); 130 var currentIssueDate = currentPositionDates+widthDate; 131 if(currentPositionIssues >= 0) { 132 $(settings.issuesDiv).stop(); 133 $(settings.datesDiv+' li:first-child a').click(); 134 } else { 135 if (!$(settings.issuesDiv).is(':animated')) { 136 $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed}); 137 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 138 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 139 $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:settings.datesSpeed}); 140 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); 141 } 142 } 143 } else if(settings.orientation == 'vertical') { 144 var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); 145 var currentIssueIndex = currentPositionIssues/heightIssue; 146 /*var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));*/ 147 var currentIssueDate = currentPositionDates+heightDate; 148 if(currentPositionIssues >= 0) { 149 $(settings.issuesDiv).stop(); 150 $(settings.datesDiv+' li:first-child a').click(); 151 } else { 152 if (!$(settings.issuesDiv).is(':animated')) { 153 $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed}); 154 $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); 155 $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); 156 $(settings.datesDiv).animate(/*{'marginTop':currentIssueDate-30},*/{queue:false, duration:settings.datesSpeed},{queue:false, duration:settings.issuesSpeed}); 157 $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); 158 } 159 } 160 } 161 }); 162 163 // keyboard navigation, added since 0.9.1 164 if(settings.arrowKeys=='true') { 165 if(settings.orientation=='horizontal') { 166 $(document).keydown(function(event){ 167 if (event.keyCode == 39) { 168 $(settings.nextButton).click(); 169 } 170 if (event.keyCode == 37) { 171 $(settings.prevButton).click(); 172 } 173 }); 174 } else if(settings.orientation=='vertical') { 175 $(document).keydown(function(event){ 176 if (event.keyCode == 40) { 177 $(settings.nextButton).click(); 178 } 179 if (event.keyCode == 38) { 180 $(settings.prevButton).click(); 181 } 182 }); 183 } 184 } 185 186 // default position startAt, added since 0.9.3 187 $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click'); 188 189 // autoPlay, added since 0.9.4 190 if(settings.autoPlay == 'true') { 191 setInterval("autoPlay()", settings.autoPlayPause); 192 } 193 }); 194 195}; 196 197// autoPlay, added since 0.9.4 198function autoPlay(){ 199 var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); 200 if(settings.autoPlayDirection == 'forward') { 201 if(currentDate.parent().is('li:last-child')) { 202 $(settings.datesDiv+' li:first-child').find('a').trigger('click'); 203 } else { 204 currentDate.parent().next().find('a').trigger('click'); 205 } 206 } else if(settings.autoPlayDirection == 'backward') { 207 if(currentDate.parent().is('li:first-child')) { 208 $(settings.datesDiv+' li:last-child').find('a').trigger('click'); 209 } else { 210 currentDate.parent().prev().find('a').trigger('click'); 211 } 212 } 213} 214
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.