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

Groups > comp.lang.javascript > #28542

Re: Apply a CSS block onresize?

Show all headers | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web