Grow your CSS skills. Land your dream job.

Hide Div if Screen is Smaller than 1024

  • # November 27, 2010 at 11:03 am

    hi there..

    i want to hide a floating div if the user screen is < 1024 as it will overlay with my blog content area. i found this jquery on the net i am not sure how to use it.

    $(document).ready(function() {

    if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();
    }
    elseif ((screen.width< =1024)) {
    // if screen size width is less than 1024px
    $(".yourClass").css('display', 'block'); // here you can also use show();
    }
    });

    my first question is, if my floating div class name is sharecontent, should i replace the above script like below? it yes, its not working.

    $(document).ready(function() {

    if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();
    }
    elseif ((screen.width< =1024)) {
    // if screen size width is less than 1024px
    $(".sharecontent").css('display', 'block'); // here you can also use show();
    }
    });

    Second, where should i place this code in wordpress header? Above

    < ?php wp_head(); ?>

    or below

    < ?php wp_head(); ?>
    # November 27, 2010 at 11:16 am

    Have you included JQuery in your PHP file? The code needs to be placed after the JQuery file inclusion

    # November 27, 2010 at 11:48 am

    yes…now the div is hide no matter what my resolution is…there must’ve been wrong somewhere..

    # November 27, 2010 at 12:26 pm

    Hmm….well I’d suggest removing the

    elseif ((screen.width< =1024))

    and just having

    else

    Are you setting the div to display or hide by default?

    # November 27, 2010 at 12:29 pm

    how to set it by default?

    # November 27, 2010 at 12:33 pm

    mistype there:
    “yes…now the div is hide no matter what my resolution is…there must’ve been wrong somewhere..”

    i meant to type show

    why the jquery is like not working?

    By the way, here i attach the class sharecontent css


    .sharecontent {
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #FFFFFF;
    left:0;
    margin:0 0 0 20px;
    position:fixed;
    top:221px;
    width:60px;
    }

    does the position: fixed cannot be hidden by jquery????

    # November 27, 2010 at 1:26 pm

    Did you remove the elseif and replace with just an else?

    # November 27, 2010 at 1:36 pm

    yup…still not working… sigh :(

    # November 27, 2010 at 3:18 pm

    why do you want to know the screen size?
    isn’t an approach via window object what you should be doing?

    $(window).width()

    # November 28, 2010 at 2:30 am

    i replaced my code above using

    $(window).width() 

    you gave above and it still not working.

    # November 28, 2010 at 11:27 am

    can you link to the related working copy of your site?

    # November 28, 2010 at 1:35 pm

    I don’t actually think javascript is necessary for this. What about css media queries?

    # November 28, 2010 at 7:16 pm

    CSS Media queries are slick, although not supported in IE 8 and lower. Chris made an article that includes a jQuery (& raw Javascript) method for what you’re trying to do that would be supported in any browser (if you care): http://css-tricks.com/resolution-specific-stylesheets/

    You’ll want to replace the if statement in this with yours and replace your screen.width with just width . By the way with your code, you’re actually telling it to hide the div if the browser width is above 1024, rather than vice versa, so you’ll want to flip that.

    function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
    $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
    $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
    $("#size-stylesheet").attr("href", "css/wide.css");
    }
    }

    $(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
    adjustStyle($(this).width());
    });
    });
    # November 28, 2010 at 8:16 pm

    but i want this to be applied at all browser, if the css media queries doesnt work in IE, then it will not solve my problem.

    by the way jfreehill, i am telling it to hide the div if the browser width is above 1024 on purpose…because i am tired keep changing my monitor resolution for this testing, so if its hidden at the > 1024, then i know its working. i will flip that later.

    # November 29, 2010 at 12:14 am

    @dzulfriday read the media queries article. It is awesome and it will solve some of your questions. The snippet above that @jfreehill pasted is from this article which was linked to from the media queries article while discussing browser compatibility.

Viewing 15 posts - 1 through 15 (of 17 total)

The topic ‘Hide Div if Screen is Smaller than 1024’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".