Results 1 to 6 of 6

Thread: Can someone fix this for me?

  1. #1
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Can someone fix this for me?

    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.
    Last edited by xilovemusic123x; 03-07-2009 at 09:11 PM.

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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!
    Last edited by magicyte; 03-07-2009 at 09:31 PM.

  3. The Following User Says Thank You to magicyte For This Useful Post:

    xilovemusic123x (03-07-2009)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by magicyte View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xilovemusic123x (03-07-2009)

  6. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. The Following User Says Thank You to Snookerman For This Useful Post:

    xilovemusic123x (03-07-2009)

  8. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xilovemusic123x (03-07-2009)

  10. #6
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Nevermind problem solved! Thank you so much everyone!
    Last edited by xilovemusic123x; 03-07-2009 at 11:11 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •