This will format the content differently according to the screen resolution of the user detecting the screen width using the screen.width property and change the stylesheet using jQuery.
Code: Select all
// The first step is to load our base stylesheets, the jQuery library and our javascript.
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="detect800.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="detect.js"></script>
</head>
<body>
<div>The colour of this text will change.</div>
</body>
// We’re going to test if the user screen size is less than 1024 x 768 and if it is, we’ll change the stylesheet.
//Define the same style in two different sheets. Once for the 1024 x 768 and once for the 800 x 600. Just make something quick and distinctive, for detect800.css I’m adding
div{
color: #006699;
font: 24px Georgia, serif;
}
// and for detect1024.css:
div{
color: #df0000;
font: 24px "Trebuchet MS", sans-serif;
}
// We’re going to add a JavaScript alert so the execution will pause until we click OK and we get to see the former style.
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
// As a selector, we look for the link element with a rel attribute with a value of stylesheet. We’re going to redirect its href to a different stylesheet. Now, since I’m loading a reset stylesheet in the first place, i will add the :not(:first) modifier, so it won’t affect the first element.Get full forum access here! || Follow us || Rules || 1 fee, download them all!
Giin70 Said:"im busier than a 3 legged cat on a frozen pond scratching for a place to poop..."
He also Said:"Maybe we can ship yall off to mamby pamby land to look to self confidence, ya jackwagon."
Then"your about as useless as tits on a boar
And:"headspace and keyboard timing issue on end user end"
Always have a back up plan for your back up plan.
My Pc Specs: My Rig!
Giin70 Said:"im busier than a 3 legged cat on a frozen pond scratching for a place to poop..."
He also Said:"Maybe we can ship yall off to mamby pamby land to look to self confidence, ya jackwagon."
Then"your about as useless as tits on a boar
And:"headspace and keyboard timing issue on end user end"
Always have a back up plan for your back up plan.
My Pc Specs: My Rig!
