...

View Full Version : Background based on Resolution with Javascript



bitejones
07-22-2012, 12:55 AM
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, 01: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, 01: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, 02: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, 02: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, 04: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, 04: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, 05: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum