jQuery SOLVED: js vs CSS condition: hide a class of elements when screen small

[eydg]

the following JS does work, somehow, but i have a sense that something is inherently wrong with the condition. could you pls help me sort it out?

Here's the simple html. I want the age distinction (adult vs child) to be out of the screen when it can not contain too many elements.

             <div  align="center">
                       <select data-role="slider">
                        <option value="off" >man</option>
                        <option value="on"> woman</option>
                      </select>
                    </div></td>
    <td>                    <div class="bigga"  align="center">
                      <select data-role="slider" >
                          <option value="off">adult</option>
                        <option value="on"> child</option>
                      </select>

and here is the unelegant js:

$(document).ready(function() {
if ((screen.width>=240) )
{
 $('.bigga').hide();
}
if ((screen.width>=320) )
{
 $('.bigga').show();
}
});

First of all, all the trick should be doable with just one condition. By logic, this condition should look as follows:

$(document).ready(function() {
if ((screen.width<=240) )
{
 $('.bigga').hide();
}
});

This would mean that when the screen width is 240 or smaller, the "bigga" clas of elements does not show up.
Why does it not work?...

[sunfighter]

I hope you are doing this on a mobile device eydg, because the width of your screen, ie; your monitor, does not change. My screen is 1440 px wide so this does work on my screen:

if(screen.width <= 1440) $('.bigga').hide();

And your code should work if your checking it on a suitable device. Maybe you should use the size of 320 instead of 240.

A good place to look maybe https://developer.mozilla.org/en-US/.../Media_queries and use css instead of jquery.

If you are not working with a cell or a tablet you need to use the width of the browser.

[eydg]

yes, i need it to work with phones too.

media queries - if i understand the linked tutorials - involve several different css'es applied depending on various conditions, like f e screen resolution.

this would greatly complicate future reediting. If possible at all, i would like to stay with js.

it appears to work. thank you.

[rnd me]

Originally Posted by eydg

yes, i need it to work with phones too.

media queries - if i understand the linked tutorials - involve several different css'es applied depending on various conditions, like f e screen resolution.

this would greatly complicate future reediting. If possible at all, i would like to stay with js.

it appears to work. thank you.

my $0.02: i think putting CSS into JS would greatly complicate future reediting. CSS belongs in CSS files, where it controls presentation. JS is for behavior, and behavior, content, and presentation should be kept separate.

all you would need to do is define your small screen class inside a small screen media query.



i like to use min/max for everything for greater cut and pastability:

/* between 1 and 250px wide :*/
@media screen and (min-width:1) and (max-width:250) {
	.bigga { display: none; }
}

[eydg]

it does work. thank you. just needed to add px.

appears to be a recurrent motive, so to sum up, in case someone needs it:

html content
css presentation
js behaviour