my animation blink () make an image (.stone) disappear very slowly, it is executed when the page is ready, and then onmouseout again. My problem is when during the animation the mouse is going above (.stone) then it will be executed several times in a row.
I think I have to use or clearqueued or preventdefault, to avoid that but no idea how. Can someone help?
<SCRIPT>
$(document).ready(function(){blink();});
function blink(){
$(".stone").animate({opacity:0},10000);
};
$(".stone").on('mouseover',function () {
$('.stone').animate({opacity:1},100);
$(".stone").clearQueue();
});
$(".stone").on('mouseout',function (){blink();});
</SCRIPT>
<body>
<div id='conteneur'class='responsiveeinstein'><div class='stone'class='responsiveeinstein'><a href='photos.html'><img src='image1/stone aloneintro.jpg'class='responsiveeinstein'/></a></div><div class='stone2'><img src='image1/stone9.jpg'class='responsiveeinstein'/></div><div><a href='photos.html'><h1 id='elementClignotant'>Einstein</h1></a></div></div>
</body>
I think that's what you are looking for:
fiddle link
$(document).ready(function(){
var isAnimationFinished = false;
blink();
function blink(){
isAnimationFinished = false;
$(".stone").animate({opacity:0},10000,function() {
isAnimationFinished = true;
});
};
$(".stone").on('mouseover',function () {
if(isAnimationFinished){
$(".stone").stop();
$('.stone').animate({opacity:1},100);
}
});
$(".stone").on('mouseout',function (){blink();});
});
Related
I have an handler on clicking an element. It is getting stuck in an infinite loop. How can I turn off the listener for the 2nd click in this code... so that it doesn't keep repeating.
I'm trying to automatically close the toggle after 4.5 seconds. But the close click triggers another click... and so on...
$(document).ready(function(){
$(".navbar-toggle").click(function() {
setTimeout(function () {
$(".navbar-toggle").click();
}, 4500);
});
});
Add a 'flag' variable to your code
var has_clicked = false;
$(document).ready(function(){
$(".navbar-toggle").click(function() {
if(!has_clicked){
setTimeout(function () {
has_clicked = true;
$(".navbar-toggle").click();
}, 4500);
}
});
});
$(function(){
function callback2(){
$("#test").one("click", callback1);
}
function callback1(){
console.log('hi');
setTimeout(callback2, 4500);
}
$("#test").one("click", callback1);
});
jsFiddle Demo
Is this similar to what you want?
Attach the click event which execute only once, using .one(),
do whatever you want in the callback function, and attach it again after 4.5 seconds. If you cannot even modify your code to this, please let me know, I will try to think another work around
This is what I am going with for now though I believe I will use shole's approach when I get some more time... for now this is working well.
var is_open = false;
$(document).ready(function(){
$(".navbar-toggle").click(function() {
if(!is_open){
setTimeout(function () {
is_open = true;
$(".navbar-toggle").click();
is_open = false;
}, 3500);
}
});
});
Ok so I have a little issue here,
$("#WhoAreWe").click(function(){
$("#Image").hide();
$("#Two").slideUp(1000);
$("#Third").slideUp(1000);
$("#Fourth").slideUp(1000);
$("#WhoAreWe").hide();
$("#WhoAreWe2").slideToggle(3000);
$("#IDs").slideDown(3000);
$("#main").click(function(){
alert("Pressed Back");
});
(The alert is just a place holder)
Basically the #main is the entire page, and when any point on the site is pressed. It works fine but the problem is that when I first press #WhoAreWe it also runs the $("#main") function. My problem is that whenever WhoAreWe is pressed, main also runs. I don't want this, I just want it to run when the user clicks anywhere on the page AFTER clicking on WhoAreWe.
Edit:
Just to make it clear, #WhoAreWe is a Div (Text).
main is the ENTIRE PAGE
Try this example:
script
$(function(){
$("#main").on('click', function(e) {
if($(this).hasClass('disabled')) {
return;
}
alert('Its main ....');
});
$("#whoAreWe").on('click', function(e) {
alert('Its Who Are We ....');
$("#main").removeClass('disabled');
});
});
html
<input type="button" value="Who are we ?" id="whoAreWe" />
<input type="button" value="Main" id="main" class="disabled"/>
EDIT
script
$(function () {
$("#main").on('click', function (e) {
if ($(this).hasClass('disabled')) {
return;
}
alert('Its main ....');
});
$("#whoAreWe").on('click', function (e) {
e.stopPropagation();
$("#main").removeClass('disabled');
alert('Its Who Are We ....');
});
});
html
<div id="main" class="disabled">
<div id="whoAreWe">Who Are We ?</div>
</div>
Updated: Previously the "clicked" variable wasn't defined globally... now I've changed it to a global variable...
$(document).ready(function (){
var window.clicked=false;
$("#WhoAreWe").click(function(){
$("#Image").hide();
$("#Two").slideUp(1000);
$("#Third").slideUp(1000);
$("#Fourth").slideUp(1000);
$("#WhoAreWe").hide();
$("#WhoAreWe2").slideToggle(3000);
$("#IDs").slideDown(3000);
window.clicked=true;
});
$("#main").click(function(){
if(!window.clicked){
alert("Pressed Back");
}
});
});
guess this should work fine too
$(document).ready(function(){
$('#whoAreWe').on('click', function(){
$(':not(#whoAreWe)').on('click', function(){
$('#main').unbind('click').on('click', function(){
//unbind and bin click to prevent multi bindings
alert('Pressed Back');
});
});
});
});
and take care you have it wrapped in $(document).ready();. You should put all you actions in there.
FIDDLE
DIV-FIDDLE
DIV-FIDDLE waiting
FIDDLE WITH YOUR HTML AS SAMPLE
I have looked at all the other answers similiar to this question but i can't make them fit my scenario.
i have a page that has a sidebar that contains 15 results that auto refreshes, which is fine.
There is a link that loads up an external page into a div with an overlay. then this new div with the FULL list of the results also auto refreshes whilst its open. (don't want both divs auto-refreshing in background uneccesarily)
in this full list div each result has a jquery slideToggle() function to display more information.
what i am TRYING(and failing) to do is make the auto refresh stop whilst this slideToggle is displaying information, cos otherwise when the page refreshes it goes back to display:none.
here is my latest attempt:
html
main page has div to load into...
<div id="full_list"> loading... </div>
external page with the full list
<div class="events_list"> <!--container for events -->
<ul><li>
<div class="full_event"> <!--each event in a list-->
#1<b> 500 m race </b> <!--this bit always seen -->
<div class="event_slide"> <!--this div is slideToggled() -->
<b>500m race </b><br>
<div class="evntdescription">
run 500mrun 500mrun 500mrun 500mrun 500mrun 500m
</div>
</div>
</div>
</li></ul>
</div>
now my attempted javascript
var refreshData;
var infodisplay = $('.event_slide').css('display');
function autoRefresh () {
if(infodisplay == 'none')
{
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 1000);
}
else
{
clearInterval(refreshData);
}
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
autoRefresh (); //thought it might work if i add the function
//here as well //
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});
basically it doesnt do anything. i have made it work if i get rid of the second autoRefresh function, but it won't stop the function from going. just keeps on refreshing, also not sure how to stop the refresh when i close the div aswell.
let me know if you need more info.
thanx!
Try clearing the interval when the asynchronous loading has completed:
function autoRefresh () {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php', function() {
clearInterval(refreshData);
});
}, 1000); };
ok so i figured it out anyway. thanx for trying if you did tho.
put the if statement into a function after toggle is completed.
only downside is if it refreshes at same time that its still 'toggling' it will refresh. it won't clear the interval untill the toggle has completed. no idea how to get round that.
changed the code to this:
var refreshData;
function autoRefresh() {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 10000);
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
if($(this).css('display') == 'none')
{$('#full_list').load('eventlist.php');
autoRefresh();
}
else
{
clearInterval(refreshData);
};
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});
I have seen many scripts for accordion on the internet, but haven't found anything which meets my needs. I want to make a plugin for accordion just like that which Facebook uses. It should work like this:
Click to open and close.
Add style class while open.
Close upon an outside click. It should not close when click event is inside the accordion box.
Is there any way to achieve this? Please help if you know. I am new to jQuery...
Thanks in advance.
No need for a plug-in when 15 lines of code will solve it: it's about changing the order of the click events that trigger on a specific DOM element and on the window using setTimeout.
var ShowingAccordion = false;
$(document).ready(function () {
$('.MyAccordionOpener').click(function () {
if ($(this).next('.MyAccordion').is(':visible') === false) {
ShowingAccordion = false;
$('.MyAccordion').hide(500);
$(this).next('.MyAccordion').addClass('SomeClass');
$(this).next('.MyAccordion').show(500);
setTimeout(function () { ShowingAccordion = true; }, 1);
}
});
$('.MyAccordion').click(function () {
ShowingAccordion = false;
//this is the line that solves your problem
setTimeout(function () { ShowingAccordion = true; }, 1);
});
$(document).click(function () {
if (ShowingAccordion === true) {
$('.MyAccordion').hide(500);
ShowingAccordion = false;
}
});
});
And here's the demo
If it does what you need then you can accept the answer and happy coding!
I have a basic JQuery script that changes a few divs when you click - thus showing them - via toggle.
<script type="text/javascript">
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>
However - to call the even you need to click only on the first main div with the ID of "content_display".
My question is this: how can I hide these changes using JQuery if the user also clicks on BODY - i.e. if you click away, the divs go back to their original hidden state?
Thanks for helping a JQuery clutz!
Something like this should work:
$('body').click(function(e) {
if (!$(e.target).is('#content_display')) {
$('#content_display').removeClass('selected');
$('content_display_selector_container').hide();
}
});
Hey - found a way to do this - does anyone think there's a better way?
Here's the result:
<script type="text/javascript">
var mousetrap = false;
$('body').click(function() {
if (mousetrap == false) {
$('#content_display').removeClass('selected');
$('#content_display_selector_container').hide();
}
});
$('#content_display').hover(function() {
mousetrap = true;
},function(){
mousetrap = false;
});
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>