1;(function ($, window, document, undefined) { 2 3 var name = "easyTicker", 4 defaults = { 5 direction: 'up', // Supports 'up', 'down', 'left', 'right' 6 easing: 'swing', 7 speed: 'slow', 8 interval: 2000, 9 height: 'auto', 10 visible: 0, 11 mousePause: true, 12 autoplay: true, 13 controls: { 14 up: '', 15 down: '', 16 toggle: '', 17 playText: 'Play', 18 stopText: 'Stop' 19 }, 20 callbacks: { 21 before: false, 22 after: false, 23 finish: false 24 } 25 }; 26 27 function EasyTicker(el, options) { 28 var s = this; 29 30 s.opts = $.extend({}, defaults, options); 31 s.elem = $(el); 32 s.targ = $(el).children(':first-child'); 33 s.timer = 0; 34 s.moving = true; 35 36 init(); 37 start(); 38 tabFocusHandle(); 39 40 if (s.opts.mousePause) { 41 s.elem.on('mouseenter', function () { 42 s.timerTemp = s.timer; 43 stop(); 44 }).on('mouseleave', function () { 45 if (s.timerTemp !== 0) 46 start(); 47 }); 48 } 49 50 $(s.opts.controls.up).on('click', function (e) { 51 e.preventDefault(); 52 moveDir('up'); 53 }); 54 55 $(s.opts.controls.down).on('click', function (e) { 56 e.preventDefault(); 57 moveDir('down'); 58 }); 59 60 $(s.opts.controls.toggle).on('click', function (e) { 61 e.preventDefault(); 62 if (s.timer == 0) start(); 63 else stop(); 64 }); 65 66 function init() { 67 s.elem.children().css('margin', 0).children().css('margin', 0); 68 69 s.elem.css({ 70 position: 'relative', 71 height: s.opts.height, 72 overflow: 'hidden' 73 }); 74 75 s.targ.css({ 76 position: 'absolute', 77 margin: 0 78 }); 79 80 if (s.opts.direction === 'left' || s.opts.direction === 'right') { 81 s.targ.css('white-space', 'nowrap'); 82 } 83 84 adjustHeight(false); 85 } 86 87 function start() { 88 if (!s.opts.autoplay) 89 return; 90 91 startForce(); 92 } 93 94 function startForce() { 95 if (s.timer != 0) 96 return; 97 98 s.timer = setInterval(function () { 99 move(s.opts.direction); 100 }, s.opts.interval); 101 102 $(s.opts.controls.toggle).addClass('et-run').html(s.opts.controls.stopText); 103 } 104 105 function stop() { 106 clearInterval(s.timer); 107 s.timer = 0; 108 $(s.opts.controls.toggle).removeClass('et-run').html(s.opts.controls.playText); 109 } 110 111 function move(dir) { 112 var sel, eq, appType; 113 114 if (s.moving) return; 115 if (!s.elem.is(':visible')) return; 116 117 if (dir === 'up' || dir === 'left') { 118 sel = ':first-child'; 119 eq = (dir === 'up' ? '-=' : '-='); // Adjust direction for 'left' 120 appType = 'appendTo'; 121 } else { 122 sel = ':last-child'; 123 eq = (dir === 'down' ? '+=' : '+='); // Adjust direction for 'right' 124 appType = 'prependTo'; 125 } 126 127 var selChild = s.targ.children(sel); 128 var dimension = (dir === 'up' || dir === 'down') ? selChild.outerHeight() : selChild.outerWidth(); 129 130 if (typeof s.opts.callbacks.before === 'function') { 131 s.opts.callbacks.before.call(s, s.targ, selChild); 132 } 133 134 s.moving = true; 135 136 var animateProps = (dir === 'up' || dir === 'down') ? { 'top': eq + dimension + 'px' } : { 'left': eq + dimension + 'px' }; 137 138 s.targ.stop(true, true).animate(animateProps, s.opts.speed, s.opts.easing, function () { 139 selChild.hide()[appType](s.targ).fadeIn(); 140 s.targ.css(dir === 'up' || dir === 'down' ? 'top' : 'left', 0); 141 142 adjustHeight(true); 143 s.moving = false;
144 145 if (typeof s.opts.callbacks.after === 'function') { 146 s.opts.callbacks.after.call(s, s.targ, selChild); 147 } 148 }); 149 } 150 151 function moveDir(dir) { 152 stop(); 153 move(dir); 154 } 155 156 function adjustHeight(animate) { 157 if (s.opts.height == 'auto') { 158 var wrapHeight = 0; 159 s.targ.children(':lt(' + s.opts.visible + ')').each(function () { 160 wrapHeight += $(this).outerHeight(); 161 }); 162 163 s.elem.stop(true, true).animate({ height: wrapHeight }, s.opts.speed); 164 } 165 } 166 167 function tabFocusHandle() { 168 var hidden, visibilityChange; 169 if (typeof document.hidden !== 'undefined') { 170 hidden = 'hidden'; 171 visibilityChange = 'visibilitychange'; 172 } else if (typeof document.msHidden !== 'undefined') { 173 hidden = 'msHidden'; 174 visibilityChange = 'msvisibilitychange'; 175 } else if (typeof document.webkitHidden !== 'undefined') { 176 hidden = 'webkitHidden'; 177 visibilityChange = 'webkitvisibilitychange'; 178 } 179 document.addEventListener(visibilityChange, function () { 180 if (document[hidden]) { 181 stop(); 182 } else { 183 start(); 184 } 185 }, false); 186 } 187 188 return { 189 up: function () { moveDir('up'); }, 190 down: function () { moveDir('down'); }, 191 start: startForce, 192 stop: stop, 193 options: s.opts 194 }; 195 } 196 197 $.fn[name] = function (options) { 198 return this.each(function () { 199 if (!$.data(this, name)) { 200 $.data(this, name, new EasyTicker(this, options)); 201 } 202 }); 203 }; 204 205})(jQuery, window, document); 206 207$(document).ready(function(){ 208 209 var myET = $('.myTicker').easyTicker({ 210 direction: 'up', 211 easing: 'swing', 212 speed: 'slow', 213 interval: 2000, 214 visible: 1, 215 height: '450', 216 mousePause: true, 217 autoplay: true, 218 controls: { 219 up: '.up', 220 down: '.down', 221 toggle: '.toggle', 222 // stopText: 'Stop !!!' 223 }, 224 callbacks: { 225 before: function(ul, li){ 226 $(li).css('color', 'red'); 227 }, 228 after: function(ul, li){ 229 }, 230 finish: function(a){ 231 } 232 } 233 }).data('easyTicker'); 234 235 cc = 1; 236 $('.add').click(function(){ 237 $('.myTicker ul').append('<li>' + cc + ' Triangles can be made easily using CSS also without any images. This trick requires only div tags and some</li>'); 238 cc++; 239 }); 240 241 $('.visible-3').click(function(){ 242 myET.options['visible'] = 3; 243 244 }); 245 246 $('.visible-all').click(function(){ 247 myET.stop(); 248 myET.options['visible'] = 0 ; 249 myET.start(); 250 }); 251 252 var ticker2 = $('.myTicker2').easyTicker({ 253 interval: 5000, 254 height: 'auto', 255 visible: 3 256 }); 257 258 var ticker3 = $('.myTicker3').easyTicker({ 259 interval: 1000, 260 height: '350', 261 speed: 'slow', 262 visible: 4 263 }).data('easyTicker'); 264 265 $('.up3').click(function(){ 266 ticker3.up(); 267 }); 268 269 $('.down3').click(function(){ 270 ticker3.down(); 271 }); 272 273 var ticker4 = $('.myTicker4').easyTicker({ 274 interval: 5000, 275 height: '50', 276 visible: 3 277 }); 278 279 var ticker5 = $('.myTicker5').easyTicker({ 280 interval: 5000, 281 height: '50', 282 visible: 3 283 }); 284 285 $('.t5Btn').click(function(){ 286 $('.t5Wrap').fadeToggle(); 287 }); 288 289 var ticker6 = $('.myTicker6').easyTicker({ 290 interval: 2000, 291 visible: 3, 292 autoplay: false 293 }); 294 295}); 296 297
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.