JavaScript - Javascript Loop Skipping Intervals, Why?
i know there are pre-made scripts to do what i'm doing. i want to create this myself to learn.
i'm trying to create a list of section titles with arrows next to them, clicking on an arrow expands the section to read it's text, clicking on the arrow again collapses the section text. additionally, i would like an "expand all" and "collapse all" link and that's where my issue baffles me. my js - Code: function expandAll() { var collapsedDivs = document.getElementsByClassName('collapsed'); for (var i=0; i<collapsedDivs.length; i++) { var expandMe = collapsedDivs[i]; expandMe.style.display = 'block'; expandMe.addClassName('expanded'); expandMe.removeClassName('collapsed'); document.getElementById('arrow_'+i).innerHTML = '<img src="../media/hide.gif" />'; } } my html - Code: <div style="float:left" id="arrow_0"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION ONE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section one text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_1"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION TWO TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section two text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_2"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION THREE TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section three text text text text text text text text text text text text text text text text text text text text text text </div> <div style="float:left" id="arrow_3"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION FOUR TITLE</div> <div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section four text text text text text text text text text text text text text text text text text text text text text text </div> upon executing the function, the result is the text for sections one and three being expanded and the arrows for one and two being changed. why? what am i doing wrong? Similar TutorialsHello, i have a qustion that maybe has a very simple answer but i'm a beginner in working with scripts and i couldn't find it. i have the code below. so i have 5 time intervals but the thing that i couldn't do is to make that for saturdays to show only the 5th interval and hide the other ones. The full code is attached. Thank you! Code: <script type="text/javascript" src="/js/date.js"></script> <!--[if IE]><script type="text/javascript" src="/js/jquery.bgiframe.min.js"></script><![endif]--> <script type="text/javascript" src="/js/jquery.datePicker.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="/js/datePicker.css"> <br/> <div id="livraredata" > <#if cache.getSessionInterface(jsp_request).getAttribute("ro.kubu.magazin.EditareComanda")?exists> <br/>Detalii de livra <input type="text" id="livraredetalii" name="livraredetalii" value="${c_livrare_detalii}"/> <#else> <b>Data livra </b><input id="livare-data" type="text" class="date-picker" style="width:100px;"/> <b>Interval orar: </b> <select id="livare-interval" style="width:100px !important;"> <option value="09-13" id="li1">09-13</option> <option value="13-17" id="li2">13-17</option> <option value="17-21" id="li3">17-21</option> <option value="09-21" id="li4">09-21</option> <option value="10-17" id="li5">10-17</option> </select> <input type="hidden" id="livraredetalii" name="livraredetalii" value="${c_livrare_detalii}"/> <script type="text/javascript">//<![CDATA[ var today = new Date(); var firstday = today; <#if sel?exists> var zonaclasa = ${sel.getClasa()}; <#else> var zonaclasa = -1; </#if> function updateinterval_livraredetalii() { var dd = $('#livare-data').val(); dd = Date.fromString(dd); dd = dd.asStringFmt('yyyy-mm-dd'); $('#livraredetalii').val(dd+" "+$('#livare-interval').val()); } function update_livraredetalii() { var dd = $('#livare-data').val(); dd = Date.fromString(dd); var oraazi = new Date().getHours();//0--23 var ziazi = new Date().getDay();//0--6, 0 dum if (dd.getDayOfYear() == today.getDayOfYear() && ziazi != 6 && oraazi >=12) { $('#li1').hide();$('#li4').hide();$('#li5').hide(); $('#li2').show(); $('#li3').show(); $('#livare-interval').val($('#li2').html()); } else if (dd.getDayOfYear() == today.getDayOfYear() && ziazi == 6) { $('#li1').hide(); $('#li2').hide(); $('#li3').hide(); $('#li4').hide(); $('#livare-interval').val($('#li5').html()); } else { $('#li1').show(); $('#li2').show(); $('#li3').show(); $('#li4').show(); $('#li5').hide(); } dd = dd.asStringFmt('yyyy-mm-dd'); $('#livraredetalii').val(dd+" "+$('#livare-interval').val()); } $(function(){ today = new Date();today.setHours(0);today.setMinutes(0);today.setSeconds(0);today.setMilliseconds(0); var oraazi = new Date().getHours();//0--23 var ziazi = new Date().getDay();//0--6, 0 dum var msecsInADay = 86400000; firstday = today; if (ziazi == 0 || (ziazi != 6 && oraazi >= 16) ) { //daca e duminica sau e zi a saptamanii dupa ora 16 firstday = new Date(today.getTime()+msecsInADay); } else if (ziazi == 6 && oraazi >= 10) {//daca e sambata dupa 10 firstday = new Date(today.getTime()+2*msecsInADay); //urmatoare zi e luni } else if (zonaclasa != 0) { firstday = new Date(today.getTime()+msecsInADay);$('#li4').hide(); } else if (zonaclasa != 0 && oraazi >= 17) { firstday = new Date(today.getTime()+2*msecsInADay); } else if (oraazi >= 9) { //daca e dupa ora 9 dispar intervalele 1 si 4 $('#li1').hide();$('#li4').hide(); $('#li2').show();$('#li3').show(); } <#if mag.hasText("setup.inchideazi")> firstday = new Date(today.getTime()+msecsInADay); </#if> <#if mag.hasText("setup.inchidemaine")> firstday = new Date(today.getTime()+2*msecsInADay); </#if> Date.format = 'dd-mmm-yyyy'; $('.date-picker').datePicker({ clickInput:true, showYearNavigation:false, createButton:false, renderCallback:function($td,thisDate,month,year) { if (thisDate.getDay() == 0 || thisDate.getDayOfYear() < firstday.getDayOfYear()) { //ascundem default toate zilele pana la firstday si duminicile $td.addClass('disabled'); } } }).val(firstday.asString()) .trigger('change'); //$('.date-picker').datePicker({startDate:'01/01/2000',showYearNavigation:'true'}); $('#livare-interval').change(function(){ updateinterval_livraredetalii(); }); $('#livare-data').change(function(){ update_livraredetalii(); }); update_livraredetalii(); }); //]]></script> </#if> </div><br/> I have an interval set that runs indefinitely (backgrounds switching) or until the viewer stops it. I've noticed that when I close a tab while it's running and revisit the page, it "doubles" the interval and the backgrounds get mixed up. Refreshing the page returns it to normal. Does anyone know how to fix this? I've tried clearing the interval with window.onunload and window.onbeforeunload. I'm thinking it has something to do with firefox not clearing its cache for the tab. I'll look into disabling that. Hi all. I am having a problem understanding exactly how setInterval and setTimeout work and really need some help. I want to create an array and then print out each element one at a time at one second intervals. I've only been able to come up with something like this, but it just prints the last value of the array after a second. Code: <script type = "text/javascript"> <!-- var myArray = new Array(); for (var i = 0; i < 11; i++){ myArray[i]=i+50; } for (var i = 0; i < myArray.length-1; i++){ setInterval("document.getElementById('here').innerHTML = myArray[i];", 1000); } //--> </script> <div id="here">Stuff here</div> I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one. I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript. I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas? Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230. I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks! Hii guys.. Im pretty new to Javascript and cant get this working.. Code: <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> </head> <body> <script type="text/javascript"> function checkIt(evt) { evt = (evt) ? evt : window.event var charCode = (evt.which) ? evt.which : evt.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) { status = "This field accepts numbers only." return false } status = "" return true } function notEmpty(){ var n = document.getElementById('myText').value if (n<100) test1(); else if(n<200) test2(); else {alert("You did not enter a number!")} } return:false $(function test1() { {alert("1")} }); $(function test2() { {alert("2")} }); </script> <INPUT TYPE="text" NAME="numeric" onKeyPress="return checkIt(event)" id="myText"> <input type='button' onclick='notEmpty()' value='Form Checker' /> </body> Hes running function test1 and function test2 straight without looking at the if else statment, what im doing wrong? Anyway thanks for helping me Greetz Lennard Hey guys, I am new at JavaScript, but I have been able to piece together some code for a stopwatch. I have everything the way I want it in regards to the function and look of the stopwatch, but I want to be able to set timers so that the ss() function in the code below will go and stop automatically at intervals I can set. I just can't seem to get there with this one and any help is greatly appreciated. Thank you for your time. Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <script type="text/javascript"> var t=[0, 0, 0, 0, 0, 0, 0, 1]; document.onkeyup=function(event) { if((event.which && event.which === 32) || (event.keyCode && event.keyCode === 32)) { ss() } } function ss() { t[t[2]]=(new Date()).valueOf(); t[2]=1-t[2]; if (0==t[2]) { clearInterval(t[4]); t[3]+=t[1]-t[0]; t[4]=t[1]=t[0]=0; disp(); } else { t[4]=setInterval(disp, 43); } } function r() { if (t[2]) ss(); t[4]=t[3]=t[2]=t[1]=t[0]=0; disp(); t[7]=1; } function disp() { if (t[2]) t[1]=(new Date()).valueOf(); t[6].value=format(t[3]+t[1]-t[0]); } function format(ms) { var d=new Date(ms+t[5]).toString() .replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1'); var x=String(ms%1000); while (x.length<3) x='0'+x; d+='.'+x; return d; } function load() { t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf(); t[6]=document.getElementById("disp"); disp(); } </script> </head> <body onload='load();'> <div></div> <input type="text" style="border: none" id="disp" readonly /> <style type="text/css"> #disp { font-size: 180px; text-align: center; font-family: Verdana; } </style> </body> <form> </form> </html> I've got an old school script running a static slide show, but it's not showing the ninth image - regardless of what the image is (ruling out a typo in my image file). Here's the page and script: http://www.agwprefinished.com/handpainted.asp Code: <SCRIPT LANGUAGE="JavaScript"> <!-- /* Script by FPMC at http://jsarchive.8m.com Submitted to JavaScript Kit (http://javascriptkit.com) For this and 400+ free scripts, visit http://javascriptkit.com */ //set image paths src = [ "images/faux-stone.jpg", "images/dining-inlay.jpg", "images/dining-inlay-detail.jpg", "images/faux-inlaid-marble-limestone.jpg", "images/faux-marble-inlay-manhattan.jpg", "images/foyer-inlay.jpg", "images/foyer-inlay-detail.jpg", "images/weathered-grain-1.jpg", "images/weathered-grain-detail.jpg", "images/weathered-grain-2.jpg", "images/weathered-grain-3.jpg", "images/ebonized-oak.jpg", "images/aged-oak.jpg", "images/ebonized-oak-transition.jpg", "images/sample.jpg", "images/faux-marble-tile.jpg", "images/faux-marble-tile-2.jpg", "images/faux-marble-medallion.jpg", "images/metallic-1.jpg", "images/metallic-2.jpg", "images/painted-pattern-bath.jpg", "images/painted-pattern-detail.jpg", "images/faux-parkay-4.jpg", "images/faux-parkay-3.jpg", "images/faux-parkay-2.jpg", "images/border-stencil-1.jpg", "images/border-stencil-2.jpg", "images/monogram.jpg", "images/dining-stencil.jpg", "images/reproduction-border.jpg", "images/reproduction-border-detail.jpg", "images/reproduction-hall.jpg", "images/inlay-pattern-hall.jpg", "images/modello-samples-1.jpg", "images/modello-samples-2.jpg", "images/pavlosk-inlay-imitation.jpg", "images/st-peter-inlay.jpg", ] //set corresponding urls url = [""] //set duration for each image duration = 4; //Please do not edit below ads=[]; ct=0; function switchAd() { var n=(ct+1)%src.length; if (ads[n] && (ads[n].complete || ads[n].complete==null)) { document["Ad_Image"].src = ads[ct=n].src; } ads[n=(ct+1)%src.length] = new Image; ads[n].src = src[n]; setTimeout("switchAd()",duration*1000); } function doLink(){ location.href = url[ct]; } onload = function(){ if (document.images) switchAd(); } //--> </SCRIPT> Trying to use a "for" loop to cycle through an array and compare values; if the values are equal, then it displays a message about the team, etc. Code: <html> <head> <title>Javascript Colors!</title> <script type="text/javascript"> var teamcolors = ["blue","orange","Auburn Tigers","Yuck!","black","red","Georgia Bulldogs","Congratulations!","yellow","black","Georgia Tech","Awesome!"] function changeBGColor() { document.body.bgColor = prompt("What color should the background be?","Put ANY color here!"); checkForTeamColors(); } function changeTXTColor() { document.getElementById("text").style.color = prompt("What color should the text be?","Put ANY color here!"); checkForTeamColors(); } function checkForTeamColors() { var bgcolor = document.body.bgColor var txtcolor = document.getElementById("text").style.color var loopcount = 1 while (loopcount <= 12) { if ( (bgcolor == teamcolors[loopcount] && txtcolor == teamcolors[loopcount + 1]) || (bgcolor == teamcolors[loopcount + 1] && txtcolor == teamcolors[loopcount]) ) { alert("You have picked the team colors of " + teamcolors[loopcount + 2] + ". " + taemcolors[loopcount+3]) } loopcount = loopcount + 4; } } </script> </head> <body> <p id="text" align="center">This text will change color if you want to. <br> Maybe try a certain combination, like Orange and Blue, or Red and Black?<br></p> <button onClick="changeBGColor()">Click me to change the BG Color!</button> <button onclick="changeTXTColor()">Click me to change the text Color!</button> <p id="variables"></p> <script type="text/javascript" document.getElementById("variables").innerHTML = ( bgcolor + " " + txtcolor ) </body> </html> Hi Chaps, I have a PHP loop script that returns Job Information for each Project. What I've got so far is an Export to Excel (2007) function that displays the Project information on 1st tab, and the Job information on the 2nd. The problem I've got is that the Export to Excel function, gathers the information from the HTML table ID, but when looping through the data (resulting in more than 1 Job for a Project), the only way I can differentiate is to use some PHP code, something like: Quote: id="tbl_job_<?php echo $job_id; ?>" What I basically want is to store the information for each Job on a different Excel tab. But whart I have seems to break the javascript: Code: <script language="javascript" type="text/javascript"> function ExportToExcel() { var xlApp = new ActiveXObject("Excel.Application"); // Silent-mode: xlApp.Visible = true; xlApp.DisplayAlerts = false; var xlBook = xlApp.Workbooks.Add(); xlBook.worksheets("Sheet1").activate; var XlSheet = xlBook.activeSheet; XlSheet.Name="Project"; // Store the sheet header names in an array var rows = tbl_project.getElementsByTagName("tr"); var columns = tbl_project.getElementsByTagName("th"); var data = tbl_project.getElementsByTagName("td"); // Set Excel Column Headers and formatting from array for(i=0;i<columns.length;i++){ XlSheet.cells(3,i+1).value= columns[i].innerText; //XlSheetHeader[i]; } //run over the dynamic result table and pull out the values and insert into corresponding Excel cells var d = 0; for (r=4;r<rows.length+3;r++) { // start at row 2 as we've added in headers - so also add in another row! for (c=1;c<columns.length+1;c++) { XlSheet.cells(r,c).value = data[d].innerText; d = d + 1; } } //autofit the columns XlSheet.columns.autofit; xlBook.worksheets("Sheet2").activate; var XlSheet2 = xlBook.activeSheet; XlSheet2.Name="Job"; // Store the sheet header names in an array var rows = tbl_job.getElementsByTagName("tr"); var columns = tbl_job.getElementsByTagName("th"); var data = tbl_job.getElementsByTagName("td"); // Set Excel Column Headers and formatting from array for(i=0;i<columns.length;i++){ XlSheet2.cells(3,i+1).value= columns[i].innerText; //XlSheetHeader[i]; } //run over the dynamic result table and pull out the values and insert into corresponding Excel cells var d = 0; for (r=4;r<rows.length+3;r++) { // start at row 2 as we've added in headers - so also add in another row! for (c=1;c<columns.length+1;c++) { XlSheet2.cells(r,c).value = data[d].innerText; d = d + 1; } } //autofit the columns XlSheet2.columns.autofit; // Make visible: xlApp.visible = true; xlApp.DisplayAlerts = true; CollectGarbage(); //xlApp.Quit(); } </script> This is the bit I think I need to change to get the JS to work, but I'm a bit out of my depth! Quote: xlBook.worksheets("Sheet2").activate; var XlSheet2 = xlBook.activeSheet; XlSheet2.Name="Job"; // Store the sheet header names in an array var rows = tbl_job.getElementsByTagName("tr"); var columns = tbl_job.getElementsByTagName("th"); var data = tbl_job.getElementsByTagName("td"); Any helpor guidence would be awesome! Hi guys I have what i think is a fairly simple script used for an image gallery with a next and back button. It seems to work pretty well, but i would like to make the gallery scroll round... ie when the user reaches the last picture and presses the next button again, the first image will be displayed again - and visa versa with the first image and the back button. Below is my JS, can post the small amount of HTML that calls it if necessary. Any help MUCH appreciated, been messing around with it for ages and being the newbie i am, can't seem to find any way of doing it Code: // List image names without extension var myImg= new Array(6) myImg[0]= "performance2011"; myImg[1]= "performance2005"; myImg[2]= "performance2006"; myImg[3]= "performance2007"; myImg[4]= "performance2008"; myImg[5]= "performance2009"; myImg[6]= "performance2010"; // Tell browser where to find the image myImgSrc = "../images/"; // Tell browser the type of file myImgEnd = ".jpg" var i = 0; // Create function to load image function loadImg(){ document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd; } // Create link function to switch image backward function prev(){ if(i<1){ var l = i } else { var l = i-=1; } document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd; } // Create link function to switch image forward function next(){ if(i>5){ var l = i } else { var l = i+=1; } document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd; } // Load function after page loads window.onload=loadImg; What I am trying to do is when a user click on an image button, 10 new windows will oppen. So, I created a For Loop function for that. Here is my code below: function clickk () { for (i=0; i<=10, i++) { window.open('annoying1.html','Annoying LOL','width=900, height=900') ;} } However, the window does open but not 10 times. Can you help me? Thank you... I have done a basic while loop code but I can not figure out how to make the output print in 4 lines containing 5 numbers each. Can anyone tell me how to specify the number of output that appears on each line? Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>example</title> </head> <body> <script type="text/javascript"> <!-- var x = 1; var linebreak="<br/>" while (x <= 20) { document.writeln("" + x + " " + ""); x = x + 1; } // --> </script> </body> </html> Hey all, I need help creating a Javascript loop which posts a single static comment to all videos on a website(unless another language would prove to be a better alternative?) I'm not sure where to start and although I have an idea, my lack of programming skills have left me to turn to forums...any help would be greatly appreciated. *not asking for coding necessarily. Links to relative information pertaining to such a program/"loop", and any comments helping me understand what I'm trying to do would be great...I'm just not sure what to search for lol. Im still learning, just need helping starting a project. Thanks. I want to submit form using javascript but as I see javascript doesn't work in php loop. I use this code: Code: <form name="theForm"> <input type=text name="formInput"> <a href="javascript:document.theForm.submit();">Submit</a> </form> and it works fine in ordinary page, but stops working in php loop! I need to use link, not button to submit form. Can anyone please help? Thanks in advance i, Am developing a webform using PL/SQL. Am using javascript to do some form validation Sample if(a =="") { alert("Please enter the first name"); return false; } else if(b =="") { alert("Please enter the last name"); return false; } else if (y !="Test1") { if (y != "Test2") { if (y != "Test3") { alert("Enter the right text"); return false; } } alert("am wrong outside"); } else if(z =="") { alert("Please fill al the fields"); return false; } it passes till alter("am wrong outside") and executes the procedure but doesnt goes to the last else part. I want it to go the last else part too. Please help. I have am currently taking over as the developer for this web site, and the developer who left the project unfinished wrote a script. What it does is takes posts from vBulletin forums, for instance News posts, and then it grabs the posts by ID and Title and writes the title on the home page of the web site. The problem right now that I have is the test wraps, you can see what I mean here http://www.netcodeilluminati.com/v2 If you look on the left, I want to make the text cut off after a certain amount of characters with "..." at the end as if there is more to the title but you can't see it. Here is the script: for (x = 0; x < 5; x++) { document.write("<li><div class=\"li_icon\"><img src=\"images/icons/text.png\" alt=\"text\" /></div><div class=\"li_text\">"); document.write("<a href=\"../forums/showthread.php?t="+threads[x].threadid+"\">"+threads[x].title+"</a></div></li>"); } I was wondering how I could go about doing this. Thanks for any future help. -Kevin I am using the counter script below to display a count from 1-36. Does anyone know how to edit the javascript to flash or blink the number 36 a few times, and then loop the script to start over and count from 1-36 again (and again)? Here's the script: <html> <head> <title></title> </head> <script type="text/javascript"> var t, max, i; function Increase(amount) { max = amount; i = parseInt(document.getElementById("count").value); t = setInterval("SetIncrease()", 500); } function SetIncrease() { document.getElementById("count").value = ++i; if(i == max) { clearTimeout(t); } } </script> <body onLoad="Increase(36);"> <input id="count" type="text" value="1" style="width:40px;font-family:georgia;font-size:30px;font-weight:bold;color:#CC0000;border: 0px solid #000000;text-align:right;background-color:#FFFF00;" align="center"> </body> </html> Many thanks! |