Can someone fix this for me?

**xilovemusic123x** · 03-07-2009, 05:05 AM

I'm making a div creator that takes the positions and makes a div on that position and then takes the second positions and makes that the width and height. However, I can't seem to get it to work properly..

Can someone please help me fix it?

EDIT: Thank you so much to everyone who helped! I'm still needing help and you can find my post below.

**magicyte** · 03-07-2009, 05:15 AM

var de = document.documentElement;

What's up with that? That may be your problem. There is no such property of document.

Edit: I was reading some JavaScript code the other day and saw "document.documentElement". It is actually a property of document. Whoops!

**jscheuer1** · 03-07-2009, 07:12 AM

Originally Posted by magicyte

What's up with that? That may be your problem. There is no such property of document.

Yes there is. It's the <html> tag object.

This is completely wrong though:

Code:

<script type="text/css">
.selBox {
position: absolute;
border: 2px solid #00FFFF;
overflow: hidden;
width: 0;
height: 0;
z-index: 9999991;
</script>

Should be style. There could be other problems.

**Snookerman** · 03-07-2009, 09:30 AM

Also, make sure you close the curly brackets:

Code:

<style type="text/css">
.selBox {
position: absolute;
border: 2px solid #00FFFF;
overflow: hidden;
width: 0;
height: 0;
z-index: 9999991;
}
</style>

Good luck!

**jscheuer1** · 03-07-2009, 01:53 PM

Yeah, and there were other problems. This whole thing is a bit poorly thought out. But doing it like so, at least it appears to work, though I have no idea for sure if I've maintained the original intent or not:

Code:

<html>
<head>


<style type="text/css">
.selBox {
position: absolute;
border: 2px solid #00FFFF;
overflow: hidden;
width: 0;
height: 0;
z-index: 9999991;
}
</style>

<script type="text/javascript">
document.onmousemove = getPosition;
var divAlreadycreated = false;
var divWidthHeightcheck = false;
var NewY = 0;
var NewX = 0;
var newdiv, x, y;

function getPosition(e) 
    {
        e = e || window.event;
        var cursor = {x:0, y:0};
        if (e.pageX || e.pageY) {
            cursor.x = e.pageX;
            cursor.y = e.pageY;
        } 
        else {
            var de = document.documentElement;
            var b = document.body;
            cursor.x = e.clientX + 
                (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
            cursor.y = e.clientY + 
                (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
        }
       
        x = cursor.x;
        y = cursor.y; 
        document.forms[0].MouseY.value = y;
        document.forms[0].MouseX.value = x;
    }

function getHeightWidth(e) 
    {
        if ( divWidthHeightcheck )
        {
        document.forms[0].Width2.value = x;
        document.forms[0].Height2.value = y;
        findingHeightWidth();
        }
        else
        {
        divWidthHeightcheck = true;
        document.forms[0].Width.value = x;
        document.forms[0].Height.value = y;
        createDiv();
    }
}

function createDiv(e)
    {
        newdiv = document.createElement('div');
        var divIdName = 'testDiv';
        newdiv.setAttribute('id',divIdName);
        newdiv.style.width = 0;
        newdiv.style.height = 0;
        newdiv.style.left = x;
        newdiv.style.top = y;
        newdiv.style.position = "absolute";
        newdiv.style.border = "1px solid #000";
        document.body.appendChild(newdiv); 
        divAlreadycreated = true;
}

function findingHeightWidth()
    {
        var newdivHeight = y - NewY;
        var newdivWidth = x - NewX;
        if( newdivHeight < 0 )
        {
        newdiv.style.height = Math.abs( newdivHeight );
        }
        else
        {
        newdiv.style.height = newdivHeight;
        }
        if( newdivWidth < 0 )
        {
        newdiv.style.width = Math.abs( newdivWidth );
        }
        else
        {
        newdiv.style.width = newdivWidth;
    }
}

function divMove()
    {
        if ( divAlreadycreated )
        {
        findingHeightWidth();
        }
    }
</script>

</head>
<body onmousemove="divMove();" onclick="getHeightWidth();"><form name"anyName">
X: <input type="text" name="MouseX" size="4" readonly>
Y: <input type="text" name="MouseY" size="4" readonly>
X: <input type="text" name="Width" size="4" readonly>
Y: <input type="text" name="Height" size="4" readonly>
X: <input type="text" name="Width2" size="4" readonly>
Y: <input type="text" name="Height2" size="4" readonly>
</form></body>
</html>

Note: This will not work with a valid DOCTYPE because no units are specified for dimensions, top, or left. That's how it was, and I didn't change that part, as it now does 'work' in quirks - how the code was originally posted.