I've got an effect I want triggered one second after page load, then subsequently every 3 seconds (on repeat). When the user hovers over an element (#hover), the effect pauses (temporarily). When they stop hovering over it, the effect resumes after 2 seconds.
I'm having a lot of trouble with overlapping sounds and animations, particularly when I hover and then unhover over the element quickly. What's wrong with my code? (Fiddle)
var test;
function hoverTest(arg) {
if (arg == 'stop') {
clearTimeout(test);
}
if (arg == 'start') {
playSound();
$('#hover').transition({
opacity: 0,
duration: 1000,
complete: function() {
$('#hover').transition({
opacity: 1,
duration: 1000,
complete: function() {
test = setTimeout(function() { hoverTest('start'); }, 3000);
}
});
}
});
}
}
$('#hover').hover(function() {
hoverTest('stop');
}, function() {
setTimeout(function() {
hoverTest('start');
}, 2000);
});
function playSound() {
var sound = new Audio('sound.mp3');
sound.play();
}
setTimeout(function() {
hoverTest('start');
}, 1000);
copy paste this in a file and run that html file.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#hover {
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="hover"></div>
<script type="text/javascript">
var interval = null;
var hoverTest = function(method){
playSound();
$("#hover").fadeOut(1000, function() {
$(this).fadeIn(1000);
});
}
var playSound =function() {
var sound = new Audio('http://www.sounddogs.com/previews/25/mp3/306470_SOUNDDOGS__an.mp3');
sound.play();
}
$(document).ready(function(){
interval = setInterval('hoverTest()',3000);
$("#hover").mouseenter(function(){
clearInterval(interval);
}).mouseleave(function(){
interval = setInterval('hoverTest()',3000);
})
})
</script>
Try adding "clearTimeout(test);" the first thing in the hoverTest function.
eg:
var test;
function hoverTest(arg) {
clearTimeout(test);
if (arg == 'stop') {
clearTimeout(test);
}
if (arg == 'start') {
playSound();
$('#hover').transition({
opacity: 0,
duration: 1000,
complete: function() {
$('#hover').transition({
opacity: 1,
duration: 1000,
complete: function() {
test = setTimeout(function() { hoverTest('start'); }, 3000);
}
});
}
});
}
}
Try this: (clear the timer before starting)
$('#hover').hover(function() {
hoverTest('stop');
}, function() {
clearTimeout(test);
setTimeout(function() {
hoverTest('start');
}, 2000);
});
Related
Got a problem with my function I have no idea how to make it work. Without if it works but spams in console. This function check if a multiple div class('open button') exist and do the code
(function() {
function openbutton() {
var button = setInterval(function() {
if (getEBCN('open button').length > 0) {
setTimeout(function() {
document.getElementsByClassName("open button")[0].click();
}, 1000);
setTimeout(function() {
document.getElementsByClassName("button 2")[0].click();
}, 1500);
setTimeout(function() {
document.getElementsByClassName("button close")[0].click();
}, 18000);
}
else {
clearInterval(button);
}
}, 16000);
}
})();
simply do
const existFlag = document.getElementsByClassName('someClassName').length > 0;
setInterval(function(){
const existFlag = document.getElementsByClassName('sampleClass').length > 0;
console.log(existFlag)
}, 3000);
getEBCN is not a method in JavaScript (unless you have defined it). You need to change
getEBCN('open button').length > 0
to
document.getElementsByClassName('open button').length > 0
Well that works #user3003238. This do rly what i wanted.
(function() {
setInterval(function(){
const existFlag = document.getElementsByClassName('open button').length > 0;
console.log(existFlag);
if (existFlag == true)
{
setTimeout(function() {document.getElementsByClassName("open button")[0].click();}, 1000);
setTimeout(function() {document.getElementsByClassName("button 2")[0].click();}, 1500);
setTimeout(function() {document.getElementsByClassName("button close")[0].click();}, 18000);
}
else
{
clearInterval();
}
}, 20000);
})();
Hi im just having some issues,
Im trying to make this text blink with just one button click
So Click ON
And also Click Acts as OFF ( If clicks value is set to on which is 1 )
Im pretty new to JS any help would be appreciated
var Blinker = {
interval: null,
start: function() {
if (this.interval) return;
this.interval = setInterval(function() {
$('#demo').toggle();
}, 250);
},
stop: function() {
clearInterval(this.interval);
$('#demo').show();
this.interval = null;
}
}
//Initialize blink status.
var blinkStatus = 1;
//Check if status is changed, and run/stop blinking.
setInterval(function() {
if (blinkStatus == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
}, 250);
$('#start').on('click', function() {
blinkStatus = 1;
});
$('#stop').on('click', function() {
blinkStatus = 0;
});
<h1 id="demo">PAUSE</h1>
<button id="start">Start</button>
<button id="stop">Stop</button>
Try this code. This toggles blinking with a single button.
HTML:
<div class="text-container">
<h1 id="demo">PAUSE</h1>
</div>
<button id="toggle-button">Start</button>
CSS:
.hide {
display: none;
}
.text-container {
height: 17px;
}
JS:
var Blinker = {
interval: null,
start: function() {
if (this.interval) return;
this.interval = setInterval(function() {
$('#demo').toggleClass('hide');
}, 250);
},
stop: function() {
clearInterval(this.interval);
$('#demo').removeClass('hide');
this.interval = null;
}
}
//Initialize blink status.
var blinkStatus = 0;
//Check if status is changed, and run/stop blinking.
setInterval(function() {
if (blinkStatus == 1) {
$('#toggle-button').text('Stop');
Blinker.start();
}
else {
$('#toggle-button').text('Start');
Blinker.stop();
}
}, 250);
$('#toggle-button').on('click', function() {
if (blinkStatus) {
blinkStatus = 0;
} else {
blinkStatus = 1;
}
});
I've edited your code slightly, basing on your request on the comment.
//Initialize blink status.
var blinkStatus = false;
//Check if status is changed, and run/stop blinking.
var blinker, visibility;
$('#button').on('click', function() {
blinkStatus = !blinkStatus;
if(blinkStatus){
blinker = setInterval(function() {
visibility = $("#demo").css('visibility');
if(visibility == 'hidden'){
$("#demo").css('visibility', 'visible');
}else{
$("#demo").css('visibility', 'hidden');
}
}, 500);
$("#button").text('Stop');
}else{
clearInterval(blinker);
$("#button").text('Start');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="demo">PAUSE</h1>
<button id="button">Start</button>
I want to stop a function being fired again for 5 seconds after the last.
This is what I had:
return {
buildUI: function() {
el.nav.on({
mouseenter: function() {
el.logo.addClass('spin');
},
mouseleave: function() {
el.logo.removeClass('spin');
}
});
}
}
On mouseenter, add class to spin the logo. On mouseleave, remove the class. But to stop the logo spinning every mouseenter, I want to add a 5 second ban since the last.
This is what I tried, amongst other attempts:
var flipLogoTimer;
return {
el.nav.on({
mouseenter: function() {
if (!flipLogoTimer) {
el.logo.removeClass('spin').addClass('spin');
}
},
mouseleave: function() {
el.logo.removeClass('spin');
flipLogoTimer = setTimeout(function() {
//
}, 5000);
}
});
}
I tried to add a 5 second timer to the mouseleave event, so the next mouseenter can check if the timer is still running to determine whether or not to run the animation again.
Where am I going wrong and is there a better way? It's a difficult one to search for, as there are so many questions about running a function on a timer.
You can use the flag like
return {
buildUI: function () {
var flag = false;
el.nav.on({
mouseenter: function () {
if (flag) {
return;
}
el.logo.addClass('spin');
},
mouseleave: function () {
if (flag) {
return;
}
flag = true;
el.logo.removeClass('spin');
setTimeout(function () {
flag = false;
}, 5000)
}
});
}
}
You can try something like this by toggling value of flipLogoTimer
var flipLogoTimer=false;
return {
el.nav.on({
mouseenter: function() {
if (!flipLogoTimer) {
el.logo.removeClass('spin').addClass('spin');
}
},
mouseleave: function() {
el.logo.removeClass('spin');
flipLogoTimer=true;
setTimeout(function() {
flipLogoTimer=false;
}, 5000);
}
});
}
You can use timestamp. Idea: you fix last time when you added/removed class, and compare it with current date.
// 5000 - equal to 5 seconds
function checkTimestamp(a, b){
return Math.abs(a - b) < 5000;
}
return {
buildUI: function () {
var lastTimeStamp = null;
el.nav.on({
mouseenter: function () {
if(lastTimeStamp && checkTimestamp(lastTimeStamp, Date.now())
return false;
el.logo.addClass('spin');
lastTimeStamp = Date.now();
},
mouseleave: function () {
if(lastTimeStamp && checkTimestamp(lastTimeStamp, Date.now())
return false;
el.logo.removeClass('spin');
lastTimeStamp = Date.now();
}
});
}
}
I have some code that is running a JavaScript image flip, I'm new to JS and I need the image to flip when hovered and and hovered off, if I put it to onhover it flips everytime the mouse is moved, not when the mouse is off.
Here is the code:
$(document).ready(function () {
setInterval(function () {
$('.sponsorFlip').load('script.js');
$('.sponsorFlip').load('jquery.flip.min.js');
}, 30000);
$('.sponsorFlip').one("mouseenter mouseleave", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
$('.sponsorFlip').bind("click", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
});
Make use of classes. ;) Preview - http://jsfiddle.net/TJZmM/3/
$('div').bind('mouseover mouseout', function(){
var self = $(this);
if(self.toggleClass('flipped').hasClass('flipped')) {
self.html('rl');
}
else {
self.html('lr');
}
});
Does any one know why this is not working?
http://jsfiddle.net/jonevar/2Z2NQ/5/
Here is the whole code:
function ag_alert(message) {
event.preventDefault();
//SetTimeout in case didn't close manualy
var timer = setTimeout(cls_message, 5000),
cur_url = window.location.href;
//Check if its already on
if (! $('.ag_alert_wrapper').is(':visible') ) {
//Set the language
(cur_url.indexOf('/en/') >= 0) ? cls_txt = "close" : cls_txt = "閉じる" ;
$('<div class="ag_mess ag_alert_wrapper"></div><div class="ag_mess ag_alert_wrapper_close">'+ cls_txt +'</div>')
.prependTo('body');
$('.ag_alert_wrapper')
.append('<p>'+ message +'</p>')
.animate({top : 0}, 200, function() {
$('.ag_alert_wrapper_close')
.animate({top : 90}, 200)
.on({
mouseenter : function () {
$(this).animate({
top : 100
}, 200);
},
mouseleave : function () {
$(this).animate({
top : 90
}, 200);
},
click : function () {
cls_message();
}
});
});
//Setups ESC key to close message
$(document).keydown(function(e) {
if (e.keyCode === 27) {
cls_message();
}
});
} else {
//if Alert is already visible
$('.ag_alert_wrapper')
.children('p').html(message)
.end()
.effect("highlight", {
color : '#FF0'
}, 1000);
clearTimeout(timer);
}
}
function cls_message() {
$('.ag_mess').animate({
top : -200
}, 200, function () {
$('.ag_mess').remove();
});
}
This seems to be working fine, test code (using jQuery, but that's not changing the conclusion):
html
<div id="msgs"></div>
js
function other_function() {
$('#msgs').append('other ');
}
function do_something(data) {
var timer = setTimeout(other_function, 500);
if (data === "condition") {
$('#msgs').append('hi ');
} else {
$('#msgs').append('clearing ');
clearTimeout(timer);
}
}
do_something('yay');
do_something('condition');
Outputs this to the div:
clearing hi other
as expected. Live example:
http://jsfiddle.net/mCdxV/
Hope this helps.