Preserved Topic: Dynamic Positioning (Page 1 of 1)

I have a <DIV> tag that I would like to place 200px from the bottom of the browser window regardless of the screen resolution. I am using a CSS style sheet to position the <DIV>.

How do I accomplish this?

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Nope, thankfully that's not all necessary. Most browsers support the "bottom" property:

#divid {left:100px; bottom:200px;}

I'm willing to bet, however, that NN 4.x doesn't support this. If you want it to work in that browser, you'll need to do it the way InI said.

[edit: oh, you'll also need InI's advice if you want it to hold it's position when the screen is scrolled, although theoretically position:fixed , I think, should handle that. It doesn't work in most browsers yet though.]

[This message has been edited by Slime (edited 05-21-2002).]

I'll have to look into the bottom property some more. I wrote this cross-browser example up to help with this question: http://www.bugimus.com/gurus/center_div.html If all of this isn't necessary, that's quite cool but it usually depends on just how cross-browser your pages *needs* to be. If you're just writing for newer browsers, then by all means go for the simplest solution.

. . : newThing

Just a small question on script bugs...

Since Opera doesn't have an onResize() event handler you put in a never ending loop to update the position.

Although in my scripts I always had the loop go to a function that checked if the window size had actually changed before re-positioning the div. I thought that would use less CPU resources than setting the values again every half second.

Now I'm wondering which would be better. Does setting the same top-left positions actually cause opera to re-draw the div or not? Or would I be better without the extra step in there, since I'm actually adding an extra 2 property calls and comparisons whenever the div position does need to be updated.

I honestly don't think it's worth doing the check for the page resize. I think that it would run a bit more efficiently but that depends on just how much work is involved with updating a div's position. I'm pretty sure the browser doesn't totally redraw the div when it repositions so I think repositioning it every 0.5 seconds is no big deal.

I would be interested to hear some other thoughts on this. It's a good question, Drac.

. . : newThing

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Really? Do you think the browser actually checks to see if its position is different every time you move it?

Some time ago, I have tested these two approaches (letting timer run constantly and aborting if size didn't change) on "BrotherCake Ultimate DropDown Menu" (I had to modify that script by myself) and my conclusion was that it's best to check if size has actually changed. Although web browsers may not redraw layers if they stay on same position, a lot of JavaScript code still has to be parsed and that puts *a lot* of pressure on the CPU...

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Oh, I'm sure the browser doesn't constantly redraw *every* element, but I think if it came across a javascript statement that changed the position of an element, it would consider that element to have moved without actually checking if you moved it to a different place than it already was or not. That way it can just keep a boolean value for each element on the page, keeping track of whether it needs to be redrawn or not, and if you change a style property of an element it sets that boolean to true. Then it just redraws all elements for which that boolean is true.