Created
January 9, 2012 11:50
-
-
Save anselmh/1582629 to your computer and use it in GitHub Desktop.
change css on viewport based sizes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#id{ | |
background: #999; | |
position: fixed; | |
top:0; | |
width: 100%; | |
height: 10em; | |
z-index: 99999999999999; | |
padding-top:4em; | |
-webkit-transition: all linear 1s; | |
-moz-transition: all linear 1s; | |
-o-transition: all linear 1s; | |
-ms-transition: all linear 1s; | |
transition: all linear 1s; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header id="id"> | |
<h1>this is my headline</h1> | |
<p>This is just a testing site without content</p> | |
</header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(window).resize(viewport); | |
function viewport(){ | |
if(window.innerHeight<900) | |
{ | |
$("#id").css("height","6em").css("padding-top","0"); | |
} | |
else if(window.innerHeight>900) | |
{ | |
$("#id").css("height","10em").css("padding-top","4em"); | |
} | |
return; | |
} |
@susprod yes, this is true. You are right, it is possible with @media-queries but not intended this way. This is the Javascript way and yes, there are use-cases for that.
The problem with the load-size ist another one which has to be solved but it currently is in discussion at W3C/WHATWG list. So soon ther might be a first draft for that problem. :)
@anselmh I hear you. Been looking for a non-loading version of it all. I can't wait for the W3C to figure it out for me.
@susprod many are waiting for this. But still it needs to be implemented in UAs after a spec is released. Fortunately this is a thread by the WHATWG itself :-)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This method works but media queries are easier. However this or media queries still load the content on the page regardless if it was viewable or not. That is the real trick to responsive design.