Help with header.php and javscript implementation
Permalink
Hi i've been trying for a couple days now to figure out how i would go about changing the css template based on users screen resolution. im currently using this piece of javascript to get it done
but im having trouble implementing that into the hearder.php file. it currently uses this function to load the pages style sheet
i tried replacing that with this
but to no avail any help would be appreciated
$(document).ready(function() { if ((screen.width>=1400) && (screen.height>=1050)) { $("link[rel=stylesheet]:not(:first)").attr({href : "style.css"}); } else { $("link[rel=stylesheet]:not(:first)").attr({href : "style1.css"}); } });
but im having trouble implementing that into the hearder.php file. it currently uses this function to load the pages style sheet
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('style.css')?>";</style>
i tried replacing that with this
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="detect.js"></script>
but to no avail any help would be appreciated
Hi, Klauts!
It's very normal that you and many others aren't up2date with the latest developments and technologies used for css and crossplatform resolution independent layout development.
I will tell you some ways:
(I am speaking about css all the time, no need for javascript.)
First recognize the em unit. It can help you building a layout grid that is elastic. Which means resolution adaptive.
So you know three search terms now:
css elastic grids and
adaptive css layout and
resolution independent css
Where the latter keyword involves javascript, that's why I won't recommend it.
Another way is using css3 media queries.http://www.w3.org/TR/css3-mediaqueries/#resolution...
"For example, this media query expresses that a style sheet is usable on devices with resolution greater than 300 dots per inch:
@media print and (min-resolution: 300dpi) { ... }"
and
@media handheld and (grid) and (max-width: 15em) { ... }
etc.
My recomandation is to use an elastic css grid that is automatically scaffolded compressed and gzipped to actual needs.
Means that you don't use cheap frameworks that have bunch of classes that aren't ever used like .grid_12,.grid_16,.push_2 etc. you only define the id's for the divs you want to position and style all css is then "scaffolded"
I'm talking about the Zend way of development.
Oother search terms for you and others are:
CSSScaffolding and
Zen coding
I'm not your private teacher, so you gotta teach all information yourself ;)
All information you can extract from the given keywords is dependant on the language you are searching through and on your personal ability to utilize all that information in your production environment in an effective way.
I hate time designations, really but I can tell you it would approxmiately take less than a minute to code a complex layout my way.
Cheers and have fun reading :)
Fernandos
It's very normal that you and many others aren't up2date with the latest developments and technologies used for css and crossplatform resolution independent layout development.
I will tell you some ways:
(I am speaking about css all the time, no need for javascript.)
First recognize the em unit. It can help you building a layout grid that is elastic. Which means resolution adaptive.
So you know three search terms now:
css elastic grids and
adaptive css layout and
resolution independent css
Where the latter keyword involves javascript, that's why I won't recommend it.
Another way is using css3 media queries.http://www.w3.org/TR/css3-mediaqueries/#resolution...
"For example, this media query expresses that a style sheet is usable on devices with resolution greater than 300 dots per inch:
@media print and (min-resolution: 300dpi) { ... }"
and
@media handheld and (grid) and (max-width: 15em) { ... }
etc.
My recomandation is to use an elastic css grid that is automatically scaffolded compressed and gzipped to actual needs.
Means that you don't use cheap frameworks that have bunch of classes that aren't ever used like .grid_12,.grid_16,.push_2 etc. you only define the id's for the divs you want to position and style all css is then "scaffolded"
I'm talking about the Zend way of development.
Oother search terms for you and others are:
CSSScaffolding and
Zen coding
I'm not your private teacher, so you gotta teach all information yourself ;)
All information you can extract from the given keywords is dependant on the language you are searching through and on your personal ability to utilize all that information in your production environment in an effective way.
I hate time designations, really but I can tell you it would approxmiately take less than a minute to code a complex layout my way.
Cheers and have fun reading :)
Fernandos
Very nice Fernandos, i guess i read the post to fast, i believed he was asking how to change the css "design" based on the resolution i dont know why but i was thinking about loading something like another css style that would change the looks of the page, but i guess his question was just about page resolution and not design.
<link rel="stylesheet" href="<?php echo $this->getThemePath()?>/yourcssfolder/style.css" type="text/css" media="screen" />
Cheers.