Forums

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

<?php wp_head(); ?>

or below

<?php wp_head(); ?>

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?

jamy_za

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): 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.

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.

jamy_za

@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.

kendichev

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

Paulie_D

@kendichev

This is the wrong place for your question.

Please start a new thread.

treehouse : what would you like to learn today?

Forums

[Solved] Hide Div if Screen is Smaller than 1024