Here is my code:
var $cur = 0;
$(document).ready(function (e) {
$tot = document.getElementsByTagName("img").length;
changetile();
});
function changetile() {
if ($cur == $tot) {
$next = 1;
} else {
$next = $cur + 1;
}
$("#tile-" + $cur).fadeOut(1000);
$("#tile-" + $next).fadeIn(1000);
$cur = $next;
}
var myVar = setInterval(function () {
changetile()
}, 4500);
This code does not work in Chrome (it works the first time). What can I do to fix it?
$tot has local scope can not be accessible outside the block.
DOM ready($(document).ready(function(){) has a anonymous function so your$tot variable has local scope
Move all your code inside DOM Ready
var $cur = 0;
$(document).ready(function (e) {
$tot = document.getElementsByTagName("img").length;
function changetile() {
if ($cur == $tot) {
$next = 1;
} else {
$next = $cur + 1;
}
$("#tile-" + $cur).fadeOut(1000);
$("#tile-" + $next).fadeIn(1000);
$cur = $next;
}
var myVar = setInterval(function () {
changetile()
}, 4500);
changetile();
});
Read What is the scope of variables in JavaScript?
var $cur = 0;
$(document).ready(function (e) {
var myVar = setInterval(function () {
$tot = document.getElementsByTagName("img").length;
changetile()
}, 4500);
});
function changetile() {
if ($cur == $tot) {
$next = 1;
} else {
$next = $cur + 1;
}
$("#tile-" + $cur).fadeOut(1000);
$("#tile-" + $next).fadeIn(1000);
$cur = $next;
}
Change your code like this. It will work
Your Code is Works in my Browser( Chrome ) :
But for you its not , then you should try With this :
var $cur = 0,$tot;
$(document).ready(function (e) {
$tot = document.getElementsByTagName("img").length;
var myVar = setInterval(changetile,4500);
});
function changetile() {
if ($cur == $tot) {
$next = 1;
} else {
$next = $cur + 1;
}
$("#tile-" + $cur).fadeOut(1000);
$("#tile-" + $next).fadeIn(1000);
$cur = $next;
}
It isn't an issue with Chrome - it's an issue with your code. Here is the output I got:
First Iteration
Cur != tot! VM325:14
Cur = 0 $tot = 9 VM325:16
Next val is : 1 VM325:17
Second Iteration:
Cur != tot! VM325:14
Cur = 1 $tot = 9 VM325:16
Next val is : 2 VM325:17
Thrid:
Cur != tot! VM325:14
Cur = 2 $tot = 9 VM325:16
Next val is : 3 VM325:17
etc.
I got this by simply putting some console.log statements in there to see what's going on:
$(document).ready(function (e) {
$tot = document.getElementsByTagName("img").length;
changetile();
});
function changetile() {
if ($cur == $tot) {
$next = 1;
console.log(" Cur == tot! ");
} else {
$next = $cur + 1;
console.log(" Cur != tot! ");
}
console.log( "Cur = " + $cur + " $tot = " + $tot );
console.log( " Next val is : " + $next )
$cur = $next;
}
var myVar = setInterval(changetile, 4500);
Edit: #tushar-gupta gives ya the answer =] I just point you in the direction ( in case you just needed a pointer )
Related
I have 2 option in radio input
Tab screen to stop in 0.5 sec -> So I complete this solution.
Tab screen to stop immediately. I want it spin after I press the submit button and it stops after I tab the screen.
Here is my fiddle here: https://jsfiddle.net/7det89o6/3/
$("#submit-btn").click(function() {
var cond = valRadioFunc();
if (cond == 1) {
$('.reel-container:first').slotMachine('00' + 1).toString();
// one click
$(".bg-img").one("click", function() {
$('.reel-container:first').slotMachine(randGen());
});
} else if (cond == 2) {
$('.reel-container:first').slotMachine('00' + 1).toString();
}
});
}
<script type="text/javascript">
var reeling_time = 500;
var stop_spinning_time_difference = 350;
var start_spinning_time = 0;
var currency_symbol = "$";
var isInfinity = false;
$(document).ready(function() {
$(document).on('show.bs.modal', '.modal', function() {
function valRadioFunc() {
var valRadio = $('input[name=radio]:checked', '#form-select').val();
return valRadio;
}
$("#submit-btn").click(function() {
var cond = valRadioFunc();
if (cond == 1) {
$('.reel-container:first').slotMachine('00' + 1).toString();
// one click
$(".bg-img").one("click", function() {
isInfinity = false;
$('.reel-container:first').slotMachine(randGen());
});
} else if (cond == 2) {
$('.reel-container:first').slotMachine('00' + 1).toString();
isInfinity = true;
// one click
$(".bg-img").one("click", function() {
reeling_time = 0;
isInfinity = false;
$('.reel-container:first').slotMachine(randGen());
});
}
});
});
});
function randGen() {
var minRange = 1;
var maxRange = 999;
var randNum = (Math.floor(Math.random() * maxRange) + minRange).toString();
if (randNum.toString().length == 3) {
return randNum;
} else if (randNum.toString().length == 2) {
return "0" + randNum;
} else if (randNum.toString().length == 1) {
reeling_time = 0;
return "00" + randNum;
}
}
function collision($div1, $div2) {
var x1 = $div1.offset().left;
var w1 = 40;
var r1 = x1 + w1;
var x2 = $div2.offset().left;
var w2 = 40;
var r2 = x2 + w2;
if (r1 < x2 || x1 > r2) return false;
return true;
}
$.fn.slotMachine = function(my_number) {
var $parentSlot = this;
var hidden_reels_html = '';
var hidden_reels_array = [];
var numberFormat = function number_format(number) {
number = (number + '');
return number;
}
for (var $j = 0; $j <= 9; $j++) {
hidden_reels_array[$j] = "";
for (var $i = 0; $i <= 9; $i++) {
hidden_reels_array[$j] += '<div class="reel-symbol' + ($i == 0 ? ' reel-loop' : '') + '">' + (($j + $i) % 10) + '</div>';
}
}
var transformNumberToArrayPlusDollar = function(my_number) {
var my_scale = parseInt(my_number, 10) > 999 ? 0 : 2;
my_number = numberFormat(my_number, my_scale, ".", ",");
var my_number_array = my_number.split('');
// my_number_array.unshift(currency_symbol);
return my_number_array;
};
//Effect for the reel to go up and then down like it is pushed to spin
var effectBeforeSpin = function() {
$parentSlot.find('.main-reel-symbol').removeClass('reel-stop').addClass('reel-begin');
};
var slotMachine = function(my_number) {
var my_number_array = transformNumberToArrayPlusDollar(my_number);
var reels_html = '';
for (var $i = 0; $i < my_number_array.length; $i++) {
reels_html += '<div class="reel">' + hidden_reels_array[($i % 10)] + '</div>';
}
effectBeforeSpin();
var startSpinning = function() {
$parentSlot.html(reels_html);
var my_timer = reeling_time;
$.each(my_number_array, function(my_index, my_value) {
var next_value = /^[0-9]$/.test(my_value) ? (parseInt(my_value, 10) + 1) % 10 : "0";
var stopSpinning = function() {
$parentSlot.find('.reel:eq(' + my_index + ')')
.html("<div class='reel-symbol main-reel-symbol reel-stop'>" + my_value + "</div>")
.append("<div class='reel-symbol'>" + next_value + "</div>");
};
if(!isInfinity){
setTimeout(stopSpinning, my_timer);
}
my_timer += stop_spinning_time_difference;
});
};
setTimeout(startSpinning, start_spinning_time);
};
slotMachine(my_number);
return this;
};
$('.reel-container:first').slotMachine('00' + 1).toString();
</script>
I add one variable at top of JavaScript code.
I'm currently building a small slider in Javascript
which is working pretty well (almost) but I have an issue !
You will find here the codepen link :
Slider
Line 22, 32, 38
I have my two navigations supposed to add a class active (after remove) but I have a shift with my next/prev button and the other buttons below the slider. I can't find a solution and it's a pain :( !
Any idea ? Thank you !
Try to use this your changed code:
var currentSlide = 0;
var prevSlide = 0;
var slider = document.getElementById('slider').children[0];
var slides = document.getElementsByClassName('slider-item');
var links = document.getElementsByClassName('link');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var btnActive = document.getElementsByClassName('set-active');
for (var i = 0; i < slides.length; i++) {
slider.style.width = (slides[0].clientWidth * slides.length) + 'px';
links[i].innerHTML = i + 1;
links[i].addEventListener('click', function(e) {
e.preventDefault();
prevSlide = currentSlide;
currentSlide = this.getAttribute('data-href');
slider.style.left = '-' + (100 * currentSlide) + '%';
utils.addClass(links[currentSlide], 'active');
utils.removeClass(links[prevSlide], 'active');
});
}
function updateSlide() {
slider.style.left = '-' + (100 * currentSlide) + '%';
utils.addClass(links[currentSlide], 'active');
utils.removeClass(links[prevSlide], 'active');
}
prev.addEventListener('click', function() {
if(currentSlide == 0)
return
prevSlide = currentSlide;
currentSlide--;
updateSlide();
});
next.addEventListener('click', function() {
if(currentSlide == 10)
return
prevSlide = currentSlide;
currentSlide++;
updateSlide();
});
var utils = utils || (function() {
'use strict';
return {
hasClass: function(el, cl) {
var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
return !!el.className.match(regex);
},
addClass: function(el, cl) {
el.className += ' ' + cl;
},
removeClass: function(el, cl) {
var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
el.className = el.className.replace(regex, ' ');
},
toggleClass: function(el, cl) {
var testClass = this.hasClass(el, cl) ? this.removeClass(el, cl) : this.addClass(el, cl);
},
getNextElementSibling: function(el) {
if (el.nextElementSibling) {
return el.nextElementSibling;
} else {
do {
el = el.nextSibling;
}
while (el && el.nodeType !== 1);
return el;
}
},
elementInViewport: function(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
);
},
sameHeight: function(el) {
var maxHeight = 0;
for (var i = 0; i < el.length; i++) {
var thisHeight = el[i].offsetHeight;
if (thisHeight > maxHeight) {
maxHeight = thisHeight;
}
}
for (i = 0; i < el.length; i++) {
el[i].style.height = maxHeight + 'px';
}
}
};
})();
I'm trying to make a palindrome checker that changes the currently compared letters as it recurs.
Essentially, callback will do:
r aceca r
r a cec a r
ra c e c ar
rac e car
My JS Bin shows that the compared letters change green sometimes, but if you run it again, the letters won't change. Why is there a difference in results? It seems to sometimes run in Chrome, more often in FireFox, but it's all intermittent.
Code if needed (also available in JS Bin):
var myInterval = null;
var container = [];
var i, j;
var set = false;
var firstLetter, lastLetter;
$(document).ready(function(){
$("#textBox").focus();
$(document).click(function() {
$("#textBox").focus();
});
});
function pal (input) {
var str = input.replace(/\s/g, '');
var str2 = str.replace(/\W/g, '');
if (checkPal(str2, 0, str2.length-1)) {
$("#textBox").css({"color" : "green"});
$("#response").html(input + " is a palindrome");
$("#palindromeRun").html(input);
$("#palindromeRun").lettering();
if (set === false) {
callback(str2);
set = true;
}
}
else {
$("#textBox").css({"color" : "red"});
$("#response").html(input + " is not a palindrome");
}
if (input.length <= 0) {
$("#response").html("");
$("#textBox").css({"color" : "black"});
}
}
function checkPal (input, i, j) {
if (input.length <= 1) {
return false;
}
if (i === j || ((j-i) == 1 && input.charAt(i) === input.charAt(j))) {
return true;
}
else {
if (input.charAt(i).toLowerCase() === input.charAt(j).toLowerCase()) {
return checkPal(input, ++i, --j);
}
else {
return false;
}
}
}
function callback(input) {
$("#palindromeRun span").each(function (i, v) {
container.push(v);
});
i = 0;
j = container.length - 1;
myInterval = setInterval(function () {
if (i === j || ((j-i) === 1 && input.charAt(i) === input.charAt(j))) {
set = false;
window.clearInterval(myInterval);
container = [];
}
console.log(i + ' : ' + j);
$(container[i]).css({"color": "green"});
$(container[j]).css({"color": "green"});
i++;
j--;
}, 1000);
}
HTML:
<input type="text" id="textBox" onkeyup="pal(this.value);" value="" />
<div id="response"></div>
<hr>
<div id="palindromeRun"></div>
I directly pasted the jsLettering code in the JSBin, but here is the CDN if needed:
<script src="http://letteringjs.com/js/jquery.lettering-0.6.1.min.js"></script>
Change:
myInterval = setInterval(function () {
if (i === j) {
set = false;
window.clearInterval(myInterval);
container = [];
}
console.log(i + ' : ' + j);
to:
myInterval = setInterval(function () {
if (i >= j) {//Changed to prevent infinite minus
set = false;
window.clearInterval(myInterval);
container = [];
}
console.log(i + ' : ' + j);
demo
I have the following script and am trying to add mouse enter and leave events on a slideshow such that when the mouse is over the image it won't switch to the next one, and once removed it continues.
I can get the slide to stop when the mouse is over but once the mouse is out the slideshow won't proceed.
I am unsure if these 2 lines are in the right place:
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
jQuery(function () {
jQuery('a').focus(function () {
this.blur();
});
SI.Files.stylizeAll();
slider.init();
});
---> var MOUSE_IN = false;
var slider = {
num: -1,
cur: 0,
cr: [],
al: null,
at: 10 * 1000, /* change 1000 to control speed*/
ar: true,
anim:'slide',
fade_speed:600,
init: function () {
if (!slider.data || !slider.data.length) return false;
var d = slider.data;
slider.num = d.length;
var pos = Math.floor(Math.random() * 1);
for (var i = 0; i < slider.num; i++) {
if(slider.anim == 'fade')
{
jQuery('#' + d[i].id).hide();
}
else{
jQuery('#' + d[i].id).css({
left: ((i - pos) * 1000)
});
}
jQuery('#slide-nav').append('<a id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
}
jQuery('img,div#slide-controls', jQuery('div#slide-holder')).fadeIn();
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
slider.text(d[pos]);
slider.on(pos);
if(slider.anim == 'fade')
{
slider.cur = -1;
slider.slide(0);
}
else{
slider.cur = pos;
window.setTimeout('slider.auto();', slider.at);
}
},
auto: function () {
if (!slider.ar) return false;
if(MOUSE_IN) return false;
var next = slider.cur + 1;
if (next >= slider.num) next = 0;
slider.slide(next);
},
slide: function (pos) {
if (pos < 0 || pos >= slider.num || pos == slider.cur) return;
window.clearTimeout(slider.al);
slider.al = window.setTimeout('slider.auto();', slider.at);
var d = slider.data;
if(slider.anim == 'fade')
{
for (var i = 0; i < slider.num; i++) {
if(i == slider.cur || i == pos) continue;
jQuery('#' + d[i].id).hide();
}
if(slider.cur != -1){
jQuery('#' + d[slider.cur].id).stop(false,true);
jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed);
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
else
{
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
}
else
{
for (var i = 0; i < slider.num; i++)
jQuery('#' + d[i].id).stop().animate({
left: ((i - pos) * 1000)
},
1000, 'swing');
}
slider.on(pos);
slider.text(d[pos]);
slider.cur = pos;
},
on: function (pos) {
jQuery('#slide-nav a').removeClass('on');
jQuery('#slide-nav a#slide-link-' + pos).addClass('on');
},
text: function (di) {
slider.cr['a'] = di.client;
slider.cr['b'] = di.desc;
slider.ticker('#slide-client span', di.client, 0, 'a');
slider.ticker('#slide-desc', di.desc, 0, 'b');
},
ticker: function (el, text, pos, unique) {
if (slider.cr[unique] != text) return false;
ctext = text.substring(0, pos) + (pos % 2 ? '-' : '_');
jQuery(el).html(ctext);
if (pos == text.length) jQuery(el).html(text);
else window.setTimeout('slider.ticker("' + el + '","' + text + '",' + (pos + 1) + ',"' + unique + '");', 30);
}
};
if (!window.SI) {
var SI = {};
};
SI.Files = {
htmlClass: 'SI-FILES-STYLIZED',
fileClass: 'file',
wrapClass: 'cabinet',
fini: false,
able: false,
init: function () {
this.fini = true;
var ie = 0
if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) {
return;
}
this.able = true;
var html = document.getElementsByTagName('html')[0];
html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
},
stylize: function (elem) {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
elem.parentNode.file = elem;
elem.parentNode.onmousemove = function (e) {
if (typeof e == 'undefined') e = window.event;
if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement) {
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
};
var ox = oy = 0;
var elem = this;
if (elem.offsetParent) {
ox = elem.offsetLeft;
oy = elem.offsetTop;
while (elem = elem.offsetParent) {
ox += elem.offsetLeft;
oy += elem.offsetTop;
};
};
var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;
this.file.style.top = y - (h / 2) + 'px';
this.file.style.left = x - (w - 30) + 'px';
};
},
stylizeById: function (id) {
this.stylize(document.getElementById(id));
},
stylizeAll: function () {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1) this.stylize(input);
};
}
};
(function (jQuery) {
jQuery.fn.pngFix = function (settings) {
settings = jQuery.extend({
blankgif: 'blank.gif'
},
settings);
var ie55 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 5.5') != -1);
var ie6 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 6.0') != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
jQuery(this).each(function () {
var bgIMG = jQuery(this).css('background-image');
if (bgIMG.indexOf(".png") != -1) {
var iebg = bgIMG.split('url("')[1].split('")')[0];
jQuery(this).css('background-image', 'none');
jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='" + settings.sizingMethod + "')";
}
});
}
return jQuery;
};
})(jQuery);
jQuery(function () {
if (jQuery.browser.msie && jQuery.browser.version < 7) {
}
});
The position of both lines is fine, they just add an event handler to the mouse in/out event. The problem you experience is actually in tha auto function, if you note, at the end of the init function you have:
window.setTimeout('slider.auto();', slider.at)
This line makes a call to the auto function after a slider.at time (which is 10 seconds in your example), the auto function checks if MOUSE_IN is set to true, if it's not, then calls the slide function, then in the slide function you have another call to the auto function:
slider.al = window.setTimeout('slider.auto();', slider.at);
But once you set the MOUSE_IN variable to true the auto function simply returns and it stop the execution of further slide functions, to solve this, you may want to either handle the MOUSE_IN logic in the slide function, or before returning false in the auto function, call with a time out the auto function again.
Thought this would work but it doesnt, the mouseleave eventdoesnt seem to fire.
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
while(MOUSE_IN==true)
{
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
}
I have a jQuery Mobile carousel in my application, I need to populate data in a drop-down as soon as the carousel is flipped, this is done. Now the new implementation is that as soon as the user pauses on the carousel for >= 3 seconds then only the drop-down should be updated. So how am I suppose to capture this pause time? I am using iscroll.js
Interesting parts on the code is:
var myScroll;
var old_page=0;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function(){
var currPage = myScroll.currPageX+1;
var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML);
var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML);
if(currPage <= lastPage && currPage >= firstPage){
if(old_page < currPage){
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
document.getElementById("prev").style.visibility="visible";
}
else if(old_page > currPage){
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
document.getElementById("next").style.visibility="visible";
}
old_page = currPage;
if(old_page == lastPage ){
document.getElementById("next").style.visibility="hidden";
}
else if(old_page == firstPage ){
document.getElementById("prev").style.visibility="hidden";
}
}
else{
myScroll.scrollToPage(lastPage-1,0);
}
}
});
}
function gotoNextPage(){
if(document.getElementById("prev").style.visibility == "hidden"){
document.getElementById("prev").style.visibility="visible";
}
var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML);
var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML);
if( currPage == (lastPage-1) ){
document.getElementById("next").style.visibility="hidden";
}
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (currPage+1) + ')').className = 'active';
myScroll.scrollToPage('next', 750);
}
function gotoPrevPage(){
if(document.getElementById("next").style.visibility == "hidden"){
document.getElementById("next").style.visibility="visible";
}
var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML);
var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML);
if( (currPage-1) == firstPage ){
document.getElementById("prev").style.visibility="hidden";
}
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (currPage-1) + ')').className = 'active';
myScroll.scrollToPage('prev', 750);
}
document.addEventListener('DOMContentLoaded', loaded, false);
Tidying up and adding the additional functionality I get this :
function loaded() {
var $$ = document.querySelector;
var firstPage = parseInt($$('#indicator > li:first-child').innerHTML, 10);
var lastPage = parseInt($$('#indicator > li:last-child').innerHTML, 10);
var myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function() {
var currPage = myScroll.currPageX + 1;
if(currPage <= lastPage && currPage >= firstPage) {
$$('#indicator > li.active').className = '';
$$('#indicator > li:nth-child(' + currPage + ')').className = 'active';
document.getElementById("prev").style.visibility = (currPage == firstPage) ? "hidden" : "visible";
document.getElementById("next").style.visibility = (currPage == lastPage) ? "hidden" : "visible";
}
else {
myScroll.scrollToPage(lastPage-1,0);
}
}
});
var hoverTimeout;
var wrapper = document.getElementById('wrapper');
var items = wrapper.getElementsByTagName("???");
for(var i=0; i<items.length; i++) {
var item = items[i];
item.onmouseover = function() {
var that = this;
hoverTimeout = setTimeout(function() {
updateDropdown(that);//adjust this statement to call existing function
}, 3000);
};
item.onmouseout = function() {
clearTimeout(hoverTimeout);
};
}
}
To get it working, you will need to :
in the var items = ... statement, change ??? to the tag name of the scrolled elements within the wrapper (eg 'img').
in the setTimeout(...) statement, call some existing function that update the drop-down.
EDIT
In jQuery it will be something like this :
$(function() {
var $wrapper = $('#wrapper'),
$indicatorElements = $('#indicator li'),
$prev = $("#prev"),
$next = $("#next"),
hoverTimeout;
var myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function() {
var currPage = this.currPageX;
if(currPage <= ($indicatorElements.length-1) && currPage >= 0) {
$indicatorElements.removeClass('active').eq(currPage).addClass('active');
$prev.css('visibility', (currPage == 0) ? "hidden" : "visible");
$next.css('visibility', (currPage == ($indicatorElements.length-1)) ? "hidden" : "visible");
}
else {
this.scrollToPage($indicatorElements.length-1, 0);
}
}
});
$wrapper.find("img").each(function(i, item) {
$(item).hover(function() {
hoverTimeout = setTimeout(function() {
updateDropdown(item);//adjust this statement to call existing function
}, 3000);
}, function() {
clearTimeout(hoverTimeout);
};
});
});
Both version are untested and probably need debugging.