CSS and Jquery Anyone?

Submitted by KOMPR3SSOR * 3U on 14. December 2010 - 15:31

ok I'm having this issue Happy
i need to hide a div if screen resolution is less than 1024 PX
i try this code but it doesn't worky anybody could help me >.< ??

<script type="text/javascript">

$(document).ready(function () {

if (screen.width > 1024) {
$(".awards").hide();
}
else {

$(".awards").show();
}

});
</script>

14. December 2010 - 16:01
#1
lectorgc_
lectorgc_'s picture
Offline
Joined: Aug 2010
Posts:
Re: CSS and Jquery Anyone?

I see algorithmic error here: you call hide function when screen res more then 1024. Should be if (screen.width < 1024) 

I have the enemy flag!

* lectorgc_ rolls the dice 2 times ⚅ ⚅ and gets 12

Top
14. December 2010 - 16:04
#2
KOMPR3SSOR * 3U
Offline
Joined: May 2007
Posts:
Re: CSS and Jquery Anyone?

try that allready but is not working >.<

www.hybridixstudio.com | Web Design & Graphic Design
San Diego Web Design | San Diego Web Design Agency

Top
14. December 2010 - 17:21
#3
epsiplayer
THE ONE AND ONLY
intact-epsilon's picture
Offline
Joined: Dec 2006
Posts:
Re: CSS and Jquery Anyone? 

<html>
 <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $('.sw').html(screen.width);
 
            if (screen.width < 1024) {
                $(".awards").hide();
            }
            else {
                $(".awards").show();
            }
        });
    </script>
 </head>
 <body>
    <div class="awards">
        Awards Div is shown
    </div>
    Bla bla bla...
    <br/>
    <br/>
    Screen width is : <div class="sw">?</div>
 </body>
</html>

this 1 works for me and i tested on Firefox 3.6.13 / Internet Explorer 6 & 7 / Google Chrome 8.0.552

_______
epsislow


Top
14. December 2010 - 19:31
#4
KOMPR3SSOR * 3U
Offline
Joined: May 2007
Posts:
Re: CSS and Jquery Anyone?

hum is not working >.<

should i change .sw ? or should i leave it like thaT?

this is my awards css

.awards{
background-image:url(../images/hixs-awards.png);
width:135px;
height:139px;
background-position:left top;
display:block;
position:absolute;
right:0px;
text-indent:-9999px;
top:0;
z-index:3;
}

www.hybridixstudio.com | Web Design & Graphic Design
San Diego Web Design | San Diego Web Design Agency

Top
15. December 2010 - 15:13
#5
Freakman
Freakman's picture
Offline
Joined: Apr 2007
Posts:
Re: CSS and Jquery Anyone?

Maybe try to change visibility property of awards?
document.awards.style.visibility = "hidden"; or sth like that

Freakman:
do u want to beat freakman noob?
lestat:
no thx i have beaten many noobs

it is hard to be pro

Top
15. December 2010 - 15:30
#6
epsiplayer
THE ONE AND ONLY
intact-epsilon's picture
Offline
Joined: Dec 2006
Posts:
Re: CSS and Jquery Anyone?

the difference between
display:block -> display:none
and
visibility:visible ->  visibility:hidden
is that visibility will still consider the container being in that place (it will occupy the space) but it wont be visibile .. while with the display the container will not occupy the space when its not visible.. the containers layout will consider that one as not being there at all.

Damian have you tried my html ? with no modifications, that one should work (im sure 90% )

what i don't understand from your question is why do you use screen.width ? That dosnt make sense to me because screen width is the desktop resolution width .. but that dosnt mean that the client's web page is maximized .. you could have for example a guy that has 1600x1200 or 1280x1024 but he has the browser width less then 1024 (not maximized) ..
so then? maybe try to get the browser's webpage window's width ?
$(window).width()

can you tell me what browser have you tried and what operating system (win/linux...) and give me the full html code .. with unwanted parts skipped if you don't want. but till now what you gaved me, i saw and i dont know why its not workin' already. Happy


Top
18. December 2010 - 13:57
#7
QUICK
Offline
Joined: Dec 2007
Posts:
Re: CSS and Jquery Anyone?

epsi, just add to css:
"display:none;" or "display:block;"
prefer to first state ..

update:)
oops, display already in css, sorry ...

maybe this help:

var ww = $(window).width(); // returns width of browser viewport
var dw = $(document).width(); // returns width of HTML document

$(document).ready(function ()
{
$('div.sw').html(ww);

if (ww < 1024) {
$('div.awards').hide();
}
else {
$('div.awards').show();
}
});

Top