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
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): http://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.
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.
@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.
Can you help me about problem? This is the thing: I am tryin to have the bottom of the sidebar sticking to the bottom of the brouser after scrolling, just like facebook right side bar with commercials. thanks in advice
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.
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.
Second, where should i place this code in wordpress header? Above or below
and just having
Are you setting the div to display or hide by default?
"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
does the position: fixed cannot be hidden by jquery????
isn't an approach via window object what you should be doing?
$(window).width()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.
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.
Can you help me about problem? This is the thing: I am tryin to have the bottom of the sidebar sticking to the bottom of the brouser after scrolling, just like facebook right side bar with commercials. thanks in advice
@kendichev
This is the wrong place for your question.
Please start a new thread.