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


 

Forums >

comp.lang.javascript

Setting style with JS including @media statement?

Tuxedo

9/5/2015 3:48:00 PM

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

Evertjan.

9/5/2015 9:05:00 PM

0

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/responsivestuf...


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

Evertjan.

9/5/2015 9:34:00 PM

0

"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/responsivestuf...

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/onresi...

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