Skip to content
This repository has been archived by the owner on May 22, 2019. It is now read-only.

timeout event cleanup #16

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

timeout event cleanup #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8aa116b
cleaned up handling of timeout events to make sure multiples don't get
lecar-red Sep 5, 2012
d9fbe32
added start and stop events to library
lecar-red Sep 14, 2012
1ba9582
removed debugging statements
lecar-red Sep 14, 2012
3e35dc4
fix next/current math on keyleft nav
lecar-red Sep 25, 2012
f3c7abe
prevented key events from changing slides on form inputs
lecar-red Sep 26, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blueberry - A simple, fluid, responsive jQuery image slider.</title>

<!--
/*
* jQuery Blueberry Slider v0.4 BETA
* http://marktyrrell.com/labs/blueberry/
*
* Copyright (C) 2011, Mark Tyrrell <[email protected]>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

<link rel="stylesheet" href="blueberry.css" />
<style type="text/css">
<!--
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #404040;
}
a { color: #264c99; text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,p { margin-bottom: 20px; }
h1 {
font-size: 48px;
line-height: 60px;
color: #ffffff;
text-transform: lowercase;
}
h2, h3 {
font-weight: normal;
font-size: 22px;
line-height: 40px;
color: #808080;
}
h3 { font-size: 18px; color: #404040; }
h5 { font-weight: bold; font-size: 14px; color: #000; }

#header {
height: 60px;
padding-top: 20px; padding-bottom: 20px;
text-align: center;
background: #405580;
}
#header h1 {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}
#doc { margin: 40px 0; }
#content {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}

.blueberry { max-width: 960px; }
.form { text-align: center; }
.form input, .form select, .form textarea { font-size: 1.5em; }
-->
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry({hoverpause: true});
});
</script>

</head>
<body>

<div id="header">
<h1><img src="http://marktyrrell.com/labs/blueberry/img/logo.png" alt="Blueberry" /></h1>
</div>

<div id="doc">
<div id="content">

<!-- blueberry -->

<div class="blueberry">
<ul class="slides">
<li><img src="http://marktyrrell.com/labs/blueberry/img/slide1.jpg" /></li>
<li><img src="http://marktyrrell.com/labs/blueberry/img/slide2.jpg" /></li>
<li><img src="http://marktyrrell.com/labs/blueberry/img/slide3.jpg" /></li>
<li><img src="http://marktyrrell.com/labs/blueberry/img/slide4.jpg" /></li>
</ul>
</div>

<!-- blueberry -->
<div class="form">
<form>
<input type="text" name="foo" value="" size="50"><br><br>
<textarea></textarea><br><br>
select:
<select name="bar">
<option>Oranges</option>
<option>Apples</option>
<option>Blueberries</option>
</select>
</form>
</div>
</div>
</div>

</body>
</html>
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,12 @@
-->
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry();
$('.blueberry').blueberry({hoverpause: true});
});
</script>

Expand Down
92 changes: 58 additions & 34 deletions jquery.blueberry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
if(pager){
$('a', pager).click(function() {
//stop the timer
clearTimeout(obj.play);
clearTimer();
//set the slide index based on pager index
next = $(this).parent().index();
//rotate the slides
Expand Down Expand Up @@ -110,27 +110,48 @@
current = next;
next = current >= slides.length-1 ? 0 : current+1;
};

//create a timer to control slide rotation interval
var rotateTimer = function(){
// clean up everyone do their share to avoid a
// crap load of timeouts floating around
clearTimer();

obj.play = setTimeout(function(){
//trigger slide rotate function at end of timer
rotate();
}, o.interval);
};

var clearTimer = function() {
if ( obj.play ) {
clearTimeout(obj.play);
obj.play = null;
}
}

var setHoverPause = function() {
if(o.hoverpause){
slides.hover(function(){
//stop the timer in mousein
clearTimer();
}, function(){
//start the timer on mouseout
rotateTimer();
});
}
}

var clearHover = function() {
if (o.hoverpause) {
slides.unbind('mouseenter mouseleave');
}
}

//start the timer for the first time
rotateTimer();

//pause the slider on hover
//disabled by default due to bug
if(o.hoverpause){
slides.hover(function(){
//stop the timer in mousein
clearTimeout(obj.play);
}, function(){
//start the timer on mouseout
rotateTimer();
});
}
setHoverPause();

//calculate and set height based on image width/height ratio and specified line height
var setsize = function(){
Expand All @@ -146,36 +167,39 @@
setsize();
});



//Add keyboard navigation

if(o.keynav){
if(o.keynav){
$(document).keyup(function(e){

switch (e.which) {

case 39: case 32: //right arrow & space

clearTimeout(obj.play);

clearTimer();
rotate();

break;


case 37: // left arrow
clearTimeout(obj.play);
next = current - 1;

case 37: // left arrow
clearTimer();
// feels like rotate should only be in charge of current/next
// and should update it to take direction parameter but
// this has least amount of impact
next = current - 1 < 0 ? slides.length -1 : current - 1;
rotate();

break;
break;
}

});
}


});
}


// add stop and start events
$(this).on('blueberry.stop', function(e) {
clearTimer();
clearHover();
});

$(this).on('blueberry.start', function(e) {
rotateTimer();
setHoverPause();
});

});
}
});
Expand Down