$(document).ready(function () {
if (screen.width < 1024) {
$("#floatdiv").hide();
}
else {
$("#floatdiv").show();
}
});
唯一的问题是,我似乎无法让代码工作,我只需要为IE工作的代码,我将使用Media Queries用于其他(较新的)浏览器.
关于我哪里出错的任何提示/提示？
到目前为止我有
< div id =“floatdiv”>
然后在那个div的末尾(哪里关闭)我有
<!--[if lt IE 9]> <script type="text/javascript" src="http://dl.dropBox.com/u/17087195/website/sidebar_size.js"></script> <![endif]-->
在我的标题中我有
< script type ='text / javascript'src ='http：//www.itsdaniel0.com/wp-includes/js/jquery/jquery.js？ver = 1.4.4'>< / script>
我仍然无法使代码工作(在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&layout=Box_count&show_faces=true&width=55&action=like&colorscheme=light&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&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]-->
错误信息
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 UTCMessage: 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.jsMessage: ‘twttr.anywhere._instances’
is null or not an object Line: 1 Char:
5207 Code: 0 URI:
platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1Message: ‘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
解决方法
//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();
});
});
编辑：请注意,现在有更多的跨浏览器支持css3媒体查询,使用这些而不是JavaScript更有效.
使用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;
}
}
请注意,在大多数现代浏览器中,您还可以使用window.matchMedia在javascript中运行媒体查询
if(window.matchMedia("(min-width:1024px)").matches){
console.log("window is greater than 1024px wide");
}
