Hide A DIV if screen is narrower than 1024px

Question

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

  $(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?

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

Then at the end of that div (where is 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 cannot get the code to work (testing in IE8) Am I still going wrong somewhere?

Update I do have another piece of jQuery linked, could this be causing the issue? Here is the full piece of coding below

<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

Removed http from URLs due to "low rep" error

what is `http://dl.dropbox.com/u/17087195/website/sidebar_size.js`? — Naftali, Mar 11 '11 at 20:45
@maniator The JS page where the jQuery is located - I find it alot easier to do my testing on DropBox than my server itself (easier to update files etc) Visit the URL if you like — itsdaniel0, Mar 11 '11 at 21:06

Ed Fryed · Accepted Answer · 2014-01-16T08:14:21.917

13

OLD ANSWER 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 there is much more cross browser support for css3 media queries it would be much more effective to use those rather than javascript.

USING 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

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

edited Jan 16 '14 at 08:14

answered Mar 11 '11 at 20:33

Ed Fryed

2,160
16
14

I couldn't get this piece of code to work either, perhaps jQuery hates me – itsdaniel0 Mar 11 '11 at 21:08
sorry my bad. i missed out a bracket the first time. dont like typing in these boxes. :s i have corrected it above and added on on resize function. – Ed Fryed Mar 11 '11 at 22:13
@maniator you are also missing a pair of brackets after width. it is $(window).width() not $(window).width :p – Ed Fryed Mar 11 '11 at 22:19
Sorry for the late reply - I still cannot get this code to work, any suggestions now? – itsdaniel0 Mar 12 '11 at 10:12
1

It definitely works! see demo i put up here -> http://www.fryed.co.uk/tests/resize-test/ . is the rest of your js throwing any errors? – Ed Fryed Mar 12 '11 at 11:19
If I'm correct (I don't use IE), then this is the error it's giving me _I'll add the error message to the above post_ – itsdaniel0 Mar 12 '11 at 11:32
@Ed Fryed I just used the exact same code from the link you gave above, I now have an error on "Line 2 Char 1" (the $) I just though, could it be that the code is in the "body" and not the "head" that is causing this issue? – itsdaniel0 Mar 12 '11 at 12:14
Right! i have found your problem. Its the jquery you are including in your i have redone the demo using everything that you use and the ammended resize script, which can be found here ->http://www.fryed.co.uk/tests/resize-test/ the only thing i changed was to include the jQuery library from google instead of yours. fingers crossed. – Ed Fryed Mar 13 '11 at 12:03
@Ed Fryed Thanks, there is just one problem, I use WordPress and although I have access to the header, I don't have access to that specific line of code (the jQuery line), any suggestions now? **Edit** I just loaded that page (test page) on IE8, screen resolution of 1024 x 600 and the div was still there... Also (I posted this before realising you replied), check this out - Updated codes etc http://stackoverflow.com/questions/5289527/object-doesnt-support-this-property-or-method – itsdaniel0 Mar 13 '11 at 13:13
Fixed it all! There was an issue with the quote ("), it was before "src" and not after "js" (hope that makes sense) Anyway, all done now. Thanks alot for all of your help! – itsdaniel0 Mar 13 '11 at 13:32
Cool beans. Glad you sorted it. :) – Ed Fryed Mar 14 '11 at 11:19

Naftali · Answer 2 · 2011-03-11T20:35:04.757

4

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

});

edited Mar 11 '11 at 20:35

answered Mar 11 '11 at 20:22

Naftali

144,921
39
244
303

Where would I place that? - I've never used jQuery in the past nor am I active with JS – itsdaniel0 Mar 11 '11 at 20:24
place it before the if statement. make sure u include the jquery code in the head tag of your page as well (before this js) – Naftali Mar 11 '11 at 20:24
@maniator So this code should now look like this? `$(document).ready(function () { var screen= $(window) if (screen.width < 1050) { $("#floatdiv").hide(); } else { $("#floatdiv").show(); } });` – itsdaniel0 Mar 11 '11 at 20:28
as long as u have a div with id = floatdiv and everything is included correctly, yes – Naftali Mar 11 '11 at 20:31
Yes, I have `
` Below (at the end of the div) I then have ` ` In my header I have `` And I still cannot get the code to work (testing in IE8) Am I still going wrong somewhere?
– itsdaniel0 Mar 11 '11 at 20:35
edit your post above with your updates. its hard to read in the comments – Naftali Mar 11 '11 at 20:36
you need to put () after width. ie $(window).width() or screen.width() see my code below. it will also run on resize. :) – Ed Fryed Mar 12 '11 at 01:40

score 3 · Answer 3 · edited May 23 '17 at 11:45

3

Media queries for the win

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

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

edited May 23 '17 at 11:45

Community

1
1

answered May 09 '13 at 10:14

Paul C

4,687
5
39
55

Hide A DIV if screen is narrower than 1024px

3 Answers3

Linked

Related