 |
| |
Dox
Nervous Wreck (II) Inmate
From: UK
Insane since: May 2002
|
posted 06-02-2002 19:26
In my script, I need to find the position of a certain div, and can't seem to manage it.. I've tried;
var position = document.all.divname.style.pixelTop;
var position = document.all.divname.style.top;
var position = document.getElementById('divname').style.top;
var position = document.getElementById('divname').style.pixelTop;
and a few more variations in that general direction, but, at best, I can only get the script to return a 0 value.
Can someone here tell me something that my DHTML book can't?
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 06-02-2002 19:31
Well, your syntax is ok....
Maybe the top position is actually "0" ?
Is the dive set to "position:absolute"
Did you set the "top:Zpx" value in the style sheet?
If all else fails try setting the style.top value first then read it back again.
I don't suppose you could post a link to the page your working on?
|
kuckus
Bipolar (III) Inmate
From: Berlin (almost)
Insane since: Dec 2001
|
posted 06-02-2002 19:36
The code you tried only works for elements that are positioned absolutely.
We've had the same question a while ago, and luckily I've saved mr.maX's solution:
IE/Mozilla:
x = document.getElementById("layerName").offsetLeft;
y = document.getElementById("layerName").offsetTop;
NN4:
x = document.layers["layerName"].pageX;
y = document.layers["layerName"].pageY;
kuckus (cell #282)
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 06-02-2002 20:14
Even if they are positioned absolutely, Internet Explorer won't return the left and top positions in the (correct) ways that you're trying, unless you've *set* them that way.
Kuckus' method should work, though i recall having to use recursion to get the position of the parent element, if the element is nested within other ones.
|
Dox
Nervous Wreck (II) Inmate
From: UK
Insane since: May 2002
|
posted 06-02-2002 20:25
Ok, Ill make a much simpler version of what I am trying to do, and then you can see for yourselves exactly what the problem is. I tried useing your offsetTop method, Kuckus, but the variable returns as undefined.
Unfortunately, I don't have any webspace as of yet, so it only exists on my H/D, but here is the (extremely) simplified code. In the proper version, the TOP position of the DIV won't be set by me, but will depend on how much material the DIV contains.
<HTML>
<HEAD>
<TITLE>HTML document</TITLE>
<STYLE>
#div1 {
position: absolute;
height: 200;
width: 200;
top: 200;
left: 200;
background-Color: blue;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="div1">
</DIV>
<SCRIPT>
function position() {
var posx = document.getElementById('div1').style.pixelTop;
return posx;
}
</SCRIPT>
<SCRIPT>
document.write(position());
</SCRIPT>
</BODY>
</HTML>
There is probably just something really simple that I'm missing here, that's usually the way it goes with these things...
|
mr.maX
Maniac (V) Mad Scientist
From: Belgrade, Serbia
Insane since: Sep 2000
|
posted 06-02-2002 21:19
Dox, code that Kuckus posted works fine, check how you wrote it, it should look like this:
var posx = document.getElementById('div1').offsetTop;
Now, to answer your question, why your method doesn't work. In order to use "style" property, CSS code must be specified via STYLE attribute. Your code would work fine if you wrote DIV tag like this:
<DIV ID="div1" STYLE="position: absolute; height: 200; width: 200; top: 200; left: 200; background-Color: blue;"></DIV>
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 06-02-2002 22:11
No, the style property works if you're specifying it in an outside style sheet. I never use inline styles, and always use document.getElementById('...').style, never had any problems.
Except that I'm unable to *read* from the properties... so you're saying if you specify it inline, you can read from the properties?
|
mr.maX
Maniac (V) Mad Scientist
From: Belgrade, Serbia
Insane since: Sep 2000
|
posted 06-02-2002 22:59
Yes, if you specify CSS inline, you'll be able to read from it using style property (and that's what Dox is having problems with - when he wants to get position of a div it returns 0 or undefined).
|
Dox
Nervous Wreck (II) Inmate
From: UK
Insane since: May 2002
|
posted 06-03-2002 00:49
So, to straiten this out, Slime is having the same problem as me, and the only way to read from the style properties is to specify the styles inline, which kinda eliminates the whole point of useing style sheets in the first place...
Hmm, I think I just thought of a sig, y'know..
All browsers ***!
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 06-03-2002 01:06
Wow.... You mean someone else ran into that problem too!
I also ran into that one, many many times. I thought it was only me who had that problem. Then I just started using in-line styles for all my DHTML stuff when no one else could figiure out why it was happening.
Then I wanted my stylesheets back so I wrote a makeLayer object which setup each layer in the document by loading in all of the variabules at the start. That always seemed to work well.
Although, the use on external style sheets for DHTML is usually kinda pointless anyways as most often your doing rather specific and unique stuff with each layer.
Yah Dox, all browsers do suck. We used to have a forum called exactly that. Now it's the CSS to XML forum.
|
Dox
Nervous Wreck (II) Inmate
From: UK
Insane since: May 2002
|
posted 06-03-2002 01:36
Ok, I just did a little test, and..
var posx = document.getElementById('div1').offsetTop;
*does* actually work... just like Kuckus and mr.max said... damn do *I* feel stupid :-) I think that I didn't delete the '.style.' part of the DOM reference when I tested it the first time around, and it works with my styles defined in the 'HEAD' of the document too!
Well, again, thanks for the help. I'm actually working on a scrollbar script, and this little breakthrough means that now it actually scrolls when you click the up or down arrows.
But the hardest part will come when I try to make the slider move an amount relative to the amount that the contents move, if you catch my drift...
All browsers sux!!
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 06-03-2002 02:06
What I always did to solve that problem (since I almost never use inline styles) was to put extra statements in my onload function that set all the variables to what they already were in the style sheet. Not very elegant, but it did the trick.
Dox, let me see if I can dig up something that'll help you out.
Ah, here we go!
function getTop(theelement)
{
if (theelement.offsetParent) return theelement.offsetTop + getTop(theelement.offsetParent);
else return theelement.offsetTop;
}
function getLeft(theelement)
{
if (theelement.offsetParent) return theelement.offsetLeft + getLeft(theelement.offsetParent);
else return theelement.offsetLeft;
}
Use them like this:
getTop(document.getElementById('div1'))
They'll work even if the element is nested inside tons of other elements. Theoretically at least.
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 06-03-2002 08:46
"But the hardest part will come when I try to make the slider move an amount relative to the amount that the contents move, if you catch my drift..."
Yah, that bit can be a little tricky... The best way to do this is to base all the movement from a variable that represents a percantage. Then you change that variable and update the content and tab position from there.
Well, that's the easiest way I found to keep things unified. I don't know how the Doc or slime did theirs though.
This tricky bit for me was the cross-browser event capturing. Sent me nuts I tell ya!...
[This message has been edited by Dracusis (edited 06-03-2002).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 06-03-2002 09:20
Yeah, that part, in my opinion, is the most fun, because it's *all* math! Proportions and stuff. It's great. =)
Basically, the way I did it, is every time the scrollbar is moved, I update the text's position based on its position. And every time the text moves (like when you click an up or down arrow), I update the scrollbar's position based on the text's position.
Remember that the range of movement of the text isn't its height, but its height minus the height of the viewing window. (Assuming that the bottom of the text is unable to go above the bottom of the viewing window.)
Draw pictures if it helps. You'll figure it out. Careful though, I found that it's easy to make mistakes that you don't notice, so check the logic behind your math and make sure it all seems correct.
|
Dox
Nervous Wreck (II) Inmate
From: UK
Insane since: May 2002
|
posted 06-03-2002 12:51
Man, after a hiatus of about a year, I only started coding again a few weeks ago, and now I think I'm getting strangely addicted...
I like the idea of useing a single variable to control the movement of the slider and the contents..
The variable would be equal to 100%, then I just need to work out how many pixels to move the slider to increment 1%, and the same with the contents. But it's not as simple as that, because you get remainders. If your sliderbar is 145 height, you need to divide that by 100 (%), but that tells you to increment your slider 1.45 pixels for each one percent....
But no, don't tell me! I wan't to see if I can work this out on my own first.
All browsers sux!!
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 06-03-2002 19:19
Well, I'd strongly recommend not doing it by checking how much one of them *moves*, and then moving the other one by that amount, because as you've seen, that will cause errors with rounding, and I'm willing to bet it will screw things up if you scroll up and down over and over again.
|
bitdamaged
Maniac (V) Mad Scientist
From: 100101010011 <-- right about here
Insane since: Mar 2000
|
posted 06-03-2002 19:28
I think the big issue here was actually trying to get the info before the load of the page. (Slime touched on it I just wanted to reiterate).
Personally for many reasons I don't try to do anything dynamic until the page is fully loaded after which I start creating my JS DHTML object refrences to the specific divs (and at which point I can grab my style info from my divs)
.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................
|
