jQuery 如果屏幕小于 1024 像素，则隐藏 DIV

Hide A DIV if screen is narrower than 1024px

提问by itsdaniel0

I found (from this question - Hide div if screen is smaller than a certain width) this piece of coding

我发现（从这个问题 -如果屏幕小于某个宽度，则隐藏 div）这段代码

  $(document).ready(function () {

    if (screen.width < 1024) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

The only problem is, I cannot seem to get the code to work, I only need to code to work for IE, I'm going to use Media Queries for other (newer) browsers. Any hints/tips on where I'm going wrong?

唯一的问题是，我似乎无法让代码工作，我只需要编写代码即可为 IE 工作，我将在其他（较新的）浏览器中使用媒体查询。关于我哪里出错的任何提示/提示？

So far I have <div id="floatdiv">

到目前为止我有 <div id="floatdiv">

Then at the end of that div (where is closes) I have

然后在那个 div 的末尾（关闭的地方）我有

<!--[if lt IE 9]>
<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar_size.js"></script>
<![endif]-->

In my header I have <script type='text/javascript' src='http://www.itsdaniel0.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>

在我的标题中，我有 <script type='text/javascript' src='http://www.itsdaniel0.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>

And I still cannot get the code to work (testing in IE8) Am I still going wrong somewhere?

而且我仍然无法使代码工作（在 IE8 中测试）我仍然在某个地方出错吗？

UpdateI do have another piece of jQuery linked, could this be causing the issue? Here is the fullpiece of coding below

更新我确实链接了另一段 jQuery，这可能是导致问题的原因吗？这是下面的完整代码

<div id="floatdiv">

<div class="floating-menu">

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.itsdaniel0.com%2F2011%2F03%2Funicorns-are-cool%2F&amp;layout=box_count&amp;show_faces=true&amp;width=55&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>

<br /><br /><a href="http://twitter.com/share?url=http%3A%2F%2Fid0.me%2Fj0&amp;counturl=http://www.itsdaniel0.com/2011/03/unicorns-are-cool/" class="twitter-share-button" data-text="Unicorns Are Cool" data-count="vertical" data-via="itsdaniel0 #itsdaniel0">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<br /><br />

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

</div>

</div>

<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar.js"></script>

<!--[if lt IE 9]>

<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar_size.js"></script>

<![endif]-->

Error Message

错误信息

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; chromeframe/10.0.648.133; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.2) Timestamp: Sat, 12 Mar 2011 11:31:32 UTC

Message: Expected identifier, string or number Line: 140 Char: 1 Code: 0 URI: www.itsdaniel0.com/2011/03/unicorns-are-cool/

Message: Object doesn't support this property or method Line: 16 Char: 1 Code: 0 URI: dl.dropbox.com/u/17087195/website/sidebar_size.js

Message: 'twttr.anywhere._instances' is null or not an object Line: 1 Char: 5207 Code: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

Message: 'twttr.anywhere._instances' is null or not an object Line: 1 Char: 5207 Code: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

网页错误详情

用户代理：Mozilla/4.0（兼容；MSIE 7.0；Windows NT 5.1；Trident/4.0；chromeframe/10.0.648.133；.NET CLR 1.1.4322；.NET CLR 2.0.50727；.NET CLR 3.0.NET15206. 3.5.30729；OfficeLiveConnector.1.5；OfficeLivePatch.1.3；.NET4.0C；.NET4.0E；InfoPath.2) 时间戳：2011 年 3 月 12 日星期六 11:31:32 UTC

消息：预期的标识符、字符串或数字行：140 字符：1 代码：0 URI：www.itsdaniel0.com/2011/03/unicorns-are-cool/

消息：对象不支持此属性或方法行：16 字符：1 代码：0 URI：dl.dropbox.com/u/17087195/website/sidebar_size.js

消息：'twttr.anywhere._instances' 为空或不是对象行：1 字符：5207 代码：0 URI：platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

消息：'twttr.anywhere._instances' 为空或不是对象行：1 字符：5207 代码：0 URI：platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

Removed http from URLs due to "low rep" error

由于“低代表”错误，从 URL 中删除了 http

回答by Ed Fryed

OLD ANSWER USING JQUERY:

使用 JQUERY 的旧答案：

//the function to hide the div
function hideDiv(){

    if ($(window).width() < 1024) {

            $("#floatdiv").fadeOut("slow");

    }else{

        $("#floatdiv").fadeIn("slow");

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});

EDIT: Please note that now there is much more cross browser support for css3 media queries it would be much more effective to use those rather than javascript.

编辑：请注意，现在对 css3 媒体查询有更多的跨浏览器支持，使用它们而不是 javascript 会更有效。

USING CSS.

使用 CSS。

/* always assume on smaller screen first */

#floatdiv {
    display:none;
}

/* if screen size gets wider than 1024 */

@media screen and (min-width:1024px){
    #floatdiv {
        display:block;
    }
}

Note that in most modern browsers you can also run media queries in javascript using window.matchMedia

请注意，在大多数现代浏览器中，您还可以使用 window.matchMedia 在 javascript 中运行媒体查询

if(window.matchMedia("(min-width:1024px)").matches){
    console.log("window is greater than 1024px wide");
}

回答by Naftali aka Neal

you need to set the screen element:

您需要设置屏幕元素：

var screen = $(window)

for example:

例如：

$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1024) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

回答by Coops

Media queries for the win

媒体查询获胜

How do I make a div not display, if the browser window is at a certain width?

如果浏览器窗口处于特定宽度，如何使 div 不显示？

@media all and (max-width: 1024px) { /* Change Width Here */
  div.class_name {
     display: none;
  }
}