|
|
|
|
#1
Jul 17th 2005, 6:20 am
|
|||
|
|||
|
how to make DIV look like flying?
example:
1 for (var x=0;x<800;x++) 2 { 3 for (var i=0;i<15;i++) 4 { 5 eval("document.all.elm"+i+".style.pixelLeft="+x); 6 } 7 } assume elm1...elm15 is ID of DIV element. at line 5, I try to move all DIV pixel by pixel....but it's too fast (no delay) .... anyone know how to slow down my program?  how to make a delay in javascript? anyone know a better way to move DIV coordinate? 
|
|
#2
Jul 17th 2005, 3:21 pm
|
|||
|
|||
|
Use window.setTimeout and every time your function is called, move your div's by one increment, then call setTimeout again, until you moved your div's far enough. setTimeout has a timeout value, which you can use to control the speed of your div's.
J.D.
|
|
#3
Jul 18th 2005, 1:01 am
|
|||
|
|||
the problem is.........
ehm......the problem is.....what if each DIV fly speed is different?
I try to setTimeout for each DIV, but......that make my script very slow  I also try something like this: var counter=0 //this is general variable var speed=10,20,30,40,50,60,70,80,90,100,110,120,130,140,150 //assume this array for speed of each div (in milisecond) function fly() { counter++ for (var x=1;x<15;x++) { if ((counter % speed[x])==0) moveDIV(eval("elm"+x)) //moveDIV is a function to move the div } setTimeout("fly()",1) } with that method, I only use ONE setTimeout. I think this will increase my program speed. but....it's useless  I want to create menu that can fly at different speed. In a page, at least 30 different speed flying menu..... any other sugestion?
|
|
#4
Jul 18th 2005, 6:02 am
|
|||
|
|||
|
Quote:
J.D.
|
|
#5
Jul 18th 2005, 10:51 pm
|
|||
|
|||
|
no loop....no check speed?
I don't have idea how to check each speed of DIV, if I can't use loop.......
I AM TOO BEGINNER  the problem is "we don't know how many DIV in a page". because.....my program create the DIV when program is running using createElement and appendChild. if I don't know how many DIV, how I can check each DIV's speed without a LOOP Another problem is....the DIV flying when user slide the scrollbar in that page. (using attachEvent) The DIV fly to keep their position in screen. so....when I slide down the scrollbar, all DIV start to fly down. when they are still flying....and I slide up the scrollbar, all DIV directly change their destination (back to top) it's mean.... I need to check each DIV if they already on their destination or not, if their direction is UP or DOWN or LEFT or RIGHT. it's mean....my program will getting slower. I know this problem have solution, because I ever see a script can do that (at least 15 div), and not getting slow. but I can't learn that script, because it's totally encrypted 
|
|
#6
Jul 19th 2005, 8:41 pm
|
|||
|
|||
|
Quote:
var speed=10,20,30,40,50,60,70,80,90,100,110,120,130,140,150 function fly() {counter++ for (var x=1;x<15;x++){ if ((counter % speed[x])==0) moveDIV(eval("elm"+x)) } setTimeout("fly()",1) } What happens when the function is called for the first time? You loop 15 times doing useless (i.e. nothing flies) division and addition. What happens on the second call? Same thing, 15 times... and then again and again and again, until counter hits 10. 150 iterations for one step of one div. Here, knock yourself out: Code:
<html>
<head>
<script type="text/javascript">
var maxspeed = 5;
var minspeed = 1;
var counter = maxspeed;
var flyers = new Array(0);
function rand(max)
{
return Math.floor((Math.random() * max));
}
function Flyer(div)
{
this.div = div;
this.x = rand(600);
this.y = rand(400);
this.dx = rand(1) ? 2 : -2;
this.dy = rand(1) ? 2 : -2;
this.speed = rand(maxspeed) + 1;
}
function createDivs(maxcnt)
{
var body = document.getElementsByTagName("body").item(0);
var div;
var colors = new Array("red", "green", "blue", "black", "yellow", "magenta", "white", "cyan", "orange", "olive", "purple", "fuchsia", "lime", "navy", "aqua", "teal", "silver", "gray");
for(var index = 0; index < maxcnt; index++) {
div = document.createElement("div");
div.style.backgroundColor = colors[rand(colors.length)];
body.appendChild(div);
flyers.push(new Flyer(div));
}
window.setTimeout(moveDivs, 10);
}
function moveDivs()
{
var flyer;
for(var index = 0; index < flyers.length; index++) {
flyer = flyers[index];
if(flyer.speed < counter)
continue;
flyer.x += flyer.dx;
flyer.y += flyer.dy;
if(flyer.x <= 0) {
flyer.x = 0;
flyer.dx *= -1;
}
if(flyer.x >= 550) {
flyer.x = 550;
flyer.dx *= -1;
}
if(flyer.y <= 0) {
flyer.y = 0;
flyer.dy *= -1;
}
if(flyer.y >= 350) {
flyer.y = 350;
flyer.dy *= -1;
}
flyer.div.style.left = flyer.x;
flyer.div.style.top = flyer.y;
}
if(counter-- == minspeed)
counter = maxspeed;
window.setTimeout(moveDivs, 10);
}
</script>
<style type="text/css">
div {position: absolute; top: 0; left: 0; width: 50px; height: 50px; border: 1px solid #999;}
</style>
</head>
<body onload="createDivs(50)">
<div style="width: 600px; height: 400px; border: 1px solid #999;"></div>
</body>
</html>
IE renders these divs smoother and uses about 5% of CPU. FF does not such a good job and slower divs move not as smoothly and FF uses about 25% of CPU. J.D.
|
|
#7
Jul 20th 2005, 1:04 am
|
|||
|
|||
|
which one is faster? variable or property?
nice script
 without MOD operation! oh...I want to ask another question: flyer.x += flyer.dx; flyer.y += flyer.dy; if(flyer.x <= 0) { flyer.x = 0; flyer.dx *= -1; } if(flyer.x >= 550) { flyer.x = 550; flyer.dx *= -1; } if(flyer.y <= 0) { flyer.y = 0; flyer.dy *= -1; } if(flyer.y >= 350) { flyer.y = 350; flyer.dy *= -1; } flyer.div.style.left = flyer.x; flyer.div.style.top = flyer.y; - why you use variable to process the coordinate? why don't directly use flyer.div.style.left ? Is variable processing is faster than element's property processing? - why when I run my script from flashdisk is slower than when I run it from my Harddisk? As I know, before computer run the script, computer load the script to memory. Am I right?
|
|
#8
Jul 20th 2005, 1:19 am
|
|||
|
|||
|
Quote:
I think setTimeOut may do what you want: http://www.devguru.com/technologies/...ettimeout.html As a resource also look at http://www.dynamicdrive.com/ They do all sorts of crazy stuff on there. Just watch out for browser compatibility.
|
|
#9
Jul 20th 2005, 6:47 am
|
|||
|
|||
|
Quote:
flyer.div.style.left = flyer.x + "px"; flyer.div.style.top = flyer.y + "px"; All style properties are strings and take same values as if you'd put in a corresponding CSS property. Even if they were integers, though, keeping everything in a structure as I showed, is a good practice. Quote:
J.D.
|
|
#10
Jul 21st 2005, 7:47 am
|
|||
|
|||
|
why my function still can't faster?
function jalankan ()// same with your moveDIV
{ genvar[14]=0 //if variable above is 0, then no DIV allowed to fly if (genvar[8]++ == 6) genvar[8]=1 //genvar[8] is counter for speed (1 to 5) for (var i=1;i<=groupcreatedlist[0];i++) //groupcreatedlist[0] is amount of the DIV { if ((groupcreatedlist2[i])[19]==1) //check if the DIV allowed to fly { genvar[14]=1 if ((genvar[8] >= (groupcreatedlist2[i])[18])) { var selesai=0 var belokframegc="window." if ((groupcreatedlist2[i])[5]!="") belokframegc=("window.top.frames."+(groupcreatedlist2[i])[5]+".") //groupcreatedlist2[i])[5] is name of a FRAME that contain the DIV if (templeft[i]!=(groupcreatedlist2[i])[20]) templeft[i]+=tempdx[i]; else selesai++ if (temptop[i]!=(groupcreatedlist2[i])[21]) temptop[i]+=tempdy[i];else selesai++ //two line above to check if the DIV already on their destination coordinate if (selesai==2) (groupcreatedlist2[i])[19]=0 //if the DIV already on it's destination, don't allow to fly eval(belokframegc+"document.all."+groupcreatedlist[i]+".style.pixelLeft="+templeft[i]) eval(belokframegc+"document.all."+groupcreatedlist[i]+".style.pixelTop="+temptop[i]) //two line above to set the DIV coordinate } } } if (genvar[14]==1) setTimeout("jalankan()",10) // if some DIV is allowed to fly, then redo } that's my function. do you still see something that make that function slow? if the DIV contain about 70 another div, is can make the script slow? if yes, is there another better way to positioning some image and text in that DIV? I use divs to positioning some images and text in the DIV that I want to make it fly (1 DIV each image)......... is there another element that more eficient than DIV?
|
 |
| Bookmarks |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| how to make a text placed center in DIV? | totally beginner | CSS | 18 | Nov 29th 2005 4:35 pm |
| How to use the <div></div>????? | joshril | CSS | 4 | Mar 15th 2005 12:33 pm |
| How to make 3 column site with DIV only? | misohoni | CSS | 3 | Nov 22nd 2004 2:41 pm |
| How To Make My Text Clear The <div>'s! | Gray | CSS | 3 | Oct 30th 2004 7:15 am |
| New Directory off to a flying start. | compar | Directories | 30 | May 24th 2004 4:48 pm |
