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 4 10998
"Ken Kast" <ke*@NOSPAMkenk ast.com> wrote in message
news:PN******** ***********@twi ster.socal.rr.c om... 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.
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
Richard Cornford wrote: "Ken Kast" <ke*@NOSPAMkenk ast.com> wrote in message news:PN******** ***********@twi ster.socal.rr.c om...
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/
"DU" <dr*******@hotR EMOVEmail.com> wrote in message
news:bg******** **@news.eusc.in ter.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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 want to make first text
as Table Heading/menu category. For examle in the given menu i want to
make a heading as "Comp. Languages" which won't be a link.
2) The position of this menu is absolute to the page. I want to make
it absolute to the Table...
|
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 back to 0,0 on the entire
page. If I set it to relative, the div layers will not overlap as needed.
I prefer to avoid javascripting an 'innerHTML' re-write of a single div and
would instead like to build two layers that can reside at the same...
|
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 block.
I'm surely missing something, but what? Any help would be kindly
appreciated :)
Here's a code sample:
|
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!
Basically I have a page such as this:
http://members.rogers.com/asadkhan2/prob2.jpg
|
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 test case element1 and element2 should be
placed side by side inside a centered white container element:
http://www.markusernst.ch/test.htm
| |
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 1.5.0.2
and Opera 9.0 build 8367.
Firefox 1.5 and Opera 9 will just ignore the CSS declaration
|
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 with this and how to do it correctly?:
<table border="1">
<tr>
<td valign="top" align="left">
|
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 pics is bigger then fixed space. SO I put them in a position:absolute div and I gave a position:relative to the container td.
This seems to work in IE but in Firefox position is relative to the browser window, not the cell. I need a compatible solution...
|
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 running.
Holding the cursor over any portion OUTSIDE of this block is not
registering.
Mozilla doesn't do anything, IE will fire off an error, when I go past
"the zone" with "object required" (like the scipting isn't even there)
I have the...
|
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 contains small images of a key that
represent a key point within the text. In the printed book, these keys are
positioned to the left of the text (in the margins if you will) and some
paragraphs may have more than one key. It is important to the...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |