|
JavaScript - Clearinterval Isnt Stopping A Function
Im having some problem with stopping a function i run on loop using setInterval
Code: $(document).ready(function(){
var Cycle = setInterval('cycle()', 3000);
/* ... some other functions here ... */
$('.Test').click(function(){
var ID = $(this).attr('ID');
clearInterval(Cycle);
/* ... Rest of this function ... */
if (ID == 'Home')
{
var Cycle = setInterval('cycle()', 3000);
}
console.log(ID);
});
});
When i click a link with the Test class it runs through the function but the loop never stops and im not sure why, cant anyone help me solve this? If you want to see the bits of JS i cut out just say but i dont think there relevant. EDIT: Seems to be the if (ID == 'Home') bit which is causing the problems even though when in the log it shows ID being the word 'Live'. Have i missed some stupid obvious thing ? Whenever i click Similar TutorialsSo, I have a very simple script to show/hide a div on mouseover/onmouseout... basically, it's a slide-down menu, without the actual animation.... In any event, clearInterval doesn't seem to do a damn thing, and it's not a scope problem, and have tried it as many ways as I can think... still can't get a timer to clear. Have done a lot of searching, but seems like it typically boils down to a problem of variable scope, which I feel is not the case here. Code: <script type="text/javascript">
var navClosedY = -60;
var navOpenY = 0;
var navObj;
var hideTimer; //globally defined, should be accessible in all the functions.
function showNavControl() {
navObj = top.mainFrame.document.getElementById('navControl');
navObj.style.top = navOpenY + "px";
}
function hideNavControl() {
hideTimer = setInterval("hideNav()", 1000); //never clears.
}
function hideNav() {
navObj.style.top = navClosedY + "px";
clearInterval(hideTimer); //this is the bit that doesn't do anything.
alert(hideTimer); //this works, so I KNOW it can access hideTimer.
}
</script>
And, in the DOM, I just have a div like this: Code: <div id="navControl" class="navControlMain" onmouseover="showNavControl();" onmouseout="hideNavControl();"> I am trying to have a slide show of pictures that are randomly generated stop when the user mouses over the image, I have got everything to work so far except the onmouseover event, even the onmouseout seems to work I don't necessarily need the exact answer but any guidance would be appreciated! <script type="text/javascript"> /* ! [CDATA[ */ setInterval('randomImage()', 4000); //sets the interval of images to show every 4 seconds and runs the function to do so. var imgs = new Array("outdoors.jpg", "kayak.jpg", "fishing.jpg", "scuba.jpg", "biking.jpg"); //the array of images function randomImage() { document.getElementById("image").src = imgs[Math.floor(Math.random()*imgs.length)]; } //the function calls for a random number and applies it to the array of images to show a random picture. /* ]]> */ </script> </head> <body> <p> <img src="outdoors.jpg" width="200" height="200" alt="Random Image" id="image" onmouseover="clearInterval();" onmouseout="randomImage()" /> </p> I am not quite sure what I am doing wrong I've tried mutliple different set ups for the "onmouseover="clearInterval();" and nothing seems to work. Hi, all. I am very new to Javascript (and coding generally); the code below is part of my first project. I teach, and just built a flash card / timed-drill site for my students which has a number of setIntervals going on as a central part of its timed functionality. I ran into a problem when trying to create controls that would allow adjustments in the drill timing within the same page. The running setIntervals simply need to be killed when a variable is changed through the user form input, but I cannot seem to do this through any means known to me. I've tried about 15 different approaches and none of them work. Here is one function in my code that runs a setInterval and refuses to be killed by any external stimuli (like, say, a specific killerVariable value): Code: function countdownTimer()
{
var countdown=timeLimit/1000;
var countdownString=countdown+'';
document.getElementById("countdownTimerArea").innerHTML = countdownString;
var killCountdown=setInterval(function() {
countdownString=(countdown-1)+'';
document.getElementById("countdownTimerArea").innerHTML = countdownString;
countdown--;
if (countdown==0)
{
clearInterval(killCountdown);
}
},1000);
}
The clearInterval shown in the code *does* work correctly. However, if I try to set up another conditional, killerVariable-value-driven clearInterval in this function (or even change the above to if (countdown==0 || killerVariable==1), it does not stop the setInterval when killerVariable changes. In the end, because I needed this to go online quickly, I "solved" this problem by simply creating a few different versions of the page with hard-coded variable values and having the form control buttons take the user to those pages rather than trying to stop and restart the timed processes within the same instance of the script. However, this was a real kludge of a solution, and I am still very curious as to what I could have done to actually make this work. Is there anything I could have done short of totally rewriting the function as a loop with setTimeout? Alternately-- and this *does* seem incredibly basic, but I can't get an answer no matter how I phrase my Google and CF queries-- is there some way to hard-kill a currently running function via another function in Javascript? I think that would have solved my problems. Hello, I am trying add some animation effects to a navigation button and am having some problems with my code. I am using setInterval(); and the problem came with trying to clear it using clearInterval(); if i have this code then it seems to clear it fine: Code:
var i = 21;
function w(){
document.getElementById("homebtntop").style.height = i + "px";
i--;
}
function c(){
if(i<=6){
window.clearInterval(t);
}
}
function r(){
t = self.setInterval("w()",15);
}
function slideIn(){
t = self.setInterval("w()",15);
clearInterval(t);
}
but if i then try to call it from inside a function c(); it doesn't work: Code: var i = 21;
function w(){
document.getElementById("homebtntop").style.height = i + "px";
i--;
}
function c(){
if(i<=6){
window.clearInterval(t);
}
}
function r(){
t = self.setInterval("w()",15);
}
function slideIn(){
t = self.setInterval("w()",15);
clearInterval(t);
}
Any ideas? i am sorry if my code makes no ssense or is badly formatted, this is my first time with javasript. Thank you. I have a script that works until I add the clearInterval command, and I am not sure what I have done wrong. The code is: Code:
<script type="text/javascript">
function loadChatTalkRefresh(File,ID,Msg){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
empress = setInterval(function(){loadChatTalkRefresh(File,ID,Msg)},3000);
willow = clearInterval(empress,210000);
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
Code: // Values for fading
var fadeBy = 10; //Amount to fade by
var fadeTime = 120; //Time in milliseconds to fade.
var ie_counter = 0; //Counter for crappy IE.
var fade_to = 70;
function fader(obj) {
var div = document.getElementById(obj);
//Object details
var opacity = div.style.opacity * 100 + fadeBy; //Fade (FF)
ie_counter = ie_counter + fadeBy;
var opacity_ie = div.style.filter = "alpha(opacity=" + ie_counter + ")"; //Fade (IE)
div.style.opacity = opacity / 100;
if ( ie_counter != fade_to || opacity != fade_to ) {
setTimeout( "fader('" + obj + "')", fadeTime );
}
}
The loop stops for firefox (good browser), but not for internet explorer for some reason :/ Apart for the fact that IE is crap why is this? as I have no idea if this will boil down to a JS problem, or a CSS problem, I've posted this to both forums. If some enterprising moderator would like to consolidate them, have at ye! Using javascript I've made a simple drag and drop interface for a backend component. Elements are dragged from a list at right into a main area. The elements are organized as a list (<ul><li>). Each has a mouse down listener which flicks on the visibility of a div (that mirrors the appearance of the named <li>) and then follows the mouse as long as it is needed. All is peachy... ... BUT THEN !!! ... As one might predict, the dragging action selects whatever content comes between the list item where the drag started and the placement where the drag ends. It's ugly and distracting; furthermore it changes my nice 'pointer' cursor to a 'text' cursor. I don't want to have to disable selecting for the entire page (nor do I know of a slick, elegant way to accomplish this) and I've tried all sorts of other hackery: cover up divs were especially fail-tastic. Hoping someone out there's cleverness gland can help me with this one. Excerpt from the site below to give an idea of layout: elements of the orange list at right get dragged into the main area in the middle I can't link to the site directly, sorry, I don't have a version ready that doesn't modify existing databases. Thanks, -S as I have no idea if this will boil down to a JS problem, or a CSS problem, I've posted this to both forums. If some enterprising moderator would like to consolidate them, have at ye! CSS thread link I wrote a form and a JavaScript to valid the form. I cannot figure out however how to stop the form from submitting if the form is invalid. [CODE] function validateForm() { if(""==document.test.custName.value) { alert("Please enter your name."); return false; } if(""==document.test.email.value) { alert("Please enter your email address."); return false; } if(""==document.test.custComment.value) { alert("Please enter your comment."); return false; } return true; } [CODE] I have a simple form that works via a suggested results system (http://www.brandspankingnew.net/arch...uggest_v2.html) While in firefox the go button is greyed out and enter doesn't submit the form in IE pressing the enter key submits the form. Is there any way with a bit of javascript to stop IE from doing a form submission on enter but only for this form (since there are many more on the site) PHP Code: <form action="index.php" method="GET" name="qsform" id="qsform"><input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" /><input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" /><input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" /> <input type="submit" name="go" id="go" value="Go" disabled="true" /></form> I am using the following validation routine function savenotes() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var result = xmlhttp.responseText.split("~"); alert(result[0]) if (result[0] == "1") { // alert(result[1]); alert("should return true"); valid = true; } else { alert(result[1]); valid = false; } } } var str = "ok"; var mypost = "check.asp" // alert(mypost); xmlhttp.open("GET", mypost, true); xmlhttp.send(); return valid; } now where do I put the return so that it returns to my form if it's valid or not. It doesn't seem to work to me and the form is always submitted I am calling this with <form method=post action=admin.asp onsubmit="return savenotes()"> I have this which runs on keyup in a textbox but i dont want it to run if the pressed key is enter, how would i go about that? Code: function getList()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
showDiv('#', 'result');
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
var user = document.getElementById('friendsSearch').value;
xmlhttp.open("GET","../friendSearch.php?username="+user,true);
xmlhttp.send();
}
Hi, I am working with a template I purchased that will loop a series of header images. I like to stop the image series from going back to the beginning once the series of images cycles through. For instance, if there were 3 images in the sequence; currently the script cycles through all 3 images and then starts from the beginning. I would like the script to stop on the last image (so that image stays displayed) and not start the sequence again from the beginning. I couldn't get any support for hacking this script from the developers. The php file that handles this operation attached below and i was told by the support forum I posted in that some Javascript skill would be needed, hence the reason for posting in this section of the forum. Thanks for looking hi guys, i have a forum system that auto refreshes, but what that is doing is stopping my refresh container from refreshing to let people know if they have new inbox messages, im not very good with javascript and i cant figure out why its doing it. any help would be great, below are both of my codes. Forum refresh: Code: function keepRefreshed(){
if(set == 0){
refresher = setTimeout("keepRefreshed()", 60000);
allowButton = setTimeout("allowRefresh()", 3000);
set = 1;
} else {
refreshTopics();
}
}
function allowRefresh(){
document.replyForm.refreshButton.disabled = false;
}
function refreshTopics(hl){
if(set == 1){
clearTimeout(refresher);
clearTimeout(allowButton);
}
document.replyForm.refreshButton.disabled = false;
refresher = setTimeout("keepRefreshed()", 60000);
allowButton = setTimeout("allowRefresh()", 3000);
Refresh container: Code: $(window).ready(function() {
$("#responsecontainer").load("includes/inc-mess-jail.php", function(response, status, xhr) {
if (status == "error") {
$(this).html("Error: " + xhr.status + " " + xhr.statusText);
}
});
var refreshId = setInterval(function() {
$("#responsecontainer").load('includes/inc-mess-jail.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
as i said, any help would be great. thanks in advance. Dan I am having trouble with some JavaScript that is supposed to add some Google Analytics tracking parameters to "cross-domain" links (used to auto append tracking info across multiple domains as a way of sharing the Google cookie info). I have my code kind of working at this point except the default event (the normal href link) is not stopping. Instead my new event (the link plus Google parameters) fires off and is immediately replaced by the default (no parameters) event. For links that open in a new window, two windows open, one the standard link and one with the intended parameters. I am using a return false; on each link type but it is not doing anything. Any ideas how I can stop the default event? Code: Code: //Last Updated 5/10/12
/*Regex list of on-site domains, pipe and backslash delimited. */
var wa_onsiteDomains = /mydomain\.com|my2nddomain\.com|my3rddomain\.com|javascript/i;
/*Used to unobtrusivly add events to objects*/
function unobtrusiveAddEvent (element,event,fn) {
var old = (element[event]) ? element[event] : function () {};
element[event] = function () {fn(); old();};
}
function wa_crossDomainLink(i) {
return function () {
var thisLink = decodeURI(wa_links[i]);
var thisLinkTarget = wa_links[i].target;
if (typeof(_gaq) == "object") {
if(thisLinkTarget == "_blank") {
var wa_myTracker=_gat._getTrackerByName();
var wa_fullUrl = wa_myTracker._getLinkerUrl(thisLink);
window.open(wa_fullUrl); return false;
} else {
_gaq.push(['_link', thisLink]); return false;
}
}
};
}
var wa_links = document.links;
if ( wa_links ){
for(var i=0; i<wa_links.length; i++) {
if( wa_links[i].href.match(wa_onsiteDomains) && !wa_links[i].href.match(location.hostname)){
unobtrusiveAddEvent( wa_links[i], 'onclick' , wa_crossDomainLink(i));
}
}
}
Note, the code above resides in a separate js file and is called at the bottom of every page. Thanks! Hello everyone! First of all let me introduce myself as this is my first post on the coding forums! My name's Tom, I live in Sheffield, England and I'm 21 years old. Anyway, I have a little problem on a project I'm working on. I have a div set with an onclick link (onclick="location.href='http://www.google.com/';"). Thats not the problem, that works fine. The problem I'm having is that I then have another div inside this div that I don't want to be linked at all but the outer div's link seems to still be active on the inner one. Does anyone have any idea how to stop the link on the inner div whilst still keeping the outer div linked? Thanks alot for any help, Regards, Tom. Problem/Error: JavaScript/AJAX not returning values correctly... The JavaScript/AJAX is printing "null" into the chat_div where the tag name is "user". But in those tags there is actually data, this data is a link. I am thinking that it may be returning the first childNode which would be the <a>? I don't fully understand nodes, but I have had a quick read about them. PHP: PHP Code: <?php //Headers header("Expires: Mon, 01 Dec 1990 05:00:00 GMT" ); header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); header("Cache-Control: no-cache, must-revalidate" ); header("Pragma: no-cache" ); header("Content-Type: text/xml; charset=utf-8"); require("connect.php"); mysql_select_db($dbname, $con); //Variables $ses = explode(".", $_SESSION['user']); //User ID of user currently logged in $sid = $ses[2]; //Number of last message which was displayed, if does not exist or has no value then //last message will be 0. $last_mess = (isset($_GET['m']) && $_GET['m'] != "") ? $_GET['m'] : 0; $last_mess = mysql_real_escape_string($last_mess); $chat = mysql_real_escape_string($_GET['chat']); //Counter for counter number of errors $i = 1; //Send message if (isset($_POST['message']) && $_POST['message'] != "") { //Variables $chat = mysql_real_escape_string($_GET['chat']); $message = mysql_real_escape_string($_GET['message']); $query = "INSERT INTO message (chat_id, user_uid, recipient_uid, message, post_time) VALUES (". $chat.", ".$sid.", ".$rid.", ".$message.", NOW())"; mysql_query($query); } //Get current chat if (isset($_GET['chat'])) { $xml = '<?xml version="1.0" ?><root>'; $query = "SELECT * FROM message WHERE chat_id = ".$chat." AND msg_id > ".$last_mess; $result = mysql_query($query); while ($row=mysql_fetch_array($result)) { //Get name of sender $get_name_query = "SELECT * FROM users WHERE uid = '".$row['user_uid']."' OR uid = '".$row['recipient_uid']."'"; $get_name = mysql_query($get_name_query); if (!$get_name) { //If there is no result display error echo "Error $i: Error getting usernames! <br /> Query: $get_name_query <br />MySQL Error: ".mysql_error(). "<br /><br />"; $i++; } //While result is being got get first name and upper case first letter. while ($row2=mysql_fetch_array($get_name)) { $name = explode(".",$row2['full_name']); $first_name = $name[0]; $userid = $row2['uid']; $sent_by = "<a href=\"../profile.php?user=".$userid."\">".ucfirst($first_name)."</a>"; } //Write message contents $xml .= '<message id="' . $row['msg_id'] . '">'; $xml .= '<user>' . $sent_by . '</user>'; $xml .= '<text>' . $row['message'] . '</text>'; $xml .= '<time>' . $row['post_time'] . '</time>'; $xml .= '</message>'; } $xml .= '</root>'; echo $xml; } ?> JavaScript/AJAX: Code: function getMessage() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
var url = "scripts/get_data.php?uid=<?=$uid?>&m=" + lastMess + "&chat=1";
receiveReq.open("GET", url, true);
receiveReq.onreadystatechange = manageMessage;
receiveReq.send( null );
lastMess++;
}
}
function manageMessage() {
if( receiveReq.readyState == 4 ) { // request complete
var chat_div = document.getElementById( 'chat' );
var xmldoc = receiveReq.responseXML;
var msg_nodes = xmldoc.getElementsByTagName( 'message' );
var n_msg = msg_nodes.length;
for( i = 0; i < n_msg; i++ ) {
var user_node = msg_nodes[ i ].getElementsByTagName( 'user' );
var time_node = msg_nodes[ i ].getElementsByTagName( 'time' );
var text_node = msg_nodes[ i ].getElementsByTagName( 'text' );
//Display message
chat_div.innerHTML += user_node[ 0 ].firstChild.nodeValue + "<br />";
chat_div.innerHTML += time_node[ 0 ].firstChild.nodeValue + "<br />";
chat_div.innerHTML += text_node[ 0 ].firstChild.nodeValue + "<br /><br />";
}
}
}
More info: The PHP is displaying the data properly, like so: XML: Code: <root>
<message id="1">
<user>
<a href="../profile.php?user=4">Nicholas</a>
</user>
<text>testing stupid chat thing</text>
<time>0000-00-00 00:00:00</time>
</message>
<message id="2">
<user>
<a href="../profile.php?user=4">Nicholas</a>
</user>
<text>dsadasfsdfsggsdgrgsdgfd</text>
<time>2010-04-22 19:17:16</time>
</message>
<message id="3">
<user>
<a href="../profile.php?user=4">Nicholas</a>
</user>
<text>gfgdgsegegsgfawdfwdfasfa</text>
<time>2010-04-14 17:28:07</time>
</message>
</root>
What is being displayed on the page: Code: null 0000-00-00 00:00:00 testing stupid chat thing null 2010-04-22 19:17:16 dsadasfsdfsggsdgrgsdgfd null 2010-04-14 17:28:07 gfgdgsegegsgfawdfwdfasfa For some reason the gallery image isnt poping up in a window, it just opens it in a separate page. Anyway able to assist? www.habugfx.com/HabuMAC/portfolio.html I am new to this kind of scripting, so I have not done it before, I have tried to find solutions on the net but none have worked. I have a 'contact us' form, which includes 2 radio buttons to select how they wish to recieve their reply... the first radio is 'email' the second radio is 'phone' When the 'phone' radio is selected, i want the div including a drop downbox to appear to ask what time to recieve a call, but when the 'email' radio is selected, this div does not appear. This is the script for this section. . .. ... <span>Best way to reply:</span> <input type="radio" name="reply" value="Email" id="reply_0" /> E-mail <BR /> <div style="margin-left:270px;"><input type="radio" name="reply" value="Phone" id="reply_1" onclick=""/>Phone</div> <br/> <div id="timehide"><span>Best time to get hold of you:</span> <select> <option value="Any">Any</option> <option value="06:00 - 10:00">06:00 - 10:00</option> <option value="10:00 - 12:00">10:00 - 12:00</option> <option value="12:00 - 14:00">12:00 - 14:00</option> <option value="14:00 - 16:00">14:00 - 16:00</option> <option value="16:00 - 18:00">16:00 - 18:00</option> <option value="18:00 - 20:00">18:00 - 20:00</option> </select></div> ... .. . if anyone could help me it would be greatly appreciated!!! Cheers, Ben! I am new to this kind of scripting, so I have not done it before, I have tried to find solutions on the net but none have worked. I have a 'contact us' form, which includes 2 radio buttons to select how they wish to recieve their reply... the first radio is 'email' the second radio is 'phone' When the 'phone' radio is selected, i want the div including a drop downbox to appear to ask what time to recieve a call, but when the 'email' radio is selected, this div does not appear. This is the script for this section. . .. ... <span>Best way to reply:</span> <input type="radio" name="reply" value="Email" id="reply_0" /> E-mail <BR /> <div style="margin-left:270px;"><input type="radio" name="reply" value="Phone" id="reply_1" onclick=""/>Phone</div> <br/> <div id="timehide"><span>Best time to get hold of you:</span> <select> <option value="Any">Any</option> <option value="06:00 - 10:00">06:00 - 10:00</option> <option value="10:00 - 12:00">10:00 - 12:00</option> <option value="12:00 - 14:00">12:00 - 14:00</option> <option value="14:00 - 16:00">14:00 - 16:00</option> <option value="16:00 - 18:00">16:00 - 18:00</option> <option value="18:00 - 20:00">18:00 - 20:00</option> </select></div> ... .. . if anyone could help me it would be greatly appreciated!!! Cheers, Ben! |
|||||||