/    Sign up×
Community /Pin to ProfileBookmark

Screen height check for css not working

Copy linkTweet thisAlerts:
Aug 18.2011

Hi I’m having trouble making this work. I have this script inside a .js file. I haven’t specified a height in the .css file for #cellsouter, so the script can take care of it. I’ve tried adding curly brackets and semicolons but it’s not playing ball

[code]
if (screen.height<=960)
document.getElementById(“cellsouter”).style.height=”55%”
else
document.getElementById(“cellsouter”).style.height=”70%”
[/code]

thank you

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@W8_4meauthorAug 18.2011 — This doesn't work either... does screen.height or window.height actually work anymore?

?

<i>
</i>if (window.height&lt;=864)
{
document.getElementById("content").style.height="55%";
document.getElementById("navtabs").style.bottom="55%";
document.getElementById("cellsinner").style.height="54%";
}
else
{
document.getElementById("content").style.height="70%";
document.getElementById("navtabs").style.bottom="70%";
document.getElementById("cellsinner").style.height="69%";
}
Copy linkTweet thisAlerts:
@rnd_meAug 18.2011 — window.innerHeight, screen.height, document.body.offsetHeight.
Copy linkTweet thisAlerts:
@W8_4meauthorAug 18.2011 — Thanks rnd me. I tried window.innerHeight but still no luck. I use the latest version of FF - I have not checked it in IE because I installed Windows 7 Service Pack 1 and IE9 at the same time and it appears to have destroyed IE9's functionality (won't display jpegs or switch layers from another javascript).

Do I need to use all of what you said? Three separate scripts for cross browser compat?
Copy linkTweet thisAlerts:
@rnd_meAug 18.2011 — personally, i would do it all in css.

you can then uses classes and/or media queries to select the right set of rules.

this is easier to maintain, separates look from behavior, and is more resilient towards future browsers.


css
[CODE]body.small #content { height: 55%; }
body.small #content { bottom: 55%; }
body.small #content { height: 54%; }

body.big#content { height: 70%; }
body.big#content { bottom: 70%; }
body.big#content { height: 69%; }[/CODE]



js (in body)
[CODE]
<script>
document.body.className+= (window.innerHeight||document.body.offsetHeight||screen.height) <865 ?

"small" :
"big" ;
</script>[/CODE]
Copy linkTweet thisAlerts:
@W8_4meauthorAug 18.2011 — I agree with you but your way is not working either. Or more likely I'm not making it work correctly!

I've used the script as is, and also within a separate .js file then added your CSS (as below).

<i>
</i>body.small #content { height: 55%; }
body.small #navtabs { bottom: 55%; }
body.small #cellsinner { height: 54%; }

body.big#content { height: 70%; }
body.big#navtabs { bottom: 70%; }
body.big#cellsinner { height: 69%; }


...and then added classes to the relevant div's...

<i>
</i>&lt;div id="content" class="small"&gt;

&lt;div id="navtabs" class="small"&gt;

...

&lt;div id="cellsinner" class="small"&gt;


The result is that my content disappears, as if no height is specified.

Note: I didn't set the heights/bottom values in the original #content/#navtabs/#cellsinner declarations as your CSS is handling them.

*sigh*

Thank you muchly but this one's a tough nut to crack, or I'm doing this retardedly.
Copy linkTweet thisAlerts:
@rnd_meAug 18.2011 — there was a typo in my css:

body.big#cellsinner should be "body.big #cellsinner" (space between body and id selector). fix on all the rules, and use the right css for your project, not whatever i threw together...


you don't need classes on individual tags, body's class SHOULD change, which activates one of the css rule prefixes...
×

Success!

Help @W8_4me spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...