|
JavaScript - Slow Settimeout Issue - Moving Divs
So I am trying to create a scrolling device that will allow you to scroll tables left and right. Here is a link:
http://thecaligarmo.com/test/work/move.html I have it working and it works pretty well, but I can't seem to get it to speed up. I want to be able to control the amount of time it takes, but I can't seem to make it take less than 10 seconds. The core of the moving js is: Code: var maxMove = 820;// Width of Table + margin on table 2
var duration = 1; // seconds
var mssTime = duration * 1000 / maxMove;
var mssLeft = (moveLeft)?0:(maxMove*-1);
function mssMoveDiv(){
moveDiv();
function moveDiv(){
if(mssLeft > 0 || mssLeft<maxMove*-1){finishMove(); return;};
if(moveLeft){mssLeft -= 1;} else {mssLeft += 1;}
divIn.style.left=mssLeft+'px';
setTimeout(moveDiv,mssTime);
}
function finishMove(){
document.getElementById('pagingTable').parentNode.removeChild(document.getElementById('pagingTable'));
divIn.style.left='0px'
newTable.id='pagingTable';
}
}
(Note that some parts have been left out [such as table generation and stuff] but all details can be found on the site link posted above) If you need more details/js/css/html just go to the link above to look at the whole thing. It was a lot so I didn't want to burden you all with EVERYTHING. Here are the links to the files: HTML: http://thecaligarmo.com/test/work/move.html JS: http://thecaligarmo.com/test/work/paging.js CSS: http://thecaligarmo.com/test/work/paging.css Similar TutorialsI have 2 DIVs on a page, Div1 and Div2. I want to copy the contents from Div1 into Div2, then suppress the contents of Div1. I want to do this when the page loads. This is what I did: Code: <div id="Div1" style="color:red;">This is the text to be moved</div>
<div id="Div2" style="color:green;"></div>
<script type="text/javascript">
function swapIt()
{
document.getElementById('Div2').innerHTML = document.getElementById('Div1').innerHTML;
document.getElementByID('Div1').style.display = "none";
}
onload = swapIt();
</script>
This, of course, does not work, but I don't know javascript well enough to figure out why. Could someone give me an example of what would work in this case? The left-hand (main) menu for my website (www.displaycentre.co.uk) is extremely slow on IE8 on some PCs yet fine on others. No problems with other browsers at all. I know that the menu is huge but cannot understand why the speed is fine on some (even low spec) PCs and yet it is painfully slow on others. It is slow on all of my work PCs (some with 512Mb RAM others have 2GB!) and also my PC at home (which is brand new this weekend, 2Gb RAM and only Windows XP + all updates loaded so far). Any body out there got any ideas? My developer is simply putting it down to the way in which IE8 copes with such huge menus? Thanks in anticipation. Chris hey all, Registered for this forum because I found this thread about hiding and unhiding divs. http://www.codingforums.com/archive/.../t-161166.html I have tried to implement this on a site that I am building and have come up with a weird result. My javascript is very poor so debugging this has become a real headache. Hopefully someone can help out. The issue is that when I click the button to unhide the hidden div, it hides everything and reveals the hidden div on its own without everything else. Hopefully that makes sense. Current code looks as follows- Code: <script type="text/javascript">
function unhide(divID) {
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].className='hidden';
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.hidden {
display: none;
}
.unhidden {
display: block;
}
</style>
</head>
<body>
<div class="container" id="wrap">
<!-- MODULE START -->
<div id="web" class="panelContainer">
<div id="panelBtnContainer">
<li><a href="#" onclick="unhide('test1'); return false;" class="web"><span>Button Text</span></a></li>
</div>
<div class="leftContainer">
<div class="panelShadow"></div>
<div class="panelThumb">
<img src="images/works/t-test.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
</div>
</div>
<div class="rightContainer">
<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
</div>
</div>
<div id="test1" class="hidden">
<p>Testing :)</p>
</div>
<!-- MODULE END -->
<!-- MODULE START -->
<div id="web" class="panelContainer">
<div id="panelBtnContainer">
<li><a href="#" onclick="unhide('test2'); return false;" class="web"><span>Button Text</span></a></li>
</div>
<div class="leftContainer">
<div class="panelShadow"></div>
<div class="panelThumb">
<img src="images/works/t-test02.jpg" height="233" width="300" alt="Test Thumbnail" title="Test Thumbnail" />
</div>
</div>
<div class="rightContainer">
<h2>Neque porro quisquam est qui dolorem adipisci velit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
</div>
</div>
<div id="test2" class="hidden">
<p>Testing :)</p>
</div>
<!-- MODULE END -->
</div>
Any help would be greatly appreciated. Thanks in advanced I would like to think I understand the fundamentals of JavaScript, but I am beating my head with this and it seems so simple. I am trying to set the current div as visible, then set the old div as not visible, then set the new div id as a variable so that it can be used next. all it is doing is setting the new div to visible, and not setting the variable to be used. here is my code. this is the function [code] var Gp; function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; document.getElementById(Gp).style.display = 'none'; Gp = id; } [code] this is the html [code] <div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6389/thumb2.jpg" onclick="setVisibility('img_name1', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6389/thumb1.jpg" width=68 height=90 /></a></div> <div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6396/thumb2.jpg" onclick="setVisibility('img_name2', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6396/thumb1.jpg" width=68 height=90 /></a></div> <div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6403/thumb2.jpg" onclick="setVisibility('img_name3', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"> <div id='img_name1' style='display:none'>new 1 image</div> <div id='img_name2' style='display:none'>new image 2</div> <div id='img_name3' style='display:none'>new 1 image 3</div> [code] Any help would be greatly appreciated. Cheers - James Hello - I've got this lovely little animation that slides some div fields to the right a short distance. Everything works except the setTimeout (located in the SlideIn function). It simply 'jumps' without taking any time at all. I've tried a bunch of stuff: changed the amount of time from 100 to 10000 changed it from var t = setTimeout("SlideIn()", 1000) SlideIn with/without the brackets, with/without the quotation marks. SlideIn() SlideIn(i) SlideIn(label_id_fixed) SlideIn(label_id_no) Just about at the end of my rope, and so many different combinations I'm forgetting which ones I've tried and which I haven't. I know it is looping through because it gets to the end position and allows the other JavaScript functions to work ok. So it is not getting 'stuck' or anything like that. Here is the complete code (there is a style sheet located separately). Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
</head>
<script type="text/javascript">
//<![CDATA[
window.onload=starter;
function starter(){
collapseMenu();
SetUpAnimation();
}
function SetUpAnimation(){
if (document.querySelectorAll)
{
labels = document.querySelectorAll('div.label');
}
else if (document.getElementsByClassName)
{
labels = document.getElementsByClassName('label');
}
//loops through the labels
if (labels){
for (var i=1; i <= labels.length; i++)
{SlideIn(i);
}
}
}
function SlideIn(label_id_no){
var label_id_fixed = label_id_no;
var endPos = 150;
var currentPos = 0;
for (currentPos = 1; currentPos < 60; currentPos++){
var label_id_name = "label" + label_id_fixed;
document.getElementById(label_id_name).style.left = currentPos + "px";
setTimeout("SlideIn", 1000);
}
}
function collapseMenu(){
var elems = null;
var labels = null;
if (document.querySelectorAll)
{
elems = document.querySelectorAll('div.elements');
labels = document.querySelectorAll('div.label');
}
else if (document.getElementsByClassName)
{
elems = document.getElementsByClassName('elements');
labels = document.getElementsByClassName('label');
}
if (elems){
for (var i=0; i < elems.length; i++)
{
elems[i].style.display="none";
}
for (var i=0; i < labels.length; i++)
{
labels[i].onclick=showBlock;
}
}
}
function showBlock(evnt){
var theEvent = evnt ? evnt : window.event;
var theSrc = theEvent.target ? theEvent.target: theEvent.srcElement;
var itemId = "elements" + theSrc.id.substr(5,1);
var item = document.getElementById(itemId);
if (item.style.display=='none'){
item.style.display='block';
}else{
item.style.display='none';
}
}
//]]>
</script>
</head>
<body>
<div class="label" id="label1">this is a label</div>
<div class="elements" id="elements1">
<p>painting</p><br />
<p>photography</p><br />
</div>
<div class="label" id="label2">this is another label</div>
<div class="elements" id="elements2">
<p>sculpture</p><br />
<p>ceramics</p><br />
</div>
</body>
</html>
Okay, for some reason the setTimeout isn't working for me, and I have no idea why. I've tried everything and Googled even more. If anyone has any ideas, I'll be grateful Code: function display(min,sec) {
if (sec <= 0) {
sec=60;
min-=1;
}
if (min <= -1) {
sec=0;
min=0;
tEnd();
} else {
sec = sec-1;
}
if (sec<=9) { sec = "0" +sec; }
document.form.time.value=min+":"+sec;
SM = window.setTimeout("display("+min+","+sec+")",1000);
}
function tEnd() {
window.clearTimeout(SM);
alert('Your time is up!');
}
Thanks in advance. Is there another JS function that I can use to force a time delay without having the code continue to run? I'm using the setTimeout() function but the call to this function doesn't stop the code flow. I need to stop the code flow while waiting. I guess I need a Sleep() type of JS function. What I'm trying to do is display some blank text on the screen using a for loop (I'm using <BR> to give the appearance of "opening up" a vertical window section in the browser) and I need this 'text' to complete before allowing the following code in the function to execute. The following code will display a Table with rows of data. I'm trying to use a timing function to give a visual impression of a window opening up just before the data displays. Thanks... Hello guys I need to get something fun! with setTimeout function! I am n00b! so be patent please. I need when <body onload="Myfunc();"> fires, that function should show "Please wait...!" or "Loading...". for , say 5 seconds!. then it disappear. I used setTimeout with that but it didn't do what I wanted! here is my code: PHP Code: function Myfunc(){ document.getElementById("ss2").innerHTML = "Loading..."; setTimeout("Myfunc();", 5000); } // where id="ss2" is the place to display the string "loading..." ! and a one more question ! can I do something like a while loop! where it holds *i* value as seconds! and for every second it passes it should print out a string I make it up ! let say loop for 3 seconds ! So, when seconds = 0 then display "string of second 0" and stick it in there, then go to the next second when it is exactly = 1 then display "new line with string of second 1" and stick it in there, then do to the last second when it is exactly = 2 then display " new line with string of second 2" and stick it in there, exit the loop! is there anyway to do that? please note that I am a n00bie ! help is much appreciated ! Hi trying to load a random swf files using setTimeout please help Code: </head><script type="text/javascript">
var numberOfSongs = 3
var sound = new Array(numberOfSongs+1)
sound[1]= "number/1.mp3"
sound[2]= "number/2.mp3"
sound[3]= "number/3.mp3"
function randomNumber(){
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
return randomLooper
}
var randomsub = randomNumber()
var soundFile = sound[randomsub]
document.write ('<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=false>')
setTimeout(randomNumber,4000);
</script>
<body onload="randomNumber()">
Here is my code: Quote: <script> var confirmationPageURL = "http://google.com"; // Add handler for Ecwid's OnPageLoad event if ( typeof(Ecwid) == 'object' && typeof(Ecwid.OnPageLoad) == 'object' ) { Ecwid.OnPageLoad.add(function(page) { // Redirect user if needed if ( typeof(page) == 'object' && 'ORDER_CONFIRMATION' == page.type ) { window.location = confirmationPageURL; window.setTimeout(confirmationPageURL, 8000, true); } }); } </script> I'm just doing a simple redirect after a purchase is made from a shopping cart I use on my site. However, I can't get the window.setTimeout working. The page is instantly redirected and not 8 seconds. I'm sure I have wrong syntax or placement. Who knows. I know nothing about JS. Any help is appreciated. Thank you Hello I am just learning, what am I doing wrong here , I'm trying to display an image after 3 seconds after the page opens with js from an external file listed below: Code: <html>
<title>Insert Page</title>
<body>
var call;
call=("<?php echo $image1;?>");
function myfunction()
{
setTimeout =(call, 3000);
}
document.write(myfunction);
</body> </html> Hi all, I am trying to do a simple "animation" of the background color of a button. I want it to do 10 different colors in the course of 1 second. I have a loop like this (pseudo code): Code: var e = "the button element";
var c = 10;
while (c--) {
setTimeout(function(){ e.style.backgroundColor=(random color); }, (c * 100));
}
I expect that 10 instances of "setTimeout" would be created, each one timing out 0.1 seconds later than the previous one, giving me an "animation" of 10 different colors over the course of 1 second. Strangely, it doesn't work. All it does is WAIT one second, then set the background to the LAST color. What am I doing wrong? I can't see it. Thanks! -- Roger Edit: I also tried to do the loop forward instead... no difference. I have a code snippet here. Everything in it works as expected. However the setTimeout does not seems to be working. It should be an infinite loops updating the contents of the table every 5 sec. However the table shows once when first called and the setTimeout never seems to kick in. Any help in getting that loop to work would be greatly appreciated. Code: statTick : function (){
var t = Tabs.Train;
var m = '<TABLE class=pbTabPad>';
clearTimeout (t.statTimer);
for (var c=0; c<Seed.s.cities.length; c++){
var last = serverTime();
var trains = [];
m += '<TR><TD>City #'+ (c+1) +' ';
for (var t=0; t<Seed.s.cities[c].jobs.length; t++){
if (Seed.s.cities[c].jobs[t].queue=='units' && Seed.s.cities[c].jobs[t].unit_type)
trains.push (Seed.s.cities[c].jobs[t]);
}
if (trains.length == 0)
m += 'idle</TD></TR>';
else {
for (var j=0; j<trains.length; j++){
var left='', tot='';
if (j==0)
left = 'Training ';
else if (j==trains.length-1)
tot = '   <B>('+ timestrShort(trains[j].run_at-serverTime()) +')</b>';
m += left + trains[j].quantity +' '+ trains[j].unit_type + ' '+ timestr(trains[j].run_at-last, true) + tot +'</TD></TR>';
last = trains[j].run_at;
}
}
}
document.getElementById('pbtrnTrnStat').innerHTML = m +'</table>';
t.statTimer = setTimeout (t.statTick, 5000);
},
I want to delay image load for 3 seconds and here is the code but it doesnt work... HELP PLEASE <img id="img444" src="http://imakeinternet.com/squeeze/finish.png" style="display: none;"> <script> function showimage() { document.getElementById("img444").src="http://imakeinternet.com/squeeze/finish.png"; } setTimeout ("showimage();", 3000); </script> So I have a very simple block of code: Code: function successfulReg() {
alert(1);
// $.colorbox({ html: '<p>Registration successful!</p>' });
}
if ($('#regSuc').size()) setTimeout('successfulReg', 1000);
If the regSuc item exists (1 second after the page loads), I want to bring up a lightbox. As I couldn't get this to work, I tried to get an alert to show up. This did not work either. I changed the setTimeout to Code: if ($('#regSuc').size()) setTimeout('alert(1), 1000);
Which did work. And I tried successfulReg and succesfulReg(), neither of which worked. Am I missing some basic element to getting a timeout to work? I'm trying to set a timer when someone moves off of an image. When I try my event without the timer there are no problems but it throws syntax or object expected errors (if I play with the quotes some) when I add in the timer. This is inline code on the image. onMouseout="newsTimer = setTimeout("Effect.toggle('news', 'slide')", 500)"; It is likely something simple I am overlooking but I cannot find any answers after a long search. Thank you for any and all help. I wrote the code below to animate a roll of dice. It does iterate 10 times, as the code intends, but for some reason it doesn't pause in between. Also, how can I get it to return the final dice value to the calling function? Code: DiceValue=RollDiceAnimated(1)
function RollDiceAnimated(RollIteration) {
var Die1;var Die2
var RollSpeed=100
Die1=0;while(Die1<1 || Die1>6){Die1=Math.floor(Math.random()*7)}
Die2=0;while(Die2<1 || Die2>6){Die2=Math.floor(Math.random()*7)}
document.getElementById("Dice1").src="Images_Dice/Dice" + Die1 + ".jpg"
document.getElementById("Dice2").src="Images_Dice/Dice" + Die2 + ".jpg"
if(RollIteration<10){
var tempval=setTimeout(RollDiceAnimated(RollIteration+1),RollIteration*RollSpeed)
}
else{return Die1+Die2}
}
Code: function funt()
{
var link = document.getElementsByClassName("class")[0];
if(link != null)
{
var i = 0;
if(check != link.childNodes[i])
{
link.childNodes[i].click();
check = link.childNodes[i];
}
else
{
window.location = "website"
}
}
else
{
if(document.getElementById('enbut').value != "some value")
{
document.getElementById('id').click();
}
window.location = "website"
}
t=setTimeout("funt()",3000);
}
with this i'm trying to get it to loop every 3 seconds using the settimeout function at the end of the loop. each time i run this it just runs once and exits. anyone know what i'm doing wrong? I'm working on a disjointed rollover, with several links changing an image in another location. There is a default image that appears when the page opens and whenever you roll off any of the links. Initially, the problem was that mousing from one link to the next caused a quick flash of the default image because there is a little space between these links. To address that, I added a time out to keep the default image from appearing immediately on onmouseout. Now, when I mouse from one link to the next I get a smooth transition, but then the delayed onmouseout function kicks in while still hovering over a link. How can I make hovering over a new link override this delayed onmouseout? Here's the script: Code: <script type="text/javascript">
window.onload = preloader()
function preloader(){
var pic1 = new Image();
pic1.src = "images/cover1.jpg";
var pic2 = new Image();
pic1.src = "images/cover2.jpg";
var pic3 = new Image();
pic1.src = "images/cover3.jpg";
var pic4 = new Image();
pic1.src = "images/cover4.jpg";
}
function bookInfoSwap(imgSrc,ID,bInfo) {
document.getElementById("covers").src = imgSrc;
document.getElementById("courseID").innerHTML = ID;
document.getElementById("bookInfo").innerHTML = bInfo;
}
function swapDelay() {
setTimeout("bookInfoRevert()",3000);
}
function bookInfoRevert() {
document.getElementById("covers").src = "images/covers.gif";
document.getElementById("courseID").innerHTML = " ";
document.getElementById("bookInfo").innerHTML = " ";
}
</script>
...and a couple of the links: Code: <a href="http://www.mymathlab.com/" target="_blank" onmouseover="bookInfoSwap('images/cover6.jpg','Self Study Course ID: <br />cos68804','Billstein, <em>A Problem Solving approach to Mathematics for Elementary School Teachers, 9/e and Custom Edition</em>');" onmouseout="swapDelay();" class="courseTab">Math 10/11</a>
<a href="http://www.mymathlab.com/" target="_blank" onmouseover="bookInfoSwap('images/cover4.jpg','Self Study Course ID: <br />cos59796','Sullivan, <em>Statistics: Informed Decisions Using Data, 3/e</em>');" onmouseout="swapDelay();" class="courseTab">Math 21</a>
Thanks. [CODE] function slide(dir, i) { //getW() gets the width of the window //i is initally set to 0 var w = getW(); if(i < w) { document.getElementById('page').style.left = (document.getElementById('page').offsetLeft - 1)+"px"; i++; setTimeout("slide("+dir+", "+i+")", 100); } } [/ CODE] the function executes from it's initial calling but never calls itself back up |
|||||||