guys.
So i've got this code that runs a loop on slides/tabs and they have a sort of dropdown interaction to show and hide text based on the current/active slide/tab.
What I want to add is a function where, if a user hovers over one of the tabs(.loop-tab-link) that the clearTimout pauses until the user hovers out of the div.
As you can see I tried adding a mouseover function but that only adds an additional 5 seconds to the Timeout.
clearTimeout(tabTimeout);
tabLoop();
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.loop-tabs-menu').children('.current:first').next();
if($next.length) {
$next.click();
} else {
$('.loop-tab-link:first').click();
}
}, 5000);
}
$('.loop-tab-link').on('mouseenter', function() {
clearTimeout(tabTimeout);
tabLoop();
});
$('.loop-tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
Looks like you need exactly what you asked for
clearTimeout(tabTimeout);
tabLoop(5000);
function tabLoop(x) {
tabTimeout = setTimeout(function() {
var $next = $('.loop-tabs-menu').children('.current:first').next();
if($next.length) {
$next.click();
} else {
$('.loop-tab-link:first').click();
}
}, x);
}
$('.loop-tab-link').mouseenter(function() {
clearTimeout(tabTimeout);
});
$('.loop-tab-link').mouseleave(function(){
tabLoop(1000);
});
Related
This is my JS code so far. Right now I can click on each button on the slider and it will change to the corresponding slide.
$('.slide-nav').on('click', function(e) {
e.preventDefault();
// get current slide
var current = $('.flex--active').data('slide'),
// get button data-slide
next = $(this).data('slide');
console.log(current);
$('.slide-nav').removeClass('active');
$(this).addClass('active');
if (current === next) {
return false;
} else {
$('.slider__wrapper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');
$('.flex--active').addClass('animate--end');
setTimeout(function() {
$('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');
$('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');
}, 900);
}
});
the slider I am working with looks like this one to see the html/css
https://codepen.io/mikun/pen/YWgqEX
So in addition to clicking to change slides I would like to scroll to change slides
You can simulate the click function this way:
setInterval(function () {
$(".slide-nav.active").next().click();
}, 1000);
You need to check if this is the last and try this:
setInterval(function () {
if ($(".slide-nav.active").next().length > 0)
$(".slide-nav.active").next().click();
else
$(".slide-nav").first().click();
}, 1000);
Demo: https://codepen.io/anon/pen/ZwBVzo
I created this little function that loops through images when you go mouse over:
function THUMB_ROLL(NEXT)
{
LENGTH = ALL_IMAGES.length;
if(!LENGTH) { return false; }
if(!NEXT || NEXT === LENGTH) { NEXT = 0 }
$('#IMAGE_THUMB').css('background-image','url(/<?php echo $ITEM_CODE;?>/'+ALL_IMAGES[NEXT]+')');
setTimeout(function()
{
THUMB_ROLL(NEXT+2)
},800);
}
</script>
I have, onmouseover="THUMB_ROLL();"
But, I cannot seem to find a solution to stop the loop once onmouseout. Any help appreciated!
EDIT
<script>
var timer;
function THUMB_ROLL(NEXT)
{
LENGTH = ALL_IMAGES.length;
if(!LENGTH) { return false; }
if(!NEXT || NEXT === LENGTH) { NEXT = 0 }
$('#IMAGE_THUMB').css('background-image','url(/<?php echo $ITEM_CODE;?>/'+ALL_IMAGES[NEXT]+')');
timer = setTimeout(function()
{
THUMB_ROLL(NEXT+1)
},800);
}
$(document).on('mouseover','#IMAGE_THUMB',function()
{
THUMB_ROLL();
});
$(document).on('mouseout','#IMAGE_THUMB',function()
{
clearTimeout(timer);
});
</script>
Assign your timeout to a variable which store the timerID.
Then have the moueout clear the timeout, which should stop the flow.
var timer;
// mouseover event..
timer = setTimeout(function() {
THUMB_ROLL(NEXT+2)
},800);
// mouseout event
clearTimeout(timer);
Also it is a better idea to separate your concerns and attach the events inside the script tags instead of attaching them inline.
In context to the previous question:-
Keep a second div visible if the mouse is over the first or second div
How one would make it so the second div is displayed after some delay (that's 1 second) and then keep the div visible if the mouse is over the first or second div.
I've made some progress, but it's not working. Why is it not working?
Current progress :-
var display = false;
$(".the-dropdown, .menu-item").hover(function () {
display = true;
setTimeout(function () {
show_sub_menu($(this));
}, 1000);
}, function () {
display = false;
setTimeout(function () {
hide_sub_menu($(this));
}, 1000);
});
function show_sub_menu(obj) {
//alert(obj); // debugging
if (display === true) {
obj.show();
}
}
function hide_sub_menu(obj) {
if (display === false) {
obj.hide();
}
}
jsfiddle
For those who are seeking answer to this question:-
jsfiddle
var display = false;
$(".the-dropdown, .menu-item").hover(function () {
display = true;
setTimeout(function () {
if (display === true) {
$('.the-dropdown').show();
}
}, 300);
}, function () {
display = false;
setTimeout(function () {
if (display === false) {
$('.the-dropdown').hide();
}
}, 100);
});
TRY This : DEMO
$('.menu-item , .the-dropdown').hover(
function(){
$("div.the-dropdown").delay('1000').show();
}
, function(){
$("div.the-dropdown").delay('1000').hide();
}
);
The idea is simple: I have buttons which refer to another website. Whenever the user has clicked more than two links I want to refresh some content (through Ajax). For that to work I need to detect if my window is active or not, since I only want the event to start when the user is BACK on my page.
Without further ado this is my code:
$(document).on("click", "a", function() {
numberOfClicks += 1;
if (numberOfClicks >= 2)
{
userOnWebsiteOrNot();
numberOfClicks = 0;
}
});
function userOnWebsiteOrNot()
{
if (focusedOrNot == 0)
{
$('#resultaat').hide().fadeIn(5000);
}
}
window.addEventListener('focus', function() {
document.title = 'focused';
focusedOrNot = 0;
});
window.addEventListener('blur', function() {
document.title = 'not focused';
focusedOrNot = 1;
});
It DOES detect whenever the user is on the page or not, but somehow the fade always happens.
Could anybody explain me what I'm doing wrong or give me any ideas?
Thanks
Yenthe
ANSWER:
I needed a setTimeOut on three functions because they would otherwise check too fast. Thank you for that help Romo! ;) All credit goes to Romo to be honest.
$(document).on("click", "a", function() {
numberOfClicks += 1;
if (numberOfClicks >= 2)
{
haallinks();
setTimeout(function() {
userOnWebsiteOrNot();
}, 2000);
numberOfClicks = 0;
}
});
function userOnWebsiteOrNot()
{
if (focusedOrNot === 0)
{
$('#resultaat').hide().fadeIn(5000);
}
else
{
controlerenActiefOfNiet();
}
}
function controlerenActiefOfNiet()
{
setTimeout(function() {
userOnWebsiteOrNot();
}, 2000);
}
window.addEventListener('focus', function() {
setTimeout(function() {
focusedOrNot = 0;
}, 0);
});
window.addEventListener('blur', function() {
setTimeout(function() {
focusedOrNot = 1;
}, 1000);
});
I think the problem is that when you click a link the second time the window will always be focused. JS runs pretty fast. To overcome this, I think you should do a setTimeout() and delay it 200ms or so to give the window time to "lose" focus
setTimeout(function() {userOnWebsiteOrNot(); },2000);
http://jsfiddle.net/xVHgE/
Edit: Adding delay to event listener. I don't think you can "delay" an event though, just the function it runs.
window.addEventListener('focus', function() {
setTimeout( function() {
$('#test').html('focus');
focusedOrNot = 0;
} , 5000);
});
Based on this script I found on Stack Overflow, I tried adapting it to fade out an editor panel on a HTML page. Fading out works fine, but I'd like limit the fade-out from being triggered.
What I hope to accomplish is to prevent the fade-out whenever the mouse is over the editor panel (and child controls) or when there's keyboard activity in one of the input children.
var i = null;
// this part is working
$("#my-canvas").mousemove(function() {
clearTimeout(i);
$("#panel,#btn-panel-toggle,#fps").fadeIn(200);
var i = setTimeout('$("#panel,#btn-panel-toggle,#fps").fadeOut(800);', 3000);
})
// this part is not working
$("#panel").mouseover(function() {
clearTimeout(i);
})
For a live example, please check out this jsFiddle.
Two independent variables are needed here to indicate, whether the input#sc-url is focused and div#panel is hovered by mouse or not. Then you can handle the timer with these functions:
$(function () {
var t = null; //timer
var is_url_focused = false, is_panel_hovered = false;
var panel = $('#panel');
function hide_panel(){
if (t) {
clearTimeout(t);
}
t = setTimeout(function(){
if (is_url_focused || is_panel_hovered) {
return;
}
panel.stop().animate({
opacity:0
},800, function(){
panel.hide(); // == diplay:none
});
},2000);
}
function show_panel(){
panel.show().stop().animate({
opacity:1
},800);
}
$('#my-canvas').mouseenter(function(){
show_panel();
}).mouseleave(function(){
hide_panel();
});
$('#panel').hover(function(){
is_panel_hovered = true;
show_panel();
}, function(){
is_panel_hovered = false;
hide_panel();
});
$('#sc-url').focus(function(){
is_url_focused = true;
show_panel();
}).blur(function(){
is_url_focused = false;
hide_panel();
});
$('#btn-panel-toggle').click(function(){
if (panel.is(':hidden')) {
panel.css('opacity',1).show();
} else {
panel.css('opacity',0).hide();
}
});
});
http://jsfiddle.net/w9dv4/3/