JavaScript DIV position

[James Rose]

Hello gang,

 

I have an interesting situation.  I have some Javascript that is working, when used with a HTML file, but for reasons I am not getting, when moved into an asp.net page the position is not working.  The div is being placed at the 0,0 location.  The other properties are working... so what the $%&@ am I doing wrong?

 

Thanks

        var oDiv = document.createElement('div');

        iSize = Math.floor((Math.random() * 32) + 20);
        iRandom = Math.floor((Math.random() * 32) + -32);
        
        iTempTop = ((iTop * i) + iRandom);


        oDiv.className = "BgBubble";
        oDiv.style.position = "absolute";
        oDiv.style.left = 100; //iCenter + iRandom;
        oDiv.style.top = 100; //iTempTop
        oDiv.style.backgroundColor = HexColor;
        oDiv.style.boxShadow =
			'0 0 ' + (iSize + (iSize * 2)) + 'px ' + iSize + 'px ' + HexColor +
			', 0 0 ' + (iSize + (iSize * 3)) + 'px ' + (iSize + (iSize * 2)) + 'px ' + HexColor +
			', 0 0 ' + (iSize + (iSize * 4)) + 'px ' + (iSize + (iSize * 3)) + 'px ' + HexColor;
        oDiv.style.height = iSize;
        oDiv.style.width = iSize;
        oDiv.zIndex = -1;

        document.getElementsByTagName('body')[0].appendChild(oDiv);

[Jose_49]

Have you tried it on another browser? 

 

What about using DragonFly, Firebug, or Debug (IE)

[James Rose]

Have you tried it on another browser? 

 

What about using DragonFly, Firebug, or Debug (IE)

 

Thanks, but yea I gave that a try.    To be specific; The code used with a test HTML file, which has the exact same tags, etc as the ASP.Net page, works fine in IE, Chrome or FF.   When I attempt the same output, even if I hard code the Top and Left values, the divs allways end up at 0 and 0.

[James Rose]

Addendum: I removed everything but the body tag and the issue still occurs.   ...interesting...  annoying, but interesting.

[Jose_49]

Addendum: I removed everything but the body tag and the issue still occurs.   ...interesting...  annoying, but interesting.

Have you tried try and catch statements?

[James Rose]

Have you tried try and catch statements?

 

 

I had not, but I just did and no errors are reported.  I had stepped through the code in Firebug and the lines execute without issue.  Here is the entire function

function loadBubble(iCenter, iColor) {

    try {
        var iSize = 4;
        var frequency = .3;
        var iTop = (window.innerHeight / 10);
        var red = Math.sin(frequency * iColor + 0) * 127 + 128;
        var green = Math.sin(frequency * iColor + 2) * 127 + 128;
        var blue = Math.sin(frequency * iColor + 4) * 127 + 128;
        var HexColor = RGB2Color(red, green, blue);
        var CenterColor = HexColor;
        var iRandom = 0;


        var iTempTop = 0;

        for (var i = 0; i < 8; i++) {
            var oDiv = document.createElement('div');

            iSize = Math.floor((Math.random() * 32) + 20);
            iRandom = Math.floor((Math.random() * 32) + -32);

            iTempTop = ((iTop * i) + iRandom);
            //alert('TempTop: ' + iTempTop);


            //oDiv.className = "BgBubble";
            oDiv.style.position = "absolute";
            oDiv.style.left = 300; //iCenter + iRandom;
            oDiv.style.top = 300; ///iTempTop;  //(iTop * i) + iRandom;
            oDiv.style.backgroundColor = HexColor;
            oDiv.style.boxShadow =
                '0 0 ' + (iSize + (iSize * 2)) + 'px ' + iSize + 'px ' + HexColor +
                ', 0 0 ' + (iSize + (iSize * 3)) + 'px ' + (iSize + (iSize * 2)) + 'px ' + HexColor +
                ', 0 0 ' + (iSize + (iSize * 4)) + 'px ' + (iSize + (iSize * 3)) + 'px ' + HexColor;
            oDiv.style.height = iSize;
            oDiv.style.width = iSize;
            oDiv.zIndex = -1;

            document.getElementsByTagName('body')[0].appendChild(oDiv);
        }
    }
    catch (err) {
        alert('Error: ' + err.message);
    }
}

[Jose_49]

Hmmm. Just out of curiosity... Have you tried adding "px" at the end of each line?

 

 oDiv.style.left = "300 px"; //iCenter + iRandom;

oDiv.style.top = "300 px"; ///iTempTop; //(iTop * i) + iRandom;

 

try this:

 

oDiv.style.left = iCenter + iRandom + 'px';

oDiv.style.top = iTempTop + 'px';

[James Rose]

Hmmm. Just out of curiosity... Have you tried adding "px" at the end of each line?

 

 oDiv.style.left = "300 px"; //iCenter + iRandom;

oDiv.style.top = "300 px"; ///iTempTop; //(iTop * i) + iRandom;

 

try this:

 

oDiv.style.left = iCenter + iRandom + 'px';

oDiv.style.top = iTempTop + 'px';

 

 

ohhh goodness.  I'm an idiot.  I have just spent the past 90 minutes making a testbed with the basics, and it worked in HTML and not the ASP.  And litterally as I was entering a new post with the source code you post this.  I tested it and TaDa!

 

Yep folks, I'm an idiot.  Thank you very much Jose.   Have a great weekend

[Jose_49]

ohhh goodness.  I'm an idiot.  I have just spent the past 90 minutes making a testbed with the basics, and it worked in HTML and not the ASP.  And litterally as I was entering a new post with the source code you post this.  I tested it and TaDa!

 

Yep folks, I'm an idiot.  Thank you very much Jose.   Have a great weekend

Hahah

 

Nah man. I'm glad I've helped you. 

 

This has happened me in the past and will keep happening, because one kinds of smoke some rare weed or something....

[James Rose]

My excuse is that over the last 20 years I have primarily done Windows based apps...  but still, next time your in NYC, the rare weed is on me.