This is my code:
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
setInterval(function(){ ticker(); }, 3000);
});
I don't know how to stop the text scrolling when I place the mouse over a particular title.SEE HERE MY CODE
Please Try This one:
$(document).ready(function () {
function ticker() {
$('#ticker li:first').slideUp(function () {
$(this).appendTo($('#ticker')).slideDown();
});
}
var clr = null;
function animate(){
clr=setInterval(function () {
ticker();
}, 3000);
}
animate();
$('#ticker li').hover(function () {
// clear interval when mouse enters
clearInterval(clr);
},function(){
// again start animation when mouse leaves
animate();
});
});
DEMO
You can add the a new variable that will save the value for mouse entered
see your updated code
$(document).ready(function() {
var entered = false;
$('#ticker').mouseover(function(){
entered = true;
})
$('#ticker').mouseout(function(){
entered = false;
})
function ticker() {
if(!entered){
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
}
setInterval(function(){ ticker(); }, 3000);
});
$(document).ready(function() {
var j= setInterval(function(){ ticker(); }, 3000);
var i=1;
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
i++;
if(i==4){
alert("ok");
clearInterval(j) ;
}
});
}
});
you can set the limit of i and stop the script by using clearInterval() function.
Related
I've got problem with my code. What I'm trying to achive:
Create loop in which div #news-main-page-wrap is fading in and fading out when user is not moving mouse/scroll page etc.
When user starts to move script have to break no matter if #news-main-page-wrap is visible or not.
I've managed to create this loop of fading in and fading out however I wasn't able to make it to break it.
We were trying to make it happen by .bind with user ControlAltDel however it doesnt work properly.
My current code is:
jQuery(document).ready(function( $ ){
idleTimer = null;
idleState = false;
idleWait = 20000;
(function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$('#news-main-page').removeClass('d-none');
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();
$("#news-main-page-wrap").delay(20000).fadeOut(500);
$("#news-main-page-wrap").delay(20000).fadeIn();
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
$("body").mousemove(function() {
$("#news-main-page").stop();
});
});
}) (jQuery)
});
We were trying to make it work with this code:
jQuery(document).ready(function( $ ){
idleTimer = null;
idleState = false;
idleWait = 1000;
(function ($) {
$(document).ready(function () {
var myFunc =
function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$('#news-main-page').removeClass('d-none');
$("#news-main-page").delay(1500).fadeOut();
$("#news-main-page").delay(1500).fadeIn();
$("#news-main-page").delay(1500).fadeOut();
$("#news-main-page").delay(1500).fadeIn();
$("#news-main-page").delay(1500).fadeOut();
idleState = true; }, idleWait);
};
$("body").mousemove(function() {
$('*').unbind('mousemove keydown scroll',myFunc);
$("#news-main-page").stop();
});
$('*').bind('mousemove keydown scroll',myFunc);
});
}) (jQuery)
});
Here's JS Fiddle:
https://jsfiddle.net/2Lrxehz8/
If anyone could help me I would be grateful. :)
I guess you need something like this:
jQuery(document).ready(function( $ ){
let idleTimer = null,
loopTimer = null,
idleWait = 1000;
(function ($) {
$(document).ready(function () {
//Cache the query
let $animatedElement = $('#news-main-page');
let animateElements = function(){
$animatedElement.delay(1500).fadeOut();
$animatedElement.delay(1500).fadeIn();
};
let myFunc = function () {
clearInterval(loopTimer);
clearTimeout(idleTimer);
$animatedElement.stop(true);
idleTimer = setTimeout(function () {
//Idle Event
//Loop the animation
loopTimer = setInterval(function(){
animateElements();
}, 3000);
//Call animate elements once to prevent additional delay
//from setInterval call
animateElements();
}, idleWait);
};
$('*').bind('mousemove keydown scroll',myFunc);
//Start the idle loop
myFunc();
});
}) (jQuery)
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="news-main-page">
<p>Hello World</p>
<button>Change color</button>
</div>
Edit:
To stop the animation loop permanently you can move the stop code out of the idle handler function, also unbind the 'mousemove keydown scroll' events so they no longer trigger:
jQuery(document).ready(function( $ ){
let idleTimer = null,
loopTimer = null,
idleWait = 1000;
(function ($) {
$(document).ready(function () {
//Cache the query
let $animatedElement = $('#news-main-page'),
$allElements = $('*');
let animateElements = function(){
$animatedElement.delay(1500).fadeOut();
$animatedElement.delay(1500).fadeIn();
};
let stopAnimationLoop = function() {
clearInterval(loopTimer);
clearTimeout(idleTimer);
$animatedElement.stop(true);
};
let handleUserAction = function() {
$allElements.unbind('mousemove keydown scroll', handleUserAction);
stopAnimationLoop();
};
let myFunc = function () {
idleTimer = setTimeout(function () {
//Idle Event
//Loop the animation
loopTimer = setInterval(function(){
animateElements();
}, 3000);
//Call animate elements once to prevent additional delay
//from setInterval call
animateElements();
}, idleWait);
};
$allElements.bind('mousemove keydown scroll', handleUserAction);
//Start the idle loop
myFunc();
});
}) (jQuery)
});
You can try it here
js and I want to pause the slider when mouse hover the h1 tag but it doesn't, I know that it's a problem with javascript but I'm not able to make it works
http://jsfiddle.net/2dhkR/405/
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 3000);
}
});
// the function - set var up just in case
// the timer isn't running yet
var timer = null;
function startSetInterval() {
timer = setInterval(showDiv, 5000);
}
// start function on page load
startSetInterval();
// hover behaviour
function showDiv() {
$('#fullpage h1').hover(function() {
clearInterval(timer);
}, function() {
startSetInterval();
});
}
});
Any help would be appreciated, Thanks
http://jsfiddle.net/2dhkR/407/
var interval = undefined;
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
}
});
$('#fullpage h1').mouseover(function() {
clearInterval(interval);
interval = null;
})
$('#fullpage h1').mouseout(function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
});
}); // end document ready
Very simple way (maybe not the clearest) with a bool:
var go = true;
if (go)$.fn.fullpage.moveSlideRight();
$('#fullpage h1').hover(function() {
go = false;
clearInterval(timer);
}, function() {
go = true;
startSetInterval();
});
Try to use jQuery's hover() on mouseenter, then start the slider again on mouseleave.
$(function() {
var interval = setInterval( slideSwitch, 10000 );
$('#slideshow').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval( slideSwitch, 10000 );
});
});
My Html Code
<a id="blink">123qwe</a>
My java-script code
var stopBlinking = false;
setTimeout(function()
{
stopBlinking = true;
}, 10000);
function blink(selector) {
$(selector).fadeOut('slow', function() {
$(this).fadeIn('slow', function() {
if (!stopBlinking)
{
blink(this);
}
else
{
setInterval(function()
{
stopBlinking = true;
}, 10000);
}
});
});
}
blink("#blink");
This code is not blink after 10 seconds. what's the problem in this code?
please help me.
thanks in advance.
Try this:
var interval = 10000;
var stopBlinking = false;
function blink(selector) {
if(stopBlinking)
return false;
$(selector).fadeOut('slow', function() {
$(this).fadeIn('slow', function() {
blink(this);
});
});
}
blink("#blink");
setInterval(function(){
stopBlinking = !stopBlinking;
blink("#blink");
}, interval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="blink">123qwe</a>
var stopBlinking = false;
setTimeout(function() {
stopBlinking = true;
}, 10000);
function blink(selector) {
$(selector).fadeOut('slow', function() {
$(this).fadeIn('slow', function() {
if (!stopBlinking) {
blink(this);
} else {
stopBlinking = false;
setTimeout(function() {
blink(selector)
setTimeout(function() {
stopBlinking = true;
}, 10000);
}, 10000);
}
});
});
}
blink("#blink");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="blink">Blinking Message</a>
Line_Baslat();
setInterval(function(){ moveLeft(); Line_Baslat(); },4000);
function Line_Tekrar () {
$("#dv_line").animate({width:"0%"},0);
};
function Line_Baslat () {
$("#dv_line").animate({width:"100%"},4000);
};
function refseh () {
setInterval(update,4000);
};
$("#prev").click(function(){
moveLeft();
refresh();
});
$("#next").click(function(){
moveRight();
refresh();
});
setInterval function returns ID of that interval, which you can use to cancel it. For example in your case
Line_Baslat();
var timeout;
function refresh () {
if (timeout) {
clearInterval(timeout);
}
timeout = setInterval(function(){ moveLeft(); Line_Baslat(); },4000);
};
function Line_Tekrar () {
$("#dv_line").animate({width:"0%"},0);
};
function Line_Baslat () {
$("#dv_line").animate({width:"100%"},4000);
};
$("#prev").click(function(){
moveLeft();
refresh();
});
$("#next").click(function(){
moveRight();
refresh();
});
Try storing your setInterval body in another function, like this:
//doStuff variables.
var a = 0;
function doStuff(){
//interval body
}
var interval;
interval = setInterval(function(){
doStuff(); //Call Interval Body
},timeout);
clearInterval(interval); //clear interval
//reset interval to call body function
interval = setInterval(function(){
doStuff(); //Call Interval Body
},timeout);
This allows you to restart/reset the interval.
I am having problems with onmouseout/over delay in my menus. I found by changing the setTimeout numbers from 100 to say 2000 it delays the top level menu from hide but not sub level menu and on new onmouseover they still hide, here's what I'm trying to accomplish:
On onmouseout of either primary menu or primary and secondary menu, delay hide for 2-3 seconds BUT ALSO if user returns with onmouseover either element it will cancel the delay and keep showing them.
Most help I find online is just for hide delay but not cancelling it on new onmouseover.
Here is my code:
http://jsfiddle.net/MQ2cg/4/
jQuery.fn.hoverWithDelay = function (inCallback, outCallback, delay) {
this.each(function (i, el) {
var timer;
$(this).hover(function () {
timer = setTimeout(function () {
timer = null;
inCallback.call(el);
}, delay);
}, function () {
if (timer) {
clearTimeout(timer);
timer = null;
} else outCallback.call(el);
});
});
};
$(document).ready(function () {
var hovering = {
mainMenu: false,
categories: false
};
function closeSubMenus() {
$('ul.sub-level').css('display', 'none');
}
closeSubMenus();
function closeMenuIfOut() {
setTimeout(function () {
if (!hovering.mainMenu && !hovering.categories) {
$('#navigation').fadeOut('fast', closeSubMenus);
}
}, 100);
}
$('ul.top-level li').hover(function () {
$(this).find('ul').show();
}, function () {
$(this).find('ul').hide();
closeMenuIfOut();
}, 100);
$('#categories').hoverWithDelay(function () {
$('#navigation').show();
hovering.categories = true;
},
function () {
hovering.categories = false;
closeMenuIfOut();
}, 175);
$('#navigation').hover(function () {
hovering.mainMenu = true;
}, function () {
hovering.mainMenu = false;
});
$('#categories').click(function () {
window.location.href = $('a', this).attr('href');
});
});
Thanks for help.
this questions seem to be similar:
JS for mouseover image upload button (like Facebook)
as Amin Eshaq pointed out use mouseenter / mouseleave
here is working code:
$(this).bind({
'mouseenter' : function () {
timer = setTimeout(function () {
timer = null;
inCallback.call(el);
}, delay);
},
'mouseleave' : function () {
if (timer) {
clearTimeout(timer);
timer = null;
} else outCallback.call(el);
}
});