how to stop setInterval() on slidetoggle() then restart again? - javascript

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;
});

Related

Does dynamically updating a div with JS/jQuery rely on the click of an element on the same page?

I have a div, or more specifically a <p> tag with id="routineInfo" I want to dynamically update on document.ready, but for some reason it does not seem to work:
$(function() {
$("#routineInfo").html("Routine: Full Body");
});
I started troubleshooting and I could get the desired effect by attaching an onclick handle to an element to trigger the function:
$(".playIt").click(function() {
$("#routineInfo").html("Routine: Full Body");
});
However, I wanted the function to happen on load of the desired page, so to simulate this I attached the handle to the element, found on a different page, that links to the page in question:
$(".linkElementOnDifferentPage").click(function() {
$("#routineInfo").html("Routine: Full Body");
});
Did not work. Can anybody explain this to me please?
EDIT: adding html.
<div class="header">
<div id="info">
<p id="routineInfo"></p>
</div>
</div>
If your div(or p tag) is loaded dynamically, then it cannot be guarantied that its available at the document ready function(mostly in case of rendering views asynchronously).
$(function() {
setTimeout(function() {
$("#info").append($('<p id="routineInfo"></p>'));
}, 3000);
});
var DivPopulateIntervel = window.setInterval(function() {
if ($("#routineInfo").length > 0) {
$("#routineInfo").html("Routine: Full Body");
window.clearInterval(DivPopulateIntervel);
}
}, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div id="info">
</div>
</div>
here
setTimeout(function() {
$("#info").append($('<p id="routineInfo"></p>'));
}, 3000);
simply adds your #routineInfo to document after 3 seconds to create a lazy loading or asynchronous effect(just for demo purpose).
var DivPopulateIntervel = window.setInterval(function() {
if ($("#routineInfo").length > 0) {
$("#routineInfo").html("Routine: Full Body");
window.clearInterval(DivPopulateIntervel);
}
}, 100);
is the setInterval function which gets called after every 100 milliseconds, until the required div gets rendered.
window.clearInterval(DivPopulateIntervel);
removes the DivPopulateIntervel intervel function once the html is set(or the required div is available).

Jquery / JavaScript boostrap Switchery clearInterval doesn't work

I have a boostrap switchery on my site:
<div class="form-group">
<label class="checkbox-inline checkbox-right checkbox-switchery switchery-sm">
<input type="checkbox" class="switchery" id="test55">
Live
</label>
</div>
<div id="tableHolder"></div>
I want to achive this:
on page load load external page into "tableHolder" div.
Switchery is default turned off.
When you click on switchery, load the same external page, but with div resfresh every 5 seconds.
If you turn off switchery, show only loaded external page, without resfresh interval.
I'm having troubles, because everything works ok, but when i press switchery to off, the div still keeps refreshing, so clearInterval doesnt' work :(
Here is my script:
<script type="text/javascript">
$(document).ready(function () {
$('#tableHolder').load('external.php?name=myId001')
var documentInterval = 0;
$('#test55').change(function () {
if ($(this).prop("checked")) {
documentInterval = setInterval(function () {
$('#tableHolder').load('external.php?name=myId001')
}, 3000);
} else {
clearInterval(documentInterval)
}
});
});
</script>
Use click, not change function.
$(document).ready(function() {
$('#tableHolder').load('external.php?name=myId001');
var elem = document.querySelector('#test55');
var init = new Switchery(elem);
var documentInterval = 0;
var clickCheckbox = document.querySelector('#test55');
$(document).on('click', '#test55', function() {
if ($(this).prop("checked")) {
documentInterval = setInterval(function() {
$('#tableHolder').load('external.php?name=myId001');}, 3000);
} else {
clearInterval(documentInterval);
}
});
});
Sample fiddle here . This will append some text to the div as when switch is on and will stop appending when switch is turned off. If you change the 'click' event to 'change' event the text appending will continue even when the switch is off

How to wait X seconds a click after one was recently made? - JQuery

I want to delay the trigger of a click after one was recently triggered. Why? Because in my website I can simply click multiple times the "dropdown icon" and it will toggle the slide those multiple times and dont want to... I mean, I want to wait till the dropdown menu was slided and then it can trigger another click in the "dropdown icon"
My website url is: www.ayfshowroom.byethost5.com
I'm new using jquery, this is my code:
function desplegarMenu () { //DESPLIEGA MENU EN RESPONSIVE
$('#dropdown').click(function() {
$('.container-menu ul').slideToggle(500);
$('#dropdown i').toggleClass("fa fa-bars").toggleClass("fa fa-times");
});
}
$(document).ready(function() {
desplegarMenu();
});
Thanks!
You can watch for when the animation finishes, and only react to the click event when it is finished.
// create a new variable to record whether the animation is in progress
var dropdownAnimating = false;
function desplegarMenu () { //DESPLIEGA MENU EN RESPONSIVE
$('#dropdown').click(function() {
// if the animation is in progress, don't do anything
if (dropdownAnimating) return;
// set the flag that the drop down is animating
dropdownAnimating = true;
// use the complete function to reset the flag when the animation is complete
$('.container-menu ul').slideToggle(500, function() { dropdownAnimating = false; });
$('#dropdown i').toggleClass("fa fa-bars").toggleClass("fa fa-times");
});
}
In this way, if the user clicks whilst the animation is in progress, nothing will happen.
You can disable the toogler button when animating...
$('#dropdown').click(function() {
var self = this;
$(self).prop("disabled",true); //disabling the button, to prevent another click
$('.container-menu ul').slideToggle(500, function() {
$(self).prop("disabled",false); //enabling the button after animation
});
$('#dropdown i').toggleClass("fa fa-bars").toggleClass("fa fa-times");
});

Reveal: jQuery Modal Plugin Won't Appear

I'm trying to use Reveal by Zurb to display a form, yet when I select the item that triggers the event the screen darkens like Reveal is working, but it will not show the pane. Any ideas? Thanks a lot for the help!
Planner.js
$(function() {
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').reveal('http://example.com/user/planner/update/'+this.id);
});
$('#updateForm').live('submit', function() {
var data = $('#updateForm').serialize();
var url = $(this).attr('action');
$.post(url, data);
return false;
});
});
From looking at the documentation online it seems there are no parameters for the reveal() method - the reveal method just shows a div on the screen, so
You would created markup on your page :
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
then reveal it ...
$('#myButton').click(function(e) {
e.preventDefault();
$('#myModal').reveal();
});
If you want to load something into the div and then reveal i suggest this approach :
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').load('http://example.com/user/planner/update/'+this.id,function() {
$('#update_view_content').reveal();
});
});
That should load in the contents and then once the load has completed call the reveal method. untested

Changing jQuery function to page load

Can anyone tell me how to change the following statement which is currently controlled by a radio button to a document load function.
Basically I want the slide div to slide out from the left to right when the page loads.
jQuery:
jQuery(function() {
jQuery('#slide').hide();
jQuery(':radio[name=radiobutton]').click(function() {
var value = $(this).val();
if (value === 'Y') {
jQuery('#slide').show('slow');
} else if (value === 'N') {
jQuery('#slide').hide('slow');
}
});
HTML:
<div id="slide" class="alpha60">
<p class="statement_style_head">Content goes here</p>
<p class="statement_style_text">A line or two of text goes here </p>
</div>
$(document).ready({. Your staff. });
One way is to just click it on load like so $('input[name=radiobutton]').click(); or $('input[name=radiobutton]').trigger('click');
The other would be to place your code inside a function and call that function on load.
function showSomething(){
// code here
}
showSomething();
Document.ready is kind of onload for javascript , it waits till everything is ready and then executes...your code , it safe and best practices for onload
$(document).ready(function() {
$("divid").animate({top:'10px', bottom:0}, 3000);
});

Categories