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

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

Apply a CSS block onresize?

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

Contents

  Apply a CSS block onresize? Tuxedo <tuxedo@mailinator.com> - 2015-08-19 16:51 +0200
    Re: Apply a CSS block onresize? Martin Honnen <mahotrash@yahoo.de> - 2015-08-19 17:38 +0200
      Re: Apply a CSS block onresize? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-19 18:52 +0200
        Re: Apply a CSS block onresize? Tuxedo <tuxedo@mailinator.com> - 2015-08-19 22:17 +0200

#28541 — Apply a CSS block onresize?

Hello,

I'm not sure what conventions exist but I would like to apply a set of CSS 
rules to an HTML object when resizing the window. First there are one of 
two display styles that take effect on a div depending on the document's 
scroll width:

#menu_small{
border: solid red 1px;
/* and many more properties */
}

#menu_big{
border: solid green 1px;
/* and many more properties */
}

<body onresize="change_display()">

<script>
if(d.body.scrollWidth < 800){
d.write('<div id="menu_small">');
}
else{
d.write('<div id="menu_big">');
}
</script>

<h2>My big or small menu</h2>
<li><a href="#">Item 1</li>
<li><a href="#">Item 2</li>
etc.

<script>
d.write('</div>');
</script>

This works while the page loads, since the browser should know its scroll 
width before it's finished fully loading.

To make the alternate set of style properties take effect also when 
resizing the window, I can run a function onresize modifying the styles 
that exist in the div by collecting and resetting all individual style 
properties via for example getElementByTagName('a') in a loop as well as 
other more specific ID elements within the block by getElementById('...');

Is there a shorter and better way such as dynamically switching the ID of 
the html object along with the set of styles found in its corresponding and 
just changed CSS block? For example, is it possible to call a function 
onresize to do somethng as follows?:

function change_display(){
if(d.body.scrollWidth < 800){

/* If div ID is not already 'menu_small', switch the HTML div ID to 
'menu_small' and apply all properties found within that CSS block */

}
else{

/* If div ID is not already 'menu_big', switch the HTML div ID to 
'menu_big' and apply all properties found within that CSS block */

}

Many thanks for any tips!

Tuxedo

[toc] | [next] | [standalone]

#28542

Tuxedo wrote:

> I'm not sure what conventions exist but I would like to apply a set of CSS
> rules to an HTML object when resizing the window. First there are one of
> two display styles that take effect on a div depending on the document's
> scroll width:
>
> #menu_small{
> border: solid red 1px;
> /* and many more properties */
> }
>
> #menu_big{
> border: solid green 1px;
> /* and many more properties */
> }

I would not change the id of the element but its class e.g.

#menu.small{
border: solid red 1px;
/* and many more properties */
}

#menu.big{
border: solid green 1px;
/* and many more properties */
}


> <body onresize="change_display()">
>
> <script>
> if(d.body.scrollWidth < 800){

  d.write('<div id="menu" class="small">');
> }
> else{

  d.write('<div id="menu" class="big">');
> }
> </script>
>
> <h2>My big or small menu</h2>
> <li><a href="#">Item 1</li>
> <li><a href="#">Item 2</li>
> etc.
>
> <script>
> d.write('</div>');
> </script>

> Is there a shorter and better way such as dynamically switching the ID of
> the html object along with the set of styles found in its corresponding and
> just changed CSS block? For example, is it possible to call a function
> onresize to do somethng as follows?:

Don't change the id of an element, change its class

> function change_display(){
> if(d.body.scrollWidth < 800){
>
> /* If div ID is not already 'menu_small', switch the HTML div ID to
> 'menu_small' and apply all properties found within that CSS block */

     document.getElementById('menu').className = 'small';
>
> }
> else{
>
> /* If div ID is not already 'menu_big', switch the HTML div ID to
> 'menu_big' and apply all properties found within that CSS block */

     document.getElementById('menu').className = 'big';
>
> }

These days CSS might have more powerful rules that don't depend on 
Javascript to adjust your display to the size of the viewport.

--- news://freenews.netfront.net/ - complaints: news@netfront.net ---

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

#28543

Martin Honnen wrote:

> I would not change the id of the element but its class e.g.

I would not do either in this case.

> […]
>> <body onresize="change_display()">
>>
>> <script>
>> if(d.body.scrollWidth < 800){

You should solve this problem with CSS media queries, not scripting.
 
>   d.write('<div id="menu" class="small">');

Do not do that in any case.

  1. You are generating an incomplete element.  This is error-prone at best.
  2. You are generating an element in a render-blocking fashion.

(2) is acceptable if, and only if, you want to ensure maximum backwards-
compatibility.  That is, below IE/MSHTML 4 and Netscape 6.  (For example, 
I am using document.write() as a fallback in the ECMAScript Support Matrix 
[see sig] if .appendChild() & friends are unavailable.)

>> }
>> else{
> 
>   d.write('<div id="menu" class="big">');

See above.

>> }
>> </script>
>>
>> <h2>My big or small menu</h2>
>> <li><a href="#">Item 1</li>
>> <li><a href="#">Item 2</li>
>> etc.

<http://validator.w3.org/> (HTML < 5, XHTML)
<http://validator.w3.org/nu/> (HTML5)

>> <script>
>> d.write('</div>');

No.

> These days CSS might have more powerful rules that don't depend on
> Javascript to adjust your display to the size of the viewport.

It not only might have them, it does: Media Queries.
 
<https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries> pp.

> --- news://freenews.netfront.net/ - complaints: news@netfront.net ---

You should avoid this source of trolls.

-- 
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]

#28546

Thomas 'PointedEars' Lahn wrote:

[...]

> <https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries> pp.

Very nice, I guess most expressions offer consistent result in browsers 
dating back at least a few years. To begin with, something like this is 
perhaps all I will need:
@media (min-width:601px){ for the big screen.. }
@media (max-width:600px){ for the small screen... }

Thanks for the update :-)

Tuxedo

[toc] | [prev] | [standalone]

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

csiph-web