CODEWITHSUNDEEP
htmldoctype
Toza
Toza

Reputation: 1358

HTML5 DOCTYPE doesn't make the code work

I'll just copy all of my code here:
HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Follow cursor</title>
    <script type="text/javascript" src="script.js"></script>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>

<body onmousemove="follow(event)">
    <div id="box"></div>
    <div id="top-left" class="mainn"></div>
    <div id="top-right" class="mainn"></div>
    <div id="lower-left" class="mainn"></div>
    <div id="lower-right" class="mainn"></div>
</body>

CSS

*{
    margin: 0px;
    padding: 0px;
}
html, body{
   height: 100%;
}
div.mainn{
    width: 50%;
    height: 50%;
    float: left;
    position: static;
}
#top-left, #lower-right{
    background-color: #e3e3e3;
}
#top-right, #lower-left{
    background-color: #d1d1d1;
}
#box{
    width: 46px;
    height: 46px;
    border: 2px solid #437325;
    background-color: #98C77B;
    position: absolute;
}

JS

function follow(e){

    var bx = document.getElementById("box");
    var mouseX = e.pageX;
    var mouseY = e.pageY;
    var screenX = window.innerWidth;
    var screenY = window.innerHeight;

    if((mouseX < (screenX / 2)) && (mouseY < (screenY / 2))){
        bx.style.left = e.pageX + 20;
        bx.style.top = e.pageY + 20;
        }
    else if((mouseX > (screenX / 2)) && (mouseY < (screenY / 2))){
        bx.style.left = e.pageX - 70;
        bx.style.top = e.pageY + 20;
    }
    else if((mouseX < (screenX / 2)) && (mouseY > (screenY / 2))){
        bx.style.left = e.pageX + 20;
        bx.style.top = e.pageY - 70;
    }
    else if((mouseX > (screenX / 2)) && (mouseY > (screenY / 2))){
        bx.style.left = e.pageX - 70;
        bx.style.top = e.pageY - 70;
    }
}

Now this code works perfectly in this state, there are 4 divs which hold as visual background and there's a small 50x50px object following a cursor by a certain offset depending on which quarter of the screen the cursor is located at.

The problem starts when I use <!DOCTYPE html> at the beginning of the HTML. The 4 50% wide 50% high divs don't show any more and the 50x50px object is stuck at the top left corner.

I guessed that the box div was trying to follow my cursor, but the other 4 "visual" divs were sticking it up in the corner, so I tried commenting those, yet I got the same result.

Upvotes: 0

Views: 151

Answers (1)

Quentin
Quentin

Reputation: 943108

CSS lengths (other than 0) require units.

bx.style.left = e.pageX + 20;

You don't have a unit in that value you are assigning.

Upvotes: 1

Related Questions