From Newsgroup: alt.html

Hello all,

I'm appending, using GreaseMonkey, an element to the body of a webpage. Although the appending itself works, the placement of the appended element sometimes causes a problem: it gets placed at the top, over the original contents.

The below URL is an example for when that it happens :

https://bugzilla.mozilla.org/show_bug.cgi?id=335545

I've been able to track the problem back to the '<div id="wrapper">'
element, which gets a "position: absolute;" setting (removing/disabeling either the ID or the position moves the appended element back to the bottom, where its supposed to be).

The thing is that I'm looking for a generic (CSS) solution, not a page-specific one.

I've tried several things, including following the above div with another
div containing the "clear: both" style, but nothing I try seems to work.

Does anyone have an idea what I would need to use for a generic solution ?

By the way, I've been humoring the thought of going thru all elements and attempt to remove any-and-all "position" settings, but that could be rather time-consuming - and I'm not even sure if it would work.

Regards,
Rudy Wieser


--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On Thu, 22 Aug 2024 09:36:46 +0200, R.Wieser wrote:

Hello all,

I'm appending, using GreaseMonkey, an element to the body of a webpage. Although the appending itself works, the placement of the appended element sometimes causes a problem: it gets placed at the top, over the original contents.

The below URL is an example for when that it happens :

https://bugzilla.mozilla.org/show_bug.cgi?id=335545

I've been able to track the problem back to the '<div id="wrapper">' element, which gets a "position: absolute;" setting (removing/disabeling either the ID or the position moves the appended element back to the bottom, where its supposed to be).

The thing is that I'm looking for a generic (CSS) solution, not a page-specific one.

I've tried several things, including following the above div with another div containing the "clear: both" style, but nothing I try seems to work.

Does anyone have an idea what I would need to use for a generic solution ?

By the way, I've been humoring the thought of going thru all elements and attempt to remove any-and-all "position" settings, but that could be rather time-consuming - and I'm not even sure if it would work.

Regards,
Rudy Wieser

You can't use one fixed method since web pages use different layouts. Your
code will have to at least be adaptive.

Especially due to the fact that, most websites don't use the correct HTML
tags to contain specific kind of content - even for Mozilla, Google, and
Apple sites (Google is obviously the worst, BTW).

e.g. use only or mostly only DIVs instead of ARTICLE, ASIDE, FOOTER, HEADER, MAIN, SECTION, etc.

Meaning that, it's site-specific structured where only that site knows which parts of the page hold specific kind of content, rather than standard structured where all web browsers and all HTML readers can know them.

That being said, the HTML+DOM specifications make it worse by adding custom elements.

In your case, the important part is identifying which element is the base
node which holds all of the basic contents such as header, sidebar, main content, and footer; before deciding where to insert your element.

And in the case of that Mozilla page, you may need to check the position of
the added element. Compare it against the page height. If it's e.g. not
within the bottom 25% of page height, then the element insertion point was incorrect, and further checkings needs to be done to get the correct
insertion point.
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

JJ,

And in the case of that Mozilla page, you may need to check the
position of the added element. Compare it against the page height.

I have no idea why a command like document.body.appendChild() would place
the element anywhere else than at the end of the body. Do you have any example of it ?

I used FF's own "inspect element" to check where the appended element was placed in the DOM, and it was where it should be, at the bottom of the body.

Regards,
Rudy Wieser


--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On Thu, 22 Aug 2024 15:36:47 +0200, R.Wieser wrote:

JJ,

And in the case of that Mozilla page, you may need to check the
position of the added element. Compare it against the page height.

I have no idea why a command like document.body.appendChild() would place the element anywhere else than at the end of the body. Do you have any example of it ?

I used FF's own "inspect element" to check where the appended element was placed in the DOM, and it was where it should be, at the bottom of the body.

Regards,
Rudy Wieser

The visual position. Not the DOM node position. Element's DOM node position does not guarantee the visual position on the page since the introduction of CSS.

But for DHTML page, while the appended element is indeed inserted at the end (when that happens), it may no longer apply if the page itself appended more element(s) at the same parent element.
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

JJ,

Element's DOM node position does not guarantee the visual position
on the page since the introduction of CSS.

Yes, thats indeed what my whole problem is about.

Are you suggesting that I should figure out what the /origional/ height of
the page would be and than force the added element to that position ?

TBH, that sounds like an even less stable solution than the "remove the 'position' attribute" one I already described.

I was hoping to hear if there would be a "reset: all" attribute (similar to "clear: both") would be available. Or one which causes all layer-related changes to be confined to within its (grand)parent element.

it may no longer apply if the page itself appended more element(s)
at the same parent element.

:-) That won't be a problem, as I've disabled JS.

Regards,
Rudy Wieser


--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On Fri, 23 Aug 2024 10:22:09 +0200, R.Wieser wrote:

TBH, that sounds like an even less stable solution than the "remove the 'position' attribute" one I already described.

So preserving the page layout is not part of your requirements?
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

JJ,

TBH, that sounds like an even less stable solution than the "remove the
'position' attribute" one I already described.

So preserving the page layout is not part of your requirements?

I could not care less about preserving the /exact/ page layout. But I would like to keep it somewhat the same. my focus is on being able to read the page, not on getting a xerox copy of what the webpage creator designed.

FYI, my GreaseMonkey script grabs all floating elements, neuters them and
puts them into the element (a DIV) I added to the bottom of the webpage.

IOW, I created an "get outof my face!" solution, but can still access them
if I want to (which is seldom or never).

Regards,
Rudy Wieser


--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

On Fri, 23 Aug 2024 19:41:12 +0200, R.Wieser wrote:

JJ,

TBH, that sounds like an even less stable solution than the "remove the
'position' attribute" one I already described.

So preserving the page layout is not part of your requirements?

I could not care less about preserving the /exact/ page layout. But I would like to keep it somewhat the same. my focus is on being able to read the page, not on getting a xerox copy of what the webpage creator designed.

FYI, my GreaseMonkey script grabs all floating elements, neuters them and puts them into the element (a DIV) I added to the bottom of the webpage.

IOW, I created an "get outof my face!" solution, but can still access them if I want to (which is seldom or never).

Regards,
Rudy Wieser

Below CSS should work 99% on any page, so that an element inserted at the
end of BODY is shown at the end of the page.

*:not(#z.z[z]),
*:not(#z.z[z])::before,
*:not(#z.z[z])::after {
position: static !important;
float: none !important;
}

The `:not(#z.z[z])` part of the selector is needed to increase its specifity (i.e. increase the priority), so that it'll have higher priority than the
page CSS.

When it doesn't work, is when there are elements which have inline style
which applies e.g. `position: absolute !important` or `float: right
!important` (i.e. inline style values with `!important`), which have the
very top priority possible (not overridable via STYLE or style LINK). It'll need JS to edit STYLE attribute to remove the offending styles.
--- Synchronet 3.21d-Linux NewsLink 1.2

From Newsgroup: alt.html

JJ,

Below CSS should work 99% on any page, so that an element inserted
at the end of BODY is shown at the end of the page.

[snip CSS]

Thank you, I'm going to try it.

Regards,
Rudy Wieser


--- Synchronet 3.21d-Linux NewsLink 1.2