PDA

View Full Version : Background based on Resolution with Javascript



bitejones
07-21-2012, 11:55 PM
I'm a complete idiot with javascript im trying execute a specific .css file base on the user's screen resolution. I have this code which i thought should work. PLEASE HELP


<script type="text/javascript">
<!--

var width = screen.width;
var height = screen.height;

if ((width==800) && (height==600)){document.write('<link rel="stylesheet" type="text/css" href="/includes/800x600.css" />'); }
if ((width=1024) && (height==768)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1024x768.css" />'); }
if ((width==1920) && (height==1080)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1920x1080.css" />'); }
if ((width==1280) && (height==768)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1280x768.css" />'); }
if ((width==1440) && (height==900)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1440x900.css" />'); }
--></script>

low tech
07-22-2012, 12:29 AM
Hi

if ((width=1024)

should be

if ((width==1024)


also are you missing .. from this line
href="/includes/800x600.css" />

should be
href="../includes/800x600.css" />

LT

Lerura
07-22-2012, 12:38 AM
it is better to use appendChild() than document.write():


function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}


<script type="text/javascript">
<!--

var width = screen.width;
var height = screen.height;

if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');}
if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}
if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');}
if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');}
if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');}
--></script>

The problem with your code is that it only covers 5 different resolutions and no alternative if none of the requirements is met.

I will suggest that you include a default stylesheet that will be be used if none of the specified resolutions are used:

<script type="text/javascript">
<!--

var width = screen.width;
var height = screen.height;

if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');}
else if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}
else if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');}
else if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');}
else if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');}
else{ImportStyleSheet('../includes/OtherResolutions.css');}
--></script>

DrDOS
07-22-2012, 01:19 AM
If you just want to change the background image and maybe a couple of other things just use this line.


document.body.style.background=, or width, etc.

With your if statements of course. It's not so easy to change stuff in the head of the document.

bitejones
07-22-2012, 01:36 AM
it is better to use appendChild() than document.write():


function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}


<script type="text/javascript">
<!--

var width = screen.width;
var height = screen.height;

if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');}
if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}
if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');}
if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');}
if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');}
--></script>

The problem with your code is that it only covers 5 different resolutions and no alternative if none of the requirements is met.

I will suggest that you include a default stylesheet that will be be used if none of the specified resolutions are used:

<script type="text/javascript">
<!--

var width = screen.width;
var height = screen.height;

if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');}
else if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}
else if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');}
else if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');}
else if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');}
else{ImportStyleSheet('../includes/OtherResolutions.css');}
--></script>

I copied and paste the code exactly how u had it and it still did not work. this is wot i did.


<script type="text/javascript">
<!--
function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}


var width = screen.width;
var height = screen.height;

if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');}
else if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}
else if ((width==1366) && (height==768)){ImportStyleSheet('../includes/1366x768.css');}
else if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');}
else if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');}
else if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');}
else{ImportStyleSheet('../includes/1366x768.css');}

--></script>

The script is picking up my current screen resolution which is 1366x768, however it is not executing the .css

Richter
07-22-2012, 03:15 AM
Hi bitejones,
I change your code from if statement to switch statement, it work well.


<script type="text/javascript">
<!--
function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}

//function ImportStyleSheet(File){ alert(File); }

var width = screen.width;
var height = screen.height;

switch(true){
case ((width == 800) && (height == 600)):
ImportStyleSheet('../includes/800x600.css');
break;

case ((width==1024) && (height==768)):
ImportStyleSheet('../includes/1024x768.css');
break;

case ((width==1366) && (height==768)):
ImportStyleSheet('../includes/1366x768.css');
break;

case ((width==1920) && (height==1080)):
ImportStyleSheet('../includes/1920x1080.css');
break;

case ((width==1280) && (height==768)):
ImportStyleSheet('../includes/1280x768.css');
break;

case ((width==1440) && (height==900)):
ImportStyleSheet('../includes/1400x900.css');
break;

default :
ImportStyleSheet('../includes/1366x768.css');
}

--></script>

bitejones
07-22-2012, 03:44 AM
Hi bitejones,
I change your code from if statement to switch statement, it work well.


<script type="text/javascript">
<!--
function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}

//function ImportStyleSheet(File){ alert(File); }

var width = screen.width;
var height = screen.height;

switch(true){
case ((width == 800) && (height == 600)):
ImportStyleSheet('../includes/800x600.css');
break;

case ((width==1024) && (height==768)):
ImportStyleSheet('../includes/1024x768.css');
break;

case ((width==1366) && (height==768)):
ImportStyleSheet('../includes/1366x768.css');
break;

case ((width==1920) && (height==1080)):
ImportStyleSheet('../includes/1920x1080.css');
break;

case ((width==1280) && (height==768)):
ImportStyleSheet('../includes/1280x768.css');
break;

case ((width==1440) && (height==900)):
ImportStyleSheet('../includes/1400x900.css');
break;

default :
ImportStyleSheet('../includes/1366x768.css');
}

--></script>


Thank you worked well indeed!! Thanks to every one who offered to help as well it was much appreciate!

low tech
07-22-2012, 04:22 AM
Hi

I think you should use the "thank you button" on Lerura's post #3 since the script worked perfectly well and it is the appendChild script you are using now.

Just my thought

LT