Hide DIV if screen is already 1024px

Question

I found (from this question - Hide div if the screen is less than a certain width ) this piece of code

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

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

So far, I am <div id="floatdiv">

Then at the end of this div (where it closes) I have

 <!--[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>

And I still can not get the code to work (testing in IE8) Am I still mistaken?

Update I have another piece of jQuery related, can this be the cause of the problem? Below is the full code snippet

 <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, Mar 12, 2011 11:31:32 UTC

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

Message: the object does not 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' 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' null or not an object Line: 1 Char: 5207 Code: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

Removed http from urls due to "low response" error

Answer 1

OLD RESPONSE USING 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 much more cross-browser support for css3 media queries would be much more efficient to use those rather than javascript.

USE OF 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; } } 

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

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

Answer 2

you need to set the screen element:

 var screen = $(window) 

eg:

 $(document).ready(function () { var screen = $(window) if (screen.width < 1024) { $("#floatdiv").hide(); } else { $("#floatdiv").show(); } }); 

Answer 3

Media Requests for Victory

How to make div not display if browser window has a certain width?

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