[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

DOM styling modified by JavaScript does not affect first rendering

Chris Beall

10/28/2014 10:08:00 PM

(If this is too far off-topic for this group, please suggest another)

Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...

Observation: Of the tested browsers, only Firefox renders the page AFTER
applying the style modifications (which is what I wanted).

Question: Is there a way to make this work on all modern browsers? How
about an easy way? Or is it a rather widespread bug?

Why would you want to do this: Because I want to modify animation timing
based on the current dimensions of the window, without user interaction
and when the page is first displayed. The intent is to synchronize an
animated walking-figure .gif to the window width.

Chris Beall
24 Answers

BootNic

10/29/2014 4:26:00 AM

0

In article <op.xognrthttnmj2w@cbealls-imac.local>,
"Chris Beall" <Chris_Beall@prodigy.net> wrote:

> (If this is too far off-topic for this group, please suggest another)

> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...

> Observation: Of the tested browsers, only Firefox renders the page AFTER
> applying the style modifications (which is what I wanted).

> Question: Is there a way to make this work on all modern browsers? How
> about an easy way? Or is it a rather widespread bug?

> Why would you want to do this: Because I want to modify animation
> timing based on the current dimensions of the window, without user
> interaction and when the page is first displayed. The intent is to
> synchronize an animated walking-figure .gif to the window width.

Followup-To: comp.infosystems.www.authoring.stylesheets

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Walking</title>
<style type="text/css">
/*
prefixes removed
*/
#testimg {
overflow: hidden;
max-width: 100%;
position: fixed;
bottom: 0;
}
#testimg > div:first-child {
width: 10000px;
}
#testimg > div:first-child > img {
animation-name: testkeys;
animation-duration: 100s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-delay: 25ms;
left: 100%;
position: relative;
}
@keyframes testkeys {
0% {
left: 0;
}
100% {
left: 100%;
}
}
</style>
</head>
<body>
<h1>Walking</h1>
<div id=testimg>
<div>
<img alt="" height=133
src="http://s23.postimg.org/st1p88c5z/walking... width=100>
</div>
</div>
</body>
</html>


--
BootNic Wed Oct 29, 2014 12:26 am
"The POP3 server service depends on the SMTP server service, which failed
to start because of the following error: The operation completed
successfully."
*Windows NT Server v3.51*

John Harris

10/29/2014 3:34:00 PM

0

On Tue, 28 Oct 2014 18:08:07 -0400, "Chris Beall"
<Chris_Beall@prodigy.net> wrote:

>(If this is too far off-topic for this group, please suggest another)
>
>Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...
>
>Observation: Of the tested browsers, only Firefox renders the page AFTER
>applying the style modifications (which is what I wanted).
>
>Question: Is there a way to make this work on all modern browsers? How
>about an easy way? Or is it a rather widespread bug?
<snip>

There are three possibilities :

1 There's a standard saying it mustn't happen; the browser
manufacturer says the browser obeys the standard; it does happen.
It's a bug.

2 There's a manufacturer's specification saying it doesn't happen; the
browser manufacturer says the browser obeys the specification; it does
happen.
It's a bug.

3 There's neither 1 nor 2; it does happen.
It's a case of idiot programmer syndrome.

In other words, it's not a bug if it simply doesn't do what you would
like it to do. (Chances are someone very vocal wants it to do what it
does do).

John

Dr J R Stockton

10/29/2014 9:11:00 PM

0

In comp.lang.javascript message <op.xognrthttnmj2w@cbealls-imac.local>,
Tue, 28 Oct 2014 18:08:07, Chris Beall <Chris_Beall@prodigy.net> posted:

>(If this is too far off-topic for this group, please suggest another)
>
>Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...
>
>Observation: Of the tested browsers, only Firefox renders the page
>AFTER applying the style modifications (which is what I wanted).
>
>Question: Is there a way to make this work on all modern browsers? How
>about an easy way? Or is it a rather widespread bug?
>
>Why would you want to do this: Because I want to modify animation
>timing based on the current dimensions of the window, without user
>interaction and when the page is first displayed. The intent is to
>synchronize an animated walking-figure .gif to the window width.


