CODEWITHSUNDEEP
javascriptoffset
William Kolee
William Kolee

Reputation: 82

javascript, offsetTop, offsetBottom

I have a paragraph tag in my html id is move, I am trying to move the p tag to slowing fall down while on page load. but my code is not working.......

var speed = 12;
var direction = 1;
var getParagraph = document.getElementById("move");
getParagraph.onmouseover =  moving;

function moving() {
    var bo = getParagraph.offsetHeight;
    var boTop = getParagraph.offsetTop;
    var boBottom = boTop + bo;

    // When right side of the box goes too far - change direction:
    if (boBottom > document.body.offsetHeight) {
        direction = -1;
    }

    // When left side of the box goes too far - change direction:
    if (boTop < 0) {
        direction = 1;
    }

    // Recalculate position:
    getParagraph.style.Top = (boTop + speed * direction)
}

Upvotes: 2

Views: 8110

Answers (1)

DIEGO CARRASCAL
DIEGO CARRASCAL

Reputation: 2129

This is your code with minor changes, and it "works":

JS:

var speed = 12;

    var direction = 1;

    var getParagraph = document.getElementById("move");

    document.getElementById("move").addEventListener("mouseover", moving);
     //getParagraph.onmouseover = moving;

    function moving() {

        console.log("Moving??");
        var bo = document.getElementById("move").offsetHeight;

        var boTop = document.getElementById("move").offsetTop;

        var boBottom = boTop + bo;

        // When right side of the box goes too far - change direction:

        if (boBottom > document.body.offsetHeight) {
            direction = -1;
        }
        // When left side of the box goes too far - change direction:

        if (boTop < 0) {

            direction = 1;
        }
        // Recalculate position:
        document.getElementById("move").style.marginTop = (boTop + speed * direction) + "px";
        speed++;
    }

CSS:

 #move {
           display : block ;
           position : absolute ; 
        }

Hope it helps.

Upvotes: 1

Related Questions