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

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

Setting style with JS including @media statement?

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

Contents

  Setting style with JS including @media statement? Tuxedo <tuxedo@mailinator.com> - 2015-09-05 17:48 +0200
    Re: Setting style with JS including @media statement? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-05 23:04 +0200
      Re: Setting style with JS including @media statement? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-05 23:33 +0200

#28644 — Setting style with JS including @media statement?

Hello,

Using CSS @media queries rather than conditional JS-CSS style 
modification if matching some body.scrollWidth statement, styling for 
different screens is much simplified. For example:

@media (max-width: 300px){
#my_menu{
backgroundImage='url(small.png')';
}
}

But there are still situations where it may be necessary to dynamically 
change styles to elements via JS. Normally I would do:
document.getElementById("my_menu").style.backgroundImage='url(another.png)';

In combination with media queries, however, the above also changes style 
properties relating to any media queries above 300 pixels, which I don't 
want it to. As such, is it possible to change #my_menu element including the 
CSS @media condition so that the @media (max-width: 300px) is properly 
expressed and applied to the document via Javascript? If so, how can this be 
done?

Many thanks,
Tuxedo

[toc] | [next] | [standalone]

#28648

Tuxedo <tuxedo@mailinator.com> wrote on 05 Sep 2015 in
comp.lang.javascript: 

> 
> Hello,
> 
> Using CSS @media queries rather than conditional JS-CSS style 
> modification if matching some body.scrollWidth statement, styling for 
> different screens is much simplified. For example:
> 
> @media (max-width: 300px){
>#my_menu{
> backgroundImage='url(small.png')';
>}
>}
> 
> But there are still situations where it may be necessary to dynamically 
> change styles to elements via JS. Normally I would do:
> document.getElementById("my_menu").style.backgroundImage='url(another.png
> )'; 
> 
> In combination with media queries, however, the above also changes style
> properties relating to any media queries above 300 pixels, which I don't
> want it to. As such, is it possible to change #my_menu element including
> the CSS @media condition so that the @media (max-width: 300px) is
> properly expressed and applied to the document via Javascript? If so,
> how can this be done?

window.onresize = function(event) { if (...) etc. };

To get your mind to it, 
look at this amazing page,
and look at its source-code:

<http://maloweb.com/snippets/responsivestuff.html>


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

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

#28649

"Evertjan." wrote on 05 Sep 2015 in comp.lang.javascript:

> To get your mind to it, 
> look at this amazing page,
> and look at its source-code:
> 
> <http://maloweb.com/snippets/responsivestuff.html>

Now add on top:

<meta name="viewport" content="width=device-width, initial-scale=1">

and see what happens and what not in mobile and desktop browsers:

<http://hannivoort.org/test/onresize.asp>

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

[toc] | [prev] | [standalone]

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

csiph-web