javascript - Change visibility of a div, with respect to width of screen - Stack Overflow

admin管理员组

文章数量:1312965

I am trying to set a div to hidden if the width of the window gets small than 400px. But what I am trying does not seem to work.. What am I doing wrong?

JS:

$(document).ready(function () {
   if ($(window).width <= 400)
    {
        $("#nav").css('visibility','hidden');
    }
    else
    {
        ("#nav").css('visibility','visible');
    }

});

HTML:

<div id="nav">
    //... a few lines of paragraphs and lists ...
</div>

CSS:

#nav {                  /* Navigation Bar */
    width: 37%;
    position: relative;
    left: 30px;
    top: 48px;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    visibility: visible;
}

There aren't any issues with the HTML and CSS as far as I'm concerned. Seems to me that the JS is what's causing it not to work.

I am trying to set a div to hidden if the width of the window gets small than 400px. But what I am trying does not seem to work.. What am I doing wrong?

JS:

$(document).ready(function () {
   if ($(window).width <= 400)
    {
        $("#nav").css('visibility','hidden');
    }
    else
    {
        ("#nav").css('visibility','visible');
    }

});

HTML:

<div id="nav">
    //... a few lines of paragraphs and lists ...
</div>

CSS:

#nav {                  /* Navigation Bar */
    width: 37%;
    position: relative;
    left: 30px;
    top: 48px;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    visibility: visible;
}

There aren't any issues with the HTML and CSS as far as I'm concerned. Seems to me that the JS is what's causing it not to work.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Oct 9, 2014 at 17:36 jeanjean 1,01311 gold badge1212 silver badges2424 bronze badges 2

• Document ready only fires when the page is loaded. If you want to capture the width every time the client size changes you'll have to set up some events. – blackops Commented Oct 9, 2014 at 17:40
• 1 why not css you can use @media queries jsfiddle/victor_007/df3d5n2b ? – Vitorino fernandes Commented Oct 9, 2014 at 17:42

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

there are a few issues

1. it should be $(window).width()

2. you're missing $ at the beggining of: ("#nav").css('visibility','visible'); in your else statment

3. in order for this to trigger on resize you need to invoke the resize function (otherwise it will only trigger once on page load):

   $(window).resize(function(){
   
     //run your code
   
   });
   

4. This can be done very simply (and without the overhead of jquery's resize function) with css media queries:

   @media only screen and (max-width: 400px){
      #nav {
         visibility: hidden;
      }
   
   }
   

You're only checking window size once...when the document loads.

Try this outside the document.ready

$( window ).resize(function() {
if ($(window).width() <= 400)
    {
        $("#nav").css('visibility','hidden');
    }
    else
    {
        ("#nav").css('visibility','visible');
    }
});

Try

$("#nav").css('display','none'); // for hidden

and

$("#nav").css('display','block'); // for visibility

Looks like I'm the latest to the party, but here's what I came up with:

jsFiddle Demo

jQuery:

var resdiv = $('#result');
var ws;

$(window).on('resize', function(){
    ws = $(window).width();
    resdiv.html(ws);
    if (ws <= 400) {
        $("#nav").css('display','none');
    }else{
        $("#nav").css('display','block');
    }
});

HTML:

<div id="result"></div>
<div id="nav">
    A few lines of paragraphs and lists ... 
</div>

CSS:

#result{width:80px;height:30px;position:fixed;background:wheat;}
#nav {                  /* Navigation Bar */
    width: 37%;
    position: relative;
    left: 30px;
    top: 48px;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    visibility: visible;
}

You need to call the .width() function.

 if ($(window).width() <= 400)
                    ^^

You don't need JS, just use CSS media queries:

@media only all and (max-width: 400px) {
  #nav{
    visibility: hidden;
  }
}

<div id="nav">Foo bar</div>

You can do this with both JS and with pure CSS. For JS, you need to bind an event to the window's resize event:

JavaScript Solution:

$(window).on('resize', function () {
    if ($(this).width() <= 400) {
        $("#nav").css('visibility','hidden');
    } else {
        ("#nav").css('visibility','visible');
    }
});

Notes:

There are a few notes to consider when doing this method. One, not all browsers fire the resize event the same way. Some fire the event once after resizing is plete. Other's will fire the resize event multiple times as the window grows or shrinks. This behavior could be slightly different that you're intending.

Also, with regards to .width(), .width() is a method and therefore requires the parenthesis as a function invocation as oppose to just .width as you have above.

CSS Solution:

Through the use of media queries, you can acplish the same task. Note that media query support is still evolving so some older browsers (IE 8) don't support them. This may limit your usage of this method:

/* Declare an initial state */
#nav {
    visibility: visible;
}

/* Override that based on the window size */
@media only screen (max-width: 400px) {
    #nav {
        visibility: hidden;
    }
}

Final Thoughts...

The CSS method described above should provide a more fluid user experience as you're not having JavaScript due any calculations. This is all handled internally by the browser providing a smoother experience for your user by removing an additional layer of abstraction.

On a different note, depending on your desired effect, be sure to check out the documentation for visibility and display to understand their appropriate use case. According to the MDN docs for visibility:

The visibility CSS property has two purposes:

1. The hidden value hides an element but leaves space where it would have been.
2. The collapse value hides rows or columns of a table. It also collapses XUL elements.

Likewise the MDN docs for display:

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

Depending on whether you want the element to maintain its space on the screen but not be visible you may want to look at display instead of visibility. If you decide to use the JavaScript snippet above change the following lines:

.css('visibility', 'hidden');
// to
.hide()

// and

.css('visibility', 'visible');
// to
.show()

As a reference, review the following documentation:

• .hide()
• .show()

本文标签： javascriptChange visibility of a divwith respect to width of screenStack Overflow