What happens if you put something *like*

<body style="display:none;"
onload='document.body.style="display:block;"'>

and then, instead of using onload, do that statement when your
modifications are completed?

--
(c) John Stockton, nr London UK Reply address via Merlyn Home Page.
news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/inde....
<http://www.merlyn.demon.co.uk/js-ind... jscr maths, dates, sources.
<http://www.merlyn.demon.... TP/BP/Delphi/jscr/&c, FAQ items, links.

Evertjan.

10/30/2014 9:13:00 AM

0

Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 29 okt 2014
in comp.lang.javascript:

> What happens if you put something *like*
>
> <body style="display:none;"
> onload='document.body.style="display:block;"'>

wrong syntax, try:

<body style="display:none;"
onload='document.body.style.display="block"'>



> and then, instead of using onload, do that statement when your
> modifications are completed?



--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Chris Beall

10/30/2014 7:46:00 PM

0

Dr J R Stockton wrote:

> In comp.lang.javascript message <op.xognrthttnmj2w@cbealls-imac.local>,
> Tue, 28 Oct 2014 18:08:07, Chris Beall <Chris_Beall@prodigy.net> posted:
>
>> (If this is too far off-topic for this group, please suggest another)
>>
>> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...
>>
>> Observation: Of the tested browsers, only Firefox renders the page
>> AFTER applying the style modifications (which is what I wanted).
>>
>> Question: Is there a way to make this work on all modern browsers? How
>> about an easy way? Or is it a rather widespread bug?

> What happens if you put something *like*
>
> <body style="display:none;"
> onload='document.body.style="display:block;"'>
>
> and then, instead of using onload, do that statement when your
> modifications are completed?
>

Looking much better. See
http://beallsprings.org/sandbox/Mod%20DOM%20... (version 2 blew up
on the launch pad...)
Leaving my modification code in a function, I used:

<body style="display:none;"
onload='animInit();document.body.style.display="block"'>

combining Dr. S's suggestion and Evertjan.'s correct syntax with an
invocation of the function

Which works on Firefox (15 seconds), Safari (12 seconds), Chrome (12
seconds), and IE (15 seconds). Opera duration stays at 1 second, but
inspection with Dragonfly shows that both the Style and Computed style
reflect a change to animation-duration (no prefix) to 15 seconds. So the
change takes place, but the rendering engine uses only the unmodified
value.

Incidentally, Safari and Chrome both ignored animation-timing-function,
instead using the default 'ease'. Adding
-webkit-animation-timing-function: linear; brought them to heel.

As it turns out, the particular target audience for my original effect
does not use Opera, so for me this issue is resolved, although the
solution is clearly not yet a completely generic fix.

Now to integrate what I've learned into the actual web page.

Thanks to all,
Chris Beall

Christoph M. Becker

10/31/2014 11:52:00 AM

0

Chris Beall wrote:

> (If this is too far off-topic for this group, please suggest another)
>
> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...
>
> Observation: Of the tested browsers, only Firefox renders the page AFTER
> applying the style modifications (which is what I wanted).
>
> Question: Is there a way to make this work on all modern browsers? How
> about an easy way? Or is it a rather widespread bug?
>
> Why would you want to do this: Because I want to modify animation
> timing based on the current dimensions of the window, without user
> interaction and when the page is first displayed. The intent is to
> synchronize an animated walking-figure .gif to the window width.

Have you tried to use the DOMContentLoaded event[1] of the document
instead of window's load event? I don't know if that would make any
difference, but it seems to be worth a try.

[1] <https://developer.mozilla.org/en-US/docs/Web/Events/DOMContent...

--
Christoph M. Becker

