Jquery 如果屏幕小于1024px，则隐藏DIV

我（从这个问题中）找到了这段代码

  $(document).ready(function () {

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

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

});

$（文档）.ready（函数（）{
如果（屏幕宽度<1024）{
$（“#floatdiv”）.hide（）；
}
否则{
$（“#floatdiv”）.show（）；
}
});

唯一的问题是，我似乎无法让代码正常工作，我只需要为IE编写代码，我将为其他（较新的）浏览器使用媒体查询。 有关于我哪里出了问题的提示/提示吗

到目前为止我有

然后在那个div的末尾（这里是closes），我有

在我的标题中我有

我仍然无法让代码正常工作（在IE8中测试） 我还在哪里出错吗

更新我确实有另一个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]-->

错误消息

网页错误详细信息

用户代理：Mozilla/4.0（兼容； MSIE7.0；WindowsNT5.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）时间戳：Sat， 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.\u实例” 为空或不是对象行：1个字符： 5207代码：0 URI: platform.twitter.com/anywhere.js？id=6vipelyeu5vcsc3c0q5w&v=1

消息：“twttr.anywhere.\u实例” 为空或不是对象行：1个字符： 5207代码：0 URI: platform.twitter.com/anywhere.js？id=6vipelyeu5vcsc3c0q5w&v=1

---

由于“low rep”错误，已从URL中删除http。您需要设置屏幕元素：

var screen = $(window)

例如：

$(document).ready(function () {

    var screen = $(window)    

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

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

});

$（文档）.ready（函数（）{
变量屏幕=$（窗口）
如果（屏幕宽度<1024）{
$（“#floatdiv”）.hide（）；
}
否则{
$（“#floatdiv”）.show（）；
}
});

使用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();
    });

});

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

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

---

媒体对胜利的质疑

---

我该把它放在哪里我过去从未使用过jQuery，也没有在jsp中使用过jQuery。请将它放在if语句之前。确保在页面的head标记中也包含jquery代码（在这个js@maniator之前），那么这个代码现在应该是这样的吗<代码>$（文档）.ready（函数（）{var screen=$（窗口）if（screen.width<1050）{$（“#floatdiv”）.hide（）；}else{$（“#floatdiv”）.show（）；}）只要你有一个id=floatdiv的div，并且所有内容都包含正确，是的，我有下面的

（在div的末尾），我就有

在我的头中，我有

，我仍然无法让代码工作（在IE8中测试）我还在哪里出错吗？什么是

http://dl.dropbox.com/u/17087195/website/sidebar_size.js

？@maniator jQuery所在的JS页面-我发现在DropBox上进行测试比我的服务器本身要容易得多（更容易更新文件等）。如果你喜欢，请访问URL我也无法让这段代码正常工作，也许jQuery讨厌mesorry。我第一次漏掉了一个括号。我不喜欢在这些盒子里打字“我已经在上面对其进行了更正，并添加了调整大小功能。@maniator您在宽度后还缺少一对括号。”。它是$（window）.width（）而不是$（window）.width:pSorry用于延迟回复-我仍然无法让这段代码正常工作，现在有什么建议吗？它肯定有效！请看我在这里展示的演示->。您的js的其余部分是否抛出任何错误？

/* 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;
    }
}

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

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