1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to make DIV look like flying?

Discussion in 'JavaScript' started by totally beginner, Jul 17, 2005.

0
  1. #1
    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?:confused:
    how to make a delay in javascript?
    anyone know a better way to move DIV coordinate?
     
    totally beginner, Jul 17, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    J.D., Jul 17, 2005 IP
  3. totally beginner

    totally beginner Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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 :p

    I want to create menu that can fly at different speed.
    In a page, at least 30 different speed flying menu.....

    any other sugestion?
     
    totally beginner, Jul 18, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You're calling it every millisecond and running a tight loop that is not doing anything in the middle - of course it will be slow! I bet your whole machine is running slow when you are executing your script - you are pegging the entire CPU! Call setTimeout once every 100 milliseconds and move the faster DIV on every call and the slower one on every Nth call. Don't use a loop in the middle.

    J.D.
     
    J.D., Jul 18, 2005 IP
  5. totally beginner

    totally beginner Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I don't have idea how to check each speed of DIV, if I can't use loop.......
    I AM TOO BEGINNER:rolleyes:

    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:eek:
     
    totally beginner, Jul 18, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    There are different kinds of loops. Take a closer look at yours:

    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:

    <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>
    Code (markup):
    This code isn't optimized, but you get the idea.

    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.
     
    J.D., Jul 19, 2005 IP
  7. totally beginner

    totally beginner Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    nice script :eek:
    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?
     
    totally beginner, Jul 20, 2005 IP
  8. spondishy

    spondishy Peon

    Messages:
    735
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #8

    I think setTimeOut may do what you want:

    http://www.devguru.com/technologies/ecmascript/quickref/win_settimeout.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.
     
    spondishy, Jul 20, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Oops - didn't notice a bug. It should be:

    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.

    It most certainly does. Try another browser - it may be just a coincidence.

    J.D.
     
    J.D., Jul 20, 2005 IP
  10. totally beginner

    totally beginner Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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)[19]==1) //check if the DIV allowed to fly
    {
    genvar[14]=1
    if ((genvar[8] >= (groupcreatedlist2)[18]))
    {
    var selesai=0
    var belokframegc="window."
    if ((groupcreatedlist2)[5]!="") belokframegc=("window.top.frames."+(groupcreatedlist2)[5]+".")
    //groupcreatedlist2)[5] is name of a FRAME that contain the DIV
    if (templeft!=(groupcreatedlist2)[20]) templeft+=tempdx; else selesai++

    if (temptop!=(groupcreatedlist2)[21]) temptop+=tempdy;else selesai++
    //two line above to check if the DIV already on their destination coordinate
    if (selesai==2) (groupcreatedlist2)[19]=0
    //if the DIV already on it's destination, don't allow to fly
    eval(belokframegc+"document.all."+groupcreatedlist+".style.pixelLeft="+templeft)
    eval(belokframegc+"document.all."+groupcreatedlist+".style.pixelTop="+temptop)
    //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?:confused:

    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?
     
    totally beginner, Jul 21, 2005 IP