473,322 Members | 1,736 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Relative Absolute Position

Here's my situation. I have a statically positioned table that has an image
in a cell. I also have some layers, defined by absolute-positioned DIVs for
some animation. Everything works until I scroll/resize. Then the image
"moves" on the screen but the animation doesn't. The net effect is that
their relative positioning changes. I'd like to have it be that they would
stay in the same relative position. I want to keep the image as an element
in the table and not make it a background so that I can use it's position
for other script activities, and because the table keeps other elements in
relative position.

Any recommendations on how I handle this?

Thanks.

Ken
Jul 20 '05 #1
4 10968
"Ken Kast" <ke*@NOSPAMkenkast.com> wrote in message
news:PN*******************@twister.socal.rr.com...
Here's my situation. I have a statically positioned table
that has an image in a cell. I also have some layers,
defined by absolute-positioned DIVs for some animation.
Everything works until I scroll/resize. Then the image
"moves" on the screen but the animation doesn't. The
net effect is that their relative positioning changes.
I'd like to have it be that they would stay in the same
relative position. I want to keep the image as an element
in the table and not make it a background so that I can use
it's position for other script activities, and because the
table keeps other elements in relative position.

Any recommendations on how I handle this?


Absolutely positioned elements are positioned relative to the HTML
document so they should scroll with the rest of the document. If they
are keeping their position relative to the vewport's upper left corner
during scrolling then your animation script must be re-positioning them.
In which case it is handling scrolling inappropriately and needs to be
corrected.

Correcting for changes in page layout due to window re-sizing means
either constantly checking the page offset of the image element and
using that as a basis for positioning the positioned elements, or doing
the same in response to window.onresize events. Unfortunately,
window.onresize is not supported by some of the browsers that would
otherwise be happy with the other features of your script as described.

In any event, you are unlikely to receive any more useful suggestions
unless you provide access to a working example of the script in action.

Richard.
Jul 20 '05 #2
Ken Kast wrote:
Here's my situation. I have a statically positioned table that has an image
in a cell. I also have some layers, defined by absolute-positioned DIVs for
some animation. Everything works until I scroll/resize. Then the image
"moves" on the screen but the animation doesn't. The net effect is that
their relative positioning changes. I'd like to have it be that they would
stay in the same relative position. I want to keep the image as an element
in the table and not make it a background so that I can use it's position
for other script activities, and because the table keeps other elements in
relative position.

Any recommendations on how I handle this?

I assume when you say scroll/resize you mean the document is reflowed:
the table element moves its page coordinates on account of the reflow,
but the absolutely positioned element doesn't because it uses page
coordintates in the first place. That much is to be expected.

What is not spelled out in as many words in the CSS spec is that real
world browsers take top and left values for positioning with respect to
the next outer positioned element - I will ignore "auto" positioning.

Suggest you try filling the table cell with a relative positioned
element, put the image inside it as a static element, and also put the
animation absolutely positioned elements inside the relative container,
supplying top and left values with respect to it.

There is now a small chance it will work, without saying how good a
chance. It is more likely to work in Opera or Mozilla than IE. If
needed, the chances of correctly interogating the position of a static
element within a relative element under IE are quite low.

The other way is to put an onresize event handler in to recalculate and
move the absolutely positioned animation divs for you.

HTH
Dom


Jul 20 '05 #3
DU
Richard Cornford wrote:
"Ken Kast" <ke*@NOSPAMkenkast.com> wrote in message
news:PN*******************@twister.socal.rr.com...
Here's my situation. I have a statically positioned table
that has an image in a cell. I also have some layers,
defined by absolute-positioned DIVs for some animation.
Everything works until I scroll/resize. Then the image
"moves" on the screen but the animation doesn't. The
net effect is that their relative positioning changes.
I'd like to have it be that they would stay in the same
relative position. I want to keep the image as an element
in the table and not make it a background so that I can use
it's position for other script activities, and because the
table keeps other elements in relative position.

Any recommendations on how I handle this?

Absolutely positioned elements are positioned relative to the HTML
document


Absolutely positioned elements are positioned relative to the
containing block (aka offsetParent node).

so they should scroll with the rest of the document.

Absolutely positioned elements do not "scroll with" the rest of the
document: they are just absolutely positioned, "nailed" within their
respective offsetParent nodes (or containing block, if you wish).

