Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26015 > unrolled thread

DOM styling modified by <body onload=> JavaScript does not affect first rendering

Back to article view | Back to comp.lang.javascript

Contents

  DOM styling modified by <body onload=> JavaScript does not affect first rendering "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 18:08 -0400
    Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering BootNic <bootnic.bounce@gmail.com> - 2014-10-29 00:26 -0400
    Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering John Harris <niam@jghnorth.org.uk.invalid> - 2014-10-29 15:33 +0000
    Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> - 2014-10-29 21:11 +0000
      Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-10-30 10:12 +0100
        Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Dr J R Stockton <reply1400@merlyn.demon.co.uk.invalid> - 2014-10-31 20:45 +0000
          Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-11-01 10:12 +0100
            Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Tim Streater <timstreater@greenbee.net> - 2014-11-01 10:19 +0000
              Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-11-01 12:22 +0100
              Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-11-01 15:22 +0100
            Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-11-01 11:32 +0100
              Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-11-01 12:25 +0100
              Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-11-01 15:23 +0100
                Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-11-01 16:50 +0100
                  Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-11-01 20:40 +0100
                    Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-11-02 20:55 +0100
                      Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-11-29 19:27 +0100
      Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-30 15:46 -0400
    Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-10-31 12:52 +0100
      Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-31 10:37 -0400
    Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-31 12:53 -0400
      Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Joao Rodrigues <groups_jr-1@yahoo.com> - 2014-11-01 10:41 -0200
        Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-11-01 15:29 +0100
        Re: DOM styling modified by <body onload=> JavaScript does not affect first rendering "Chris Beall" <Chris_Beall@prodigy.net> - 2014-11-01 18:03 -0400

Page 2 of 2 — ← Prev page 1 [2]

#26061

Chris Beall wrote:

> (If this is too far off-topic for this group, please suggest another)
>
> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%20test.html
>
> 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%20test4.html

Chris Beall

[toc] | [prev] | [next] | [standalone]

#26069

On 10/31/2014 02:53 PM, Chris Beall wrote:
> Chris Beall wrote:
> 
>> (If this is too far off-topic for this group, please suggest another)
>>
>> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%20test.html
>>
>> 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%20test4.html
> 

Very interesting!

I'd like to comment about the animInit() function, which firstly tests
for the window.innerWidth property value. Remember that innerWidth and
innerHeight properties consider, if rendered, the scrollbars dimensions.
See the section 10.3 (How do I find the size of the window?), in the
c.l.js FAQ:
<http://pointedears.de/scripts/faq/cljs/#getWindowSize>

My FF version 33 (on Linux Mint 17) seems to recognize and use these
animation-* properties without the -moz prefix. As soon as some
experimental properties are included in draft CSS specification, Mozilla
adds the support for the un-prefixed variant. And once standardized, the
prefixed properties are dropped. See:

<https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions>

-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#26073

Joao Rodrigues wrote:

> On 10/31/2014 02:53 PM, Chris Beall wrote:
>> A working (for Firefox, Safari, Chrome, and IE) proof-of-concept can be
>> found at
>>  http://beallsprings.org/sandbox/Mod%20DOM%20test4.html
>> […]
> 
> I'd like to comment about the animInit() function, which firstly tests
> for the window.innerWidth property value. Remember that innerWidth and
> innerHeight properties consider, if rendered, the scrollbars dimensions.

The “innerWidth” and “innerHeight” properties have only recently gained 
support in IE/MSHTML, if at all.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26077

Joao Rodrigues wrote:

> On 10/31/2014 02:53 PM, Chris Beall wrote:
>> Chris Beall wrote:
>>
>>> (If this is too far off-topic for this group, please suggest another)
>>>
>>> Testcase: http://beallsprings.org/sandbox/Mod%20DOM%20test.html
>>>
>>> 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%20test4.html
>>
>
> Very interesting!
>
> I'd like to comment about the animInit() function, which firstly tests
> for the window.innerWidth property value. Remember that innerWidth and
> innerHeight properties consider, if rendered, the scrollbars dimensions.

I'd forgotten, but I did know this at one time.  Fortunately for this  
application, complete precision is not essential.  I have not tested, but  
there's another complexity that may be a factor: FF on OS X displays the  
scroll bars only when you are actually scrolling, and their thickness  
varies depending on whether the mouse pointer is over the scroll bar or  
not when the scroll is initiated.  Also, the scroll bar is not completely  
opaque, so the decision to include it in the viewable width depends on  
what you are trying to do.  In the case of the skeleton, I wanted him to  
march off the edge of the viewable window, so in retrospect it seems  
appropriate to include the scrollbar area.

> See the section 10.3 (How do I find the size of the window?), in the
> c.l.js FAQ:
> <http://pointedears.de/scripts/faq/cljs/#getWindowSize>

Very thorough, including the archived example code.  Reminds me of why I  
usually try to avoid techniques that require accurate knowledge of window  
or element sizes.
CSS 3 includes (eventually?) viewport-percentage lengths, which might be  
useful in conjunction with calc, *if* browser developers could agree on a  
width definition.

> My FF version 33 (on Linux Mint 17) seems to recognize and use these
> animation-* properties without the -moz prefix. As soon as some
> experimental properties are included in draft CSS specification, Mozilla
> adds the support for the un-prefixed variant. And once standardized, the
> prefixed properties are dropped. See:
>
> <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions>
>

I think we're in a transition phase, where it recognizes either.  Perhaps  
by next year, when Halloween comes around again, none of the prefixes will  
be necessary.

Chris Beall

[toc] | [prev] | [standalone]

Page 2 of 2 — ← Prev page 1 [2]

Back to top | Article view | comp.lang.javascript

csiph-web