Topic awaiting preservation: Hey, Document! Get The God Damn Fucking Element By the Bloody ID!

I'm writing a script for my site that slides a layer on a page when the user scrolls up and down. It works just fine but for one minor hitch- I apparently have a deficiency understanding the simplest of syntax regarding document.getElementById().

When I hardcode the ID into the .getElementById()-

e.g. document.getElementById("myDiv").style.top = 69

-everything works fine, but when I use a variable (for all those portable applications) it simply fails to work (an 'Object Expected' error, to be exact).

e.g. var flyDiv = "myDiv";
document.getElementById(flyDiv).style.top = 69;

...not only does this fail to work, but what I'm trying to do specifically doesn't want to work. Consider this snippet of code:

function init(){
changeTop('myDiv');
}

function changeTop(theLayer){
document.getElementById(theLayer).style.top = 3;
}

Don't work! I've tried "myDiv", 'myDiv', myDiv, hell, even *myDiv*! Just as useless are "theLayer", 'theLayer', theLayer..

... I'm at my wit's end!! Anybody know the proper way to do this?


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Ah... a breath of fresh air..

Slimer tipped me off that it wasn't this at all, not really, anyway..

This is the script I'm working on:

/***** Javascript by Petskull *****\

\*** [url=http://www.twistedport.com]http://www.twistedport.com[/url]  ***/



var whereItIs = 0;



function slideBox(namey,toppy){

	//document.body.scrollTop

	var sliderName = namey;

	var supposedToBe = document.body.scrollTop + toppy;

	var howMuchMove = (supposedToBe - whereItIs)/8;

	whereItIs = whereItIs + howMuchMove;	// Eh, it'll be there.

	document.getElementById(namey).style.top = whereItIs + "px";

}



function fixBox(divy,uppy){

	var boxID = divy;

	var boxRoof = uppy;

	whereItIs = boxRoof;

	setInterval("slideBox(\""+boxID+"\","+boxRoof+")", 20);

	slideBox(boxID,boxRoof);

}



function init(){

	fixBox('walker',200);

}

this line:
setInterval("slideBox("+boxID+","+boxRoof+")", 20);

...was just inputting the value of 'boxID' without throwing quotes around it like this:
setInterval("slideBox(\""+boxID+"\","+boxRoof+")", 20);

so, apparently, everything I threw up there is fine, it's just that when using functions to launch other functions, ya gotta remember to type up the function precisely as you would normally (obviously escaping all the appropriate characters).

Well, I learned something new (this was actually a thorn in my mind for a while now). Neat-o Keen!


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Try:

document.getElementById("myDiv").style.top = "3px";

If you're using a strict XHTML DTD then you need to specify the value type, thus the "3px". Alternatively, you could use document.getElementById(theLayer).style.pixelTop = 3; which expects only integers, but the pixelValue properties aren't as cross browser nor are they part of the W3C DOM.





[This message has been edited by Dracusis (edited 06-27-2003).]

ah, yes....

what has me up against a wall is the document.body.scrollTop..

What browsers don't support it?
What do those browsers support (as a counterpart)?



Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Petskull, I just managed to dig this out of some ancient script I wrote: mozilla holds the equivalent of scrollLeft and scrollTop in these variables:

window.pageXOffset
window.pageYOffset

Oh, looking around a little more, I found these handy functions:

function get_page_x_offset()
{
if (typeof(window.pageXOffset) != 'undefined')
return window.pageXOffset;
if (typeof(document.documentElement.scrollLeft) != 'undefined')
return document.documentElement.scrollLeft;
return 0;
}
function get_page_y_offset()
{
if (typeof(window.pageYOffset) != 'undefined')
return window.pageYOffset;
if (typeof(document.documentElement.scrollTop) != 'undefined')
return document.documentElement.scrollTop;
return 0;
}

However, I don't think they work in Opera. Give them a shot in various browsers and see what happens.

yo petskull this link may help you http://www.xs4all.nl/~ppk/js/doctypes.html is contains all the scrolltop, pixeltop, height mumbo jumbo going and which browsers like it and which don't and what exactly each method does in different browsers.

check it out

visit my CryoKinesis Online Gallery

You know, I've heard people call Petskull's topic headings random or uninformative, but I think this one really cuts right to the heart of the issue. Good on ya!

Cell 1250 :: alanmacdougall.com :: Illustrator tips