|
JavaScript - Resolved: Clearinterval Stops Javascript From Functioning.
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>
Similar TutorialsThis <div> layer positioned always at bottom left of the screen on scrolling (and calling some code from labpixies) works well in non-ie browsers, but in ie it requires the omission of the doctype declaration. Why? Is it possible to fix it so that it works with the doctype in ie? Code: <!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
screenWidth = screen.width;
if (screenWidth == 1024)
{
var yside = 390;
}
else if (screenWidth == 1152)
{
var yside = 400;
}
else if (screenWidth == 1280)
{
var yside = 400;
}
else
{
var yside = 450;
}
if(document.body.scrollTop != "undefined")
sidemenu.style.top = document.body.scrollTop+yside+'px';
else
sidemenu.style.top = window.pageYOffset+yside+'px';
}
setInterval("FixY()",100);
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
Hi, I have created a site and on one page it uses 2 divs side by side to display text information. in the left hand div it contains 8 links. these links when clicked load up text stored in separate text files and display it in the right hand div. The code below was working when i ran it from my mac but when i try to load it off the webhost it fails to execute. Code: $(document).ready(function() {
$("#mc").click(function() {
$("#innertext").load('mc.txt');
});
$("#sd").click(function() {
$("#innertext").load('sd.txt');
});
$("#ma").click(function() {
$("#innertext").load('ma.txt');
});
$("#rtm").click(function() {
$("#innertext").load('rtm.txt');
});
$("#cm").click(function() {
$("#innertext").load('cm.txt');
});
$("#r").click(function() {
$("#innertext").html('r.txt');
});
$("#bp").click(function() {
$("#innertext").load('bp.txt');
});
$("#pc").click(function() {
$("#innertext").load('pc.txt');
});
});
Code: <div class="wrapper p2">
<ul class="list1 col-1">
<li>> <a href="javascript:void(0);" onclick="function("mc");" id="mc">Consultancy</a></li>
<li>> <a href="javascript:void(0);" onclick="function("sd"); id="sd">Strategy</a></li>
<li>> <a href="javascript:void(0);" onclick="function("ma"); id="ma">Market Assessment</a></li>
<li>> <a href="javascript:void(0);" onclick="function("rtm"); id="rtm">Routes to Market</a></li>
</ul>
<ul class="list1 col-2">
<li>> <a href="javascript:void(0);" onclick="function("cm"); id="cm">Change management</a></li>
<li>> <a href="javascript:void(0);" onclick="function("r"); id="r">Restructuring</a></li>
<li>> <a href="javascript:void(0);" onclick="function("bp"); id="bp">Planning</a></li>
<li>> <a href="javascript:void(0);" onclick="function("pc"); id="pc">Project management</a></li>
</ul>
</div>
here is a link to the page on the webhost-- http://herkes.host56.com/index-2.html Any ideas to why this does not work? any help is appreciated I have a form and javascript that doesn't work correctly. I think there's a problem with the javascript, but it's possible the form is the culprit. I'm new at this. Here is the form code for a search boxx: Code: <form id="search" method="get" name="search" action="promotions.html">
<input type="text" size="15" name="ws" maxlength="500" value="pen, keychain, etc." onfocus="this.value='';return false;" />
<button type="submit" value="Search">Go</button>
<input type="hidden" name="ID" value="64857723-2161-4778-BDEB-3EE622F6CFF3" />
</form>
Here is the javascript that's in the head of /promotions.html: Code: <script type="text/javascript">
function FrameRedirect()
{
var q = window.location.search;
q = (q.length > 1) ? q.substring(1, q.length) : 0;
var s = q.substring(0, 2);
switch (s)
{
case 'ws':
q = 'http://www.asiconnection.com/ProductSearch/LinkInQS.aspx?'+q;
document.getElementById('Content').className = 'active';
break;
case 'bn':
q = q.substring(3,q.length);
document.getElementById('RD2').className = 'active';
break;
default:
document.getElementById('RD1').className = 'active';
break;
}
iframe = '<iframe id="frame" src="'+q+'" width="780" scrolling="yes" frameborder="0" height="500"></iframe>';
document.getElementById('Content').innerHTML = iframe;
}
</script>
The search box code is suppose to send the inputted search word to the javascript on /promotions.html page and then load the search results http://www.asiconnection.com/Product.../LinkInQS.aspx into the iframe on that page. The only thing that appears in that iframe is "Oops. Firefox cannot find productsearch" Can someone help me figure this out? Thanks in advance. My website is all up and running and I decided to put a new image viewing script on, I already had a revolving image script showing all my previous work before but the latest script has totally stopped the previous from working. You can view what I mean at www.actioncomputing.co.uk I am using 2 scripts both available on Dynamic Drive they are Lightbox image viewer 2.03a Ultimate Fade-in slideshow (v2.1) If anyone can tell me why this is I would be extremely gratefull. I have this javascript on top of my HTML codes, that enables the "Free Trial" button if the Checkbox=On. but since I am not a programmer, I need a good mind to help me edit this What I need is to Edit this so that, If focus on Voucher Code field and have at least 6 bytes entered, and also the CheckBox=ON, I want the "Trial" button to change to "Confirm". <script language="Javascript" type="text/javascript"> function enable(){ if (document.agreement_form.agreed.checked==''){ document.agreement_form.submit_button.disabled=true }else{ document.agreement_form.submit_button.disabled=false } } </script> <div style="float:right;width:200px;margin-left:15px;padding-left:15px;margin-top:15px;border-left:2px dotted #99CC00"> <span style="font-weight:bold;font-family:Tahoma;font-size:10pt;">Voucher Code:</span><br/> <form style="font-family:Tahoma;font-size:8pt;" method="GET" action="$authaction" name="agreement_form"> <input name="tok" value="$tok" type="hidden"/> <input name="redir" value="$redir" type="hidden"/> <input size="12" name="voucher" type="password"/> <button type="SUBMIT" disabled="disabled" name="submit_button"><strong> Free Trial </strong></button> <p> </p> <input name="agreed" onchange="enable()" type="checkbox"/> Signed & agreed to all terms and conditions. </form> Hey everyone, I have a page where I call two external javascript files, and they work perfectly when I have all the files on my desktop. But once I transferred all the files into a folder, the scripts stop working. What's going on?! EDIT: Nevermind. I just forgot to relocate my jquery file! I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> Ok ..... let's see if I can explain this so someone else can understand it! I have a menu created with AllWebMenus and after battling with it for some time to get it to show up on the pages !!!! i am now facing another problem..... I have a flash movie on the home page that it does not start unless i click the home button. I've tested locally without the menu and it works, so has to be the menu that is conflicting with it. the site is www.teiafirme.com I could just drop the menu and create another one, thing is I like those darn buttons... Anyone here have any experience with this kind of problem? if needed i can post the menu and flash code... So, 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. 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 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'm attempting to have the example code section which is currently commented out to keep from code spamming this forum to react with the IF statement created within the FUNCTION that I called "calc". The code in the example section does work, however the FUNCTION or IF statement is not working. Could anyone help me visualize the problem. Thank you Code: <select name="ship_country" id="ship_country" style="min-width:200px;" onclick="calc;">
<option value="" selected="selected"></option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
</select>
<script type="text/javascript">
function calc() {
if (document.getElementById("ship_country").value = ("United States");) {
// Example comment representing a lot nonsequential code pertaining to this topic.
}
}
</script>
The issue I'm having is that the sound for the animation will not go off after the initial operation, every subsequent animation will be silent. Here is the pastebin: Pastebin.com Keep in mind this is not my code and I privately contracted someone out to do this. They are not responding and will not help at this point. I will try to answer any question you may have to the best of my ability. I am trying to install a simple slider/carousel in the middle of a web page. I opted for the JCarouselLite plug-in but can't seem to get it working. When the page loads, the images tile vertically(as opposed to line up horizontally) and the nav buttons sit below them. I have included necessary links to jQuery,the Carousel plug-in and also a custom.js file that includes a call to the plug-in to activate it(i think). I also have linked to a custom.css file to style the bar. I am wondering if my call to the plug-in is coded correctly. Beyond that, I can't understand why it isen't working. It is probably obvious but I'm a bit stuck! Could anyone help? I have attached the code showing the html, the custom.js function and the css. Thanks, nevblanc79 HTML: Code:
<div id="carousel">
<h3>Our Titles</h3>
<div class="carousel">
<ul>
<li><a href="portfolio_item.html"><img width="198" height="130" src="img/pictures/1.jpg" alt></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/2.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/3.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/4.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/5.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/6.jpg" alt="" width="198" height="130" ></a></li>
</ul>
</div>
<button class="prev"><</button>
<button class="next">></button>
</div>
Javascript: Code: $(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
CSS: Code: #carousel {
width:900px;
overflow:hidden;
margin-bottom:30px;
}
.carousel ul li {
width:198px;
margin-right:36px;
}
#carousel .next, #carousel .prev {
margin:0px;
font-size:15px;
padding:4px 10px;
}
#carousel .next {
float:right;
}
#carousel .prev {
float:left;
}
on this site. There are no validation errors. firebug says my linkOut function is not defined... but I have this: Code: function linkOut(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("H2.png","H.png");
}
not sure where to go from here. I have a CMS that was built for our company website that relies on some JS to upload media through a regular browser directly to be displayed on our site. There is a button one clicks to upload video. When clicked the file browser on your computer is supposed to pop-up so you can choose the media you would like to upload. This button no longer is responsive on any of my 12 mac desktops in any common browser nor my mac laptop which is on a different OS X version. Any ideas? Here is the script from the page: [CODE] <script type="text/javascript"> var upload1; window.onload = function() { upload1 = new SWFUpload({ // Backend Settings upload_url: "/08/assets/includes/php/uploadGall.php?id=<?php echo $id; ?>", // Relative to the SWF file (or you can use absolute paths) post_params: { "PHPSESSID" : "<?php echo session_id(); ?>"}, // File Upload Settings file_size_limit : "3102400", // 100MB file_types : "*.*", file_types_description : "All Files", file_upload_limit : "1", file_queue_limit : "1", // Event Handler Settings (all my handlers are in the Handler.js file) file_dialog_start_handler : fileDialogStart, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Flash Settings flash_url : "/08/assets/includes/js/swfupload/swfupload_f8.swf", // Relative to this file (or you can use absolute paths) swfupload_element_id : "flashUI1", // Setting from graceful degradation plugin degraded_element_id : "degradedUI1", // Setting from graceful degradation plugin custom_settings : { progressTarget : "fsUploadProgress1", cancelButtonId : "btnCancel1" }, // Debug Settings debug: false }); }; var n=new Date().getTime();var c=escape(n*1000+Math.round(Math.random()*1000)); $(document).ready(function() { $('#nav_entry div.sub').each(function(i) { $(this).hide(); }); $('#nav_entry div.title').each(function(i) { $(this).click(function() { $(this).siblings('.sub').slideDown('fast'); $(this).parent().siblings('.ne').children('.sub').slideUp(); }); }); $('img.mover').hide(); <?php if(!$errors) { ?> $("#addEntry").hide(); $("a#nevermind_post").hide(); <?php } else { ?> $("a#add_driver_btn").hide(); <?php } ?> $("a#add_driver_btn").click(function() { $(this).hide(); $("a#nevermind_post").show(); $("#addEntry").slideDown('slow'); }); $("a#nevermind_post").click(function() { $(this).hide(); $("a#add_driver_btn").show(); $("#addEntry").slideUp('slow'); }); }); </script>[CODE] And here is where the button lies in the page: [CODE] <input type="button" value="Upload file (Max 200 MB)" onclick="upload1.selectFiles()" style="font-size: 8pt;" />[CODE] THANKS! Okay, ive got 3 css classes. (normalfld, focusfld, and errorfld) When a textbox gets focus, the css class gets set to focusfld, when it looses focus it gets set to normalfld. When a textbox has an error, i set the css class to "errorfld" Now, what I would like to happen is that when a box has been set to "errorfld", when it gets and looses focus, its style will not be changed. This is my first ever attempt at javascripting and im sucking pretty bad. Can someone get me going in the right direction? Here is my attempt, that does not work. It always sets the class, even if the box is set to "errorfld" Code: function DoFocus(fld) {
if (fld.classname != 'errorfld')
{
fld.className = 'focusfld';
}
}
Any ideas where I went wrong? t.i.a, ~Matt I have a PHP page with a number of images displayed thumbnail size. I want the image source of a clicked thumbnail to be the image source of a larger image in an image field. Javascript is he Code: <script type="text/javascript">
function getValue(VarSrc)
{
VarSrc = document.getElementById('myimage').src;
}
</script>
The image field HTML is he Code: <form action="" id="PicForm" method="post" name="FindFile"> <input name="MyImage" type="image" id="myimage" value="Image Placeholder"/></form> The thumbnails are generated dynamically by PHP, this is how they look in HTML when rendered: Code: <img src="../158/DSCN3866.JPG" width="100" id="selectpic" onclick="getValue(../158/DSCN3866.JPG)"/> This is how they look in PHP: PHP Code: $output .= "<img src=\"{$pathToImages}{$fname}\" width=\"100\" id=\"selectpic\" onclick=\"getValue({$pathToImages}{$fname})\"/>"; The script doesn't work, which puzzles me because it was a suggested solution to a similar problem, and the author of the question confirmed that it worked. My question for you is: a) Should it work? b) If it won't, can someone suggest a solution that will? Thanks for your help. Elizabeth |
|||||||