If they are keeping their position relative to the vewport's upper left corner
during scrolling then your animation script must be re-positioning them.
In which case it is handling scrolling inappropriately and needs to be
corrected.

When I first read the OP, I just thought there were no concrete details,
no url, no specifics (browser, version, page rendering mode,etc),
nothing reliable, no sufficient chunks of relevant code (not even a
single line) to be able to say anything. The page where this problem
happens could be 3000 lines of code long or 100 lines long. Who knows?
The problem could be just CSS and markup but the post was made in 2
scripting language newsgroups, so..
Correcting for changes in page layout due to window re-sizing means
either constantly checking the page offset of the image element and
using that as a basis for positioning the positioned elements, or doing
the same in response to window.onresize events. Unfortunately,
window.onresize is not supported by some of the browsers that would
otherwise be happy with the other features of your script as described.

In any event, you are unlikely to receive any more useful suggestions
unless you provide access to a working example of the script in action.

Richard.


"Could", "maybe", "if", etc... When a webpage difficulty description is
highly visual and seems obviously complex, involving many graphical
elements interacting (I counted at least 4 elements in his description)
in the layout, then you need to see the code.

A majority of people asking for help in web programming newsgroups
don't author valid/validated markup code, rely on table design, use a
lot of amateur script functions taken here and there in copy-N-paste
javascript sites, resort to all kinds of hacks (eval, document.write,
setInterval, etc..), are only interested in results being visible on
their browser and their machine regardless of implications on users'
systems, etc...

So until this issue can be accordingly sorted, cleared, there is not a
lot that can be said.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #4
"DU" <dr*******@hotREMOVEmail.com> wrote in message
news:bg**********@news.eusc.inter.net...
<snip>
Absolutely positioned elements are positioned relative
to the HTML document
Absolutely positioned elements are positioned relative
to the containing block (aka offsetParent node).
so they should scroll with the rest of the document.


Absolutely positioned elements do not "scroll with" the
rest of the document: they are just absolutely positioned,
"nailed" within their respective offsetParent nodes (or
containing block, if you wish).


Yes, I was being excessively vague. Though it remains the case that if
the offsetParent node scrolls with the page and its absolutely
positioned descendants do not go with it, something active has been, or
is being, done to prevent them.

<snip>When I first read the OP, I just thought there were no
concrete details, no url, no specifics (browser, version,
page rendering mode,etc), nothing reliable, no sufficient
chunks of relevant code (not even a single line) to be able
to say anything. ... <snip>So until this issue can be accordingly sorted, cleared,
there is not a lot that can be said.


Agreed. And someone who does not understand enough about browser
scripting to see that nothing useful can be said about the undesired
behaviour of a script without the commenters being able to see the
script is unlikely to be able to do anything with any vague speculations
and guesswork that they do receive. Leaving my earlier comments serving
no purpose but to underline the importance of the "Show the ******
script" remark I ended with.

Richard.
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: ajay | last post by:
I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i...
2
by: Catherine Lynn Wood | last post by:
I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references...
4
by: louissan | last post by:
Hi all, I've met a problem with Opera and its ability to render absolutely positioned divs inside relatively positioned parent blocks, themselves contained inside a relatively positioned...
8
by: Asad | last post by:
Hi, I am basically trying to accomplish drop down menus for navigation on a site. And I'm pretty much done except I am having one problem. The z-index is not working with relative positioning! ...
3
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...
6
by: Gérard Talbot | last post by:
Hello fellow stylers, When trying this page http://www.gtalbot.org/BrowserBugsSection/PercentualRelativePositioning.html I get different rendered layouts with IE 6, IE 7 beta 2, Firefox...
4
by: dropdeadster | last post by:
Trying to line up a tic-tac-toe board type grid of images using style= tags to <img inside a table TD but it's not working, I get more like a set of steps, can I get an explanation of what's wrong...
19
by: derelicten | last post by:
hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of...
1
by: GGG | last post by:
Neither go the way I want them to... Absolute doesn't get it right over multiple browsers. Relative puts it in the right place, but only the portion that it is "relative" the style, #wleMenu, is...
3
by: Justin England | last post by:
Background: I am working for a client putting a textbook online. The layout of the textbook is straight forward and is easy enough to style with <h?>, <p>, <uland <oltags. The text book also...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.