CODEWITHSUNDEEP
javascriptcss
Kayote
Kayote

Reputation: 15617

Using JS to move a div around the page

All,

A total newbie here but could someone please review this code and let me know where I am going wrong?

What effect I am trying to achieve: I have about 9 divs on the webpage, consisting of images and text, the text comes into focus when the user hovers over the image inside the div. I want these divs to 'appear' to be floating around the page.

So what I did: I absolutely positioned the divs using CSS on the webpage. Now I am using JS to move the divs from their position to set positions on the page (will do this for each div) and try to give the effect of random movement to the divs. Here is the code:

        <script language="javascript">
            var x = document.getElementById("cr001").style.left;
            var y = document.getElementById("cr001").style.top;
            var d_x = 75;
            var d_y = 100;
            var interval = 2;                   //move by only 2px...

            function moveImage() {
                if(x < d_x) x = x + interval;
                if(y < d_y) y = y + interval - 1;                   //move y by only 1px

                document.getElementById("cr001").style.left = x+'px';
                document.getElementById("cr001").style.top = y+'px';

                if ((x + interval < d_x) && (y + interval < d_y)) {
                    window.setTimeout('moveImage()',100);
                }
            }   
    </script>   
</head>

<body onload="moveImage()">
    <div id="blackhole"><img src="img/bimg.png" alt="blackhole" /></div>
    <div id="container">

            <div id="cr001" class="twinkles">
                <a href="#">
                <img src="img/cr.png" alt="Co is about your freedom" />
                <span>Co is about your freedom</span></a>

    </div>

</body>

Could someone please explain where I am going wrong?

Cheers,

Upvotes: 0

Views: 4521

Answers (3)

jordancpaul
jordancpaul

Reputation: 2964

Based on the refined post, I now see that you are trying to access body content in the head with var x = document.getElementById("cr001").style.left;

This won't work because when the head is loaded, the body is not ready. You should make an init() function that looks like:

function init(){
    window.x = document.getElementById("cr001").style.left;
    window.y = document.getElementById("cr001").style.top;
    moveImage();
}

and then attach that to the body onload.

EDIT: ok, here is some modified code that does what you want. You can stick this in a file named index.html and launch it in Firefox. I broke it down for you:

<html>
<head> 
    <script language="javascript">
        var d_x = 75;
        var d_y = 100;
        var interval = 2;                   

        //init is used for getting things up and running once the page is loaded
        function init(){
            //optimization: only get the element once
            var el = document.getElementById("cr001")
            x = parseInt(el.style.left);
            if(isNaN(x)){
                //parseInt("") == NaN
                x = 0;
            }
            y = parseInt(el.style.top);
            if(isNaN(y)){
                //ditto
                y = 0;
            }
            //call the nuts of this script
            moveImage();
        }

        //this is mostly unchanged
        function moveImage() {
            if(x < d_x){
                x = x + interval;
            }else{
                //lets keep looping just for fun!
                x = 0;
            }
            if(y < d_y){
                y = y + interval - 1;                   //move y by only 1px
            }else{
                y = 0;
            }

            //optimization: only get the element once
            var el = document.getElementById("cr001")
            el.style.left = x + 'px'; //dont forget to add 'px' back in
            el.style.top = y + 'px';

            //loop, don't use strings in setTimeout since this is basically eval...eval is evil
            setTimeout(moveImage, 100);

        }   
    </script>   
</head>
<body onload="init()">
    <div id="container">
            <!-- IMPORTANT: POSITION IS ABSOLUTE -->
            <div id="cr001" style="position:absolute; width:10px; height:10px; background-color:black"></div>
    </div>
</body>

Upvotes: 1

jordancpaul
jordancpaul

Reputation: 2964

You have an unclosed div. You open <div id="container"> and <div id="cr001" class="twinkles"> but only close one of them

Upvotes: 0

linepogl
linepogl

Reputation: 9335

The problem is here:

document.getElementById("cr001").style.left

This actually returns the css value, which is a string for example '100px' or '10%' etc. Yet, later on your code, you use this value as if it was an integer.

Upvotes: 1

Related Questions