Chris Beall

10/31/2014 2:38:00 PM

0

Christoph M. Becker wrote:

> Chris Beall wrote:
>
>> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...
>>
>> Observation: Of the tested browsers, only Firefox renders the page AFTER
>> applying the style modifications (which is what I wanted).
>
> Have you tried to use the DOMContentLoaded event[1] of the document
> instead of window's load event? I don't know if that would make any
> difference, but it seems to be worth a try.
>
> [1]
> <https://developer.mozilla.org/en-US/docs/Web/Events/DOMContent...
>

I have not, however the Mozilla doc you referenced says "without waiting
for stylesheets, images, and subframes to finish loading". Since it is a
stylesheet that I am modifying, I would not expect the DOM structure to
contain it at that point in time.

Note that, with help from others, a solution that works for Firefox,
Safari, Chrosm, and IE (but not Opera) has been found.

Chris Beall

Chris Beall

10/31/2014 4:54:00 PM

0

Chris Beall wrote:

> (If this is too far off-topic for this group, please suggest another)
>
> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%2...
>
> Observation: Of the tested browsers, only Firefox renders the page AFTER
> applying the style modifications (which is what I wanted).
>
> Question: Is there a way to make this work on all modern browsers? How
> about an easy way? Or is it a rather widespread bug?
>
> Why would you want to do this: Because I want to modify animation
> timing based on the current dimensions of the window, without user
> interaction and when the page is first displayed. The intent is to
> synchronize an animated walking-figure .gif to the window width.
>
> Chris Beall

A working (for Firefox, Safari, Chrome, and IE) proof-of-concept can be
found at
http://beallsprings.org/sandbox/Mod%20DOM%20...

Chris Beall

Dr J R Stockton

10/31/2014 8:46:00 PM

0

In comp.lang.javascript message <XnsA3D667E8B5370eejj99@194.109.133.133>
, Thu, 30 Oct 2014 10:12:52, Evertjan. <exxjxw.hannivoort@inter.nl.net>
posted:

>Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 29 okt 2014
>in comp.lang.javascript:
>
>> What happens if you put something *like*
>>
>> <body style="display:none;"
>> onload='document.body.style="display:block;"'>
>
>wrong syntax,

that is why I wrote "something like". I wished to convey the idea,
without having time to test it.


--
(c) John Stockton, nr London, UK. E-mail, see Home Page. Turnpike v6.05.
Website <http://www.merlyn.demon.... - w. FAQish topics, links, acronyms
PAS EXE etc. : <http://www.merlyn.demon.co.uk/pro... - see in 00index.htm
Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

Evertjan.

11/1/2014 9:13:00 AM

0

Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 31 okt 2014
in comp.lang.javascript:

> In comp.lang.javascript message <XnsA3D667E8B5370eejj99@194.109.133.133>
> , Thu, 30 Oct 2014 10:12:52, Evertjan. <exxjxw.hannivoort@inter.nl.net>
> posted:
>
>>Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> wrote on 29 okt
2014
>>in comp.lang.javascript:
>>
>>> What happens if you put something *like*
>>>
>>> <body style="display:none;"
>>> onload='document.body.style="display:block;"'>
>>
>>wrong syntax,
>
> that is why I wrote "something like". I wished to convey the idea,
> without having time to test it.

Indeed, nontheless the "why" does not diminish the fact that it was
syntactically wrong and so a wrong idea.

element.style is a CSSstyleDeclaration object,
needing a specific style element as a key/index
and is read/write:

<body style="display:none;"
onload='alert(document.body.style["display"])'>

will return 'none'.

and so cannot be used for entering stylesheet strings,
as a stylesheet is not a style.

=====================

<body style="display:none;"
onload='document.body.style.display="block"'>

works fine here, however:

<body style="display:none;"
onload='this.style.display="block"'>

cannot be used, why is that?

cann't we use "this" in a onload?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)