Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post

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

    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.


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


    Code:
    $(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:


    Code:
    $(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?...
    Last edited by eydg; 01-29-2013 at 04:02 AM. Reason: changed title to jQuery

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    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:
    Code:
    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.
    Last edited by sunfighter; 01-28-2013 at 04:34 PM.

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,412
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by eydg View Post
    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:
    Code:
    /* between 1 and 250px wide :*/
    @media screen and (min-width:1) and (max-width:250) {
    	.bigga { display: none; }
    }
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •