Hide Div if Screen is Smaller than 1024

[dzulfriday]

hi there..

i want to hide a floating div if the user screen is < 1024 as it will overlay with my blog content area. i found this jquery on the net i am not sure how to use it.

$(document).ready(function() {



if ((screen.width>1024)) {

// if screen size is 1025px wide or larger

$(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();

}

elseif ((screen.width<=1024))  {

// if screen size width is less than 1024px

$(".yourClass").css('display', 'block'); // here you can also use show();

}

});

my first question is, if my floating div class name is sharecontent, should i replace the above script like below? it yes, its not working.

$(document).ready(function() {



if ((screen.width>1024)) {

// if screen size is 1025px wide or larger

$(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();

}

elseif ((screen.width<=1024))  {

// if screen size width is less than 1024px

$(".sharecontent").css('display', 'block'); // here you can also use show();

}

});

Second, where should i place this code in wordpress header? Above

or below

[TT_Mark]

Have you included JQuery in your PHP file? The code needs to be placed after the JQuery file inclusion

[dzulfriday]

yes…now the div is hide no matter what my resolution is…there must’ve been wrong somewhere..

[TT_Mark]

Hmm….well I’d suggest removing the

elseif ((screen.width<=1024))

and just having

else

Are you setting the div to display or hide by default?

[dzulfriday]

how to set it by default?

[dzulfriday]

mistype there:
“yes…now the div is hide no matter what my resolution is…there must’ve been wrong somewhere..”

i meant to type show

why the jquery is like not working?

By the way, here i attach the class sharecontent css

.sharecontent {

background:none repeat scroll 0 0 #FFFFFF;

border:1px solid #FFFFFF;

left:0;

margin:0 0 0 20px;

position:fixed;

top:221px;

width:60px;

}

does the position: fixed cannot be hidden by jquery????

[TT_Mark]

Did you remove the elseif and replace with just an else?

[dzulfriday]

yup…still not working… sigh :(

[heysep]

why do you want to know the screen size?
isn’t an approach via window object what you should be doing?

$(window).width()

[dzulfriday]

i replaced my code above using

$(window).width() 

you gave above and it still not working.

[heysep]

can you link to the related working copy of your site?

[jamygolden]

I don’t actually think javascript is necessary for this. What about css media queries?

[jfreehill]

CSS Media queries are slick, although not supported in IE 8 and lower. Chris made an article that includes a jQuery (& raw Javascript) method for what you’re trying to do that would be supported in any browser (if you care): https://css-tricks.com/resolution-specific-stylesheets/

You’ll want to replace the if statement in this with yours and replace your screen.width with just width . By the way with your code, you’re actually telling it to hide the div if the browser width is above 1024, rather than vice versa, so you’ll want to flip that.

function adjustStyle(width) {

width = parseInt(width);

if (width < 701) {

$("#size-stylesheet").attr("href", "css/narrow.css");

} else if ((width >= 701) && (width < 900)) {

$("#size-stylesheet").attr("href", "css/medium.css");

} else {

$("#size-stylesheet").attr("href", "css/wide.css");

}

}



$(function() {

adjustStyle($(this).width());

$(window).resize(function() {

adjustStyle($(this).width());

});

});

[dzulfriday]

but i want this to be applied at all browser, if the css media queries doesnt work in IE, then it will not solve my problem.

by the way jfreehill, i am telling it to hide the div if the browser width is above 1024 on purpose…because i am tired keep changing my monitor resolution for this testing, so if its hidden at the > 1024, then i know its working. i will flip that later.

[jamygolden]

@dzulfriday read the media queries article. It is awesome and it will solve some of your questions. The snippet above that @jfreehill pasted is from this article which was linked to from the media queries article while discussing browser compatibility.

[Author]

Posts