From 751945508bbc5480df48088ee58f5ffd7f5a18f8 Mon Sep 17 00:00:00 2001 From: Tiago Noronha Date: Mon, 1 Apr 2013 14:37:04 +0100 Subject: [PATCH 1/3] Make sure currentSlide is a number Make sure that currentSlide is a number and not a string. If it is a string like '1', FlexSlider will start appending instead of doing the correct calculations. --- jquery.flexslider.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jquery.flexslider.js b/jquery.flexslider.js index 44f82a1f..4c988eb7 100644 --- a/jquery.flexslider.js +++ b/jquery.flexslider.js @@ -35,7 +35,9 @@ methods = { init: function() { slider.animating = false; - slider.currentSlide = slider.vars.startAt; + // Get current slide and make sure it is a number + slider.currentSlide = parseInt( ( slider.vars.startAt ? slider.vars.startAt : 0) ); + if ( isNaN( slider.currentSlide ) ) slider.currentSlide = 0; slider.animatingTo = slider.currentSlide; slider.atEnd = (slider.currentSlide === 0 || slider.currentSlide === slider.last); slider.containerSelector = slider.vars.selector.substr(0,slider.vars.selector.search(' ')); From 77e45f986050b6f149678ffc81aafef40db9f808 Mon Sep 17 00:00:00 2001 From: Daniel Szymanek Date: Sat, 8 Jun 2013 03:28:39 +0200 Subject: [PATCH 2/3] Use viewport (instead of applet) width for calculations Fix allows to style viewport to be smaller than the slider (for ex. for keeping direction nav beside slides) and keep the carousel functionality. Prevents skipping slides... --- jquery.flexslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.flexslider.js b/jquery.flexslider.js index 44f82a1f..4bda3b20 100644 --- a/jquery.flexslider.js +++ b/jquery.flexslider.js @@ -787,7 +787,7 @@ minItems = slider.vars.minItems, maxItems = slider.vars.maxItems; - slider.w = slider.width(); + slider.w = (slider.viewport===undefined) ? slider.width() : slider.viewport.width(); slider.h = slide.height(); slider.boxPadding = slide.outerWidth() - slide.width(); From 2250e8b4579cb041d1e42d7a5d743b029d3b67f2 Mon Sep 17 00:00:00 2001 From: Daniel Szymanek Date: Sat, 8 Jun 2013 03:35:45 +0200 Subject: [PATCH 3/3] Add support for Page Visibility API, handle prerender scenario --- jquery.flexslider.js | 42 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/jquery.flexslider.js b/jquery.flexslider.js index 44f82a1f..2173e8f4 100644 --- a/jquery.flexslider.js +++ b/jquery.flexslider.js @@ -51,6 +51,9 @@ // SLIDESHOW: slider.manualPause = false; slider.stopped = false; + //PAUSE WHEN INVISIBLE + slider.started = false; + slider.startTimeout = null; // TOUCH/USECSS: slider.transitions = !slider.vars.video && !fade && slider.vars.useCSS && (function() { var obj = document.createElement('div'), @@ -112,6 +115,9 @@ // PAUSEPLAY if (slider.vars.pausePlay) methods.pausePlay.setup(); + //PAUSE WHEN INVISIBLE + if (slider.vars.slideshow && slider.vars.pauseInvisible) methods.pauseInvisible.init(); + // SLIDSESHOW if (slider.vars.slideshow) { if (slider.vars.pauseOnHover) { @@ -122,7 +128,10 @@ }); } // initialize animation - (slider.vars.initDelay > 0) ? setTimeout(slider.play, slider.vars.initDelay) : slider.play(); + //If we're visible, or we don't use PageVisibility API + if(!slider.vars.pauseInvisible || !methods.pauseInvisible.isHidden()) { + (slider.vars.initDelay > 0) ? slider.startTimeout = setTimeout(slider.play, slider.vars.initDelay) : slider.play(); + } } // TOUCH @@ -499,6 +508,34 @@ case "pause": $obj.pause(); break; } }, + pauseInvisible: { + visProp: null, + init: function() { + var prefixes = ['webkit','moz','ms','o']; + + if ('hidden' in document) return 'hidden'; + for (var i = 0; i < prefixes.length; i++) { + if ((prefixes[i] + 'Hidden') in document) + methods.pauseInvisible.visProp = prefixes[i] + 'Hidden'; + } + if (methods.pauseInvisible.visProp) { + var evtname = methods.pauseInvisible.visProp.replace(/[H|h]idden/,'') + 'visibilitychange'; + document.addEventListener(evtname, function() { + if (methods.pauseInvisible.isHidden()) { + if(slider.startTimeout) clearTimeout(slider.startTimeout); //If clock is ticking, stop timer and prevent from starting while invisible + else slider.pause(); //Or just pause + } + else { + if(slider.started) slider.play(); //Initiated before, just play + else (slider.vars.initDelay > 0) ? setTimeout(slider.play, slider.vars.initDelay) : slider.play(); //Didn't init before: simply init or wait for it + } + }); + } + }, + isHidden: function() { + return document[methods.pauseInvisible.visProp] || false; + } + }, setToClearWatchedEvent: function() { clearTimeout(watchedEventClearTimer); watchedEventClearTimer = setTimeout(function() { @@ -649,7 +686,7 @@ // SLIDESHOW: slider.play = function() { slider.animatedSlides = slider.animatedSlides || setInterval(slider.animateSlides, slider.vars.slideshowSpeed); - slider.playing = true; + slider.started = slider.playing = true; // PAUSEPLAY: if (slider.vars.pausePlay) methods.pausePlay.update("pause"); // SYNC: @@ -928,6 +965,7 @@ // Usability features pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended. pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering + pauseInvisible: true, //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage. useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches