[RESOLVED] Please help me with basic stuff

**hamwisk** · 06-23-2012 02:15 PM

Hi, I have never learnt javascript because it is easy to add snippets of code to my web pages. Now I am trying to learn, but my first attempt is not working.
Can anyone explain what I have done wrong?

Code:

resCheck.js

window.onload = resCheck;

function resCheck(){
var change = 
if(screen.width/screen.height>1.4){
	if(screen.width<1100){'http://www.website.co.uk/styles/wideS.css';}else 
	if(screen.width>=1100){'http://www.website.co.uk/styles/wideN.css';}else 
	if(screen.width>1600){'http://www.website.co.uk/styles/wideH.css';}
}else{
	if(screen.width<1024){'http://www.website.co.uk/styles/normS.css';}else 
	if(screen.width>=1024&&screen.width<'1600'){'http://www.website.co.uk/styles/normN.css';}else 
	if(screen.width>=1600){'http://www.website.co.uk/styles/normH.css';}
document.getElementById('style').href=(change);
}

HTML Code:

index.html

<html><head>

<link rel='stylesheet' type='text/css' href='def' id='style' />

<script type='text/javascript' src='resCheck.js'></script>

</head><body></body></html>

**burnme** · 06-23-2012 02:26 PM

Are you getting any errors?

I typically put my onload calls in the body, that way everything is loaded before the page.

HTML Code:

<body onload="resCheck()">

**hamwisk** · 06-23-2012 02:31 PM

I've changed the body, but it still doesn't work.

**burnme** · 06-23-2012 02:34 PM

Errors? IE says it on the bottom left, Chrome requires you to hit ctrl+shift+I, Firefox I recommend adding the Firebug addon. There has to be something if it doesn't work. If there are no errors then its in the way in included the file, or something in the html. Let us know.

**burnme** · 06-23-2012 02:45 PM

Okay, my error comes up when you are trying to set the var change. Try revamping the code so you aren't setting the var directly. You can see the error if you go here, its a free syntax checker.

http://www.javascriptlint.com/online_lint.php

**hamwisk** · 06-23-2012 07:39 PM

Code:

function resCheck(){
var screenWidth = screen.width;
var screenHeight = screen.height;
var ratio = screenWidth / screenHeight;
if(ratio>1.4){ratio=wide;}
var change = 
if(ratio='wide'){

I tried to do this, but ...
Uncaught SyntaxError: Unexpected token if line 40

**hamwisk** · 06-23-2012 07:47 PM

Originally Posted by hamwisk

I tried to do this, but ...
Uncaught SyntaxError: Unexpected token if line 40

So I fixed it with this!

Code:

function resCheck(){
var screenWidth = screen.width;
var screenHeight = screen.height;
var ratio = screenWidth / screenHeight;
if(ratio > 1.4){ratio = wide;}

if(ratio=='wide'){
	if(screen.width < 1100){var change = 'http://www.website.co.uk/styles/wideS.css';}else 
	if(screen.width >= 1100){change = 'http://www.website.co.uk/styles/wideN.css';}else 
	if(screen.width > 1600){change = 'http://www.website.co.uk/styles/wideH.css';}
}else{
	if(screen.width < 1024){change = 'http://www.website.co.uk/styles/normS.css';}else 
	if(screen.width >= 1024&&screen.width < 1600){change = 'http://www.website.co.uk/styles/normN.css';}else 
	if(screen.width >= 1600){change = 'http://www.website.co.uk/styles/normH.css';}


document.getElementById('def').href=(change);}
}

**hamwisk** · 06-29-2012 10:41 PM

Code:

/*						Most common display resolutions 2012
ratio	w	h	%	t%	w/h
16:10	1440	900	6.61	24.35	1.6
	1680	1050	3.66
	2560	1600
	1280	800	12.97
	1920	1200	1.11
4:3	1024	768	18.69	21.99	1.333
	1280	960	0.72
	800	600	1.03
	1152	864	1.55
	1400	1050
	1600	1200
	640	480
16:9	1920	1080	5.09	9.9	1.777
	2048	1152
	1600	900	3.82
	2560	1440	0.36
	1093	614	0.63
5:4	1280	1024	7.49	7.49	1.25
17:10	1024	600	2.25	2.25	1.7
3:4	768	1024	1.93	1.93	.75
5:3	1280	768	1.54	1.54	1.666
						style to be used:
normS	if (( w/h < 1.4 )	& ( w < 1280 ))
normN	if (( w/h < 1.4 )	& ( w > 1280 ))
normH	if (( w/h < 1.4 )	& ( w > 1600 ))
wideS 	if (( w/h > 1.5 )	& ( w < 1100 ))
wideN	if (( w/h > 1.5 )	& ( w < 1600 ))
wideH	if (( w/h > 1.5 )	& ( w > 1600 ))
*/


function resCheck(){
var sniff = screen.width;
var sniff2 = screen.height;
var ratio = (sniff / sniff2);
var chang = 
(ratio<1.4&&sniff>0&&sniff<1024)?'http://www.website/styles/normS.css':
(ratio<1.4&&sniff>=1024&&sniff<1600)?'http://www.website.co.uk/styles/normN.css':
(ratio<1.4&&sniff>1600)?'http://www.website.co.uk/styles/normH.css':
(ratio>1.4&&sniff>0&&sniff<1100)?'http://www.website.co.uk/styles/wideS.css':
(ratio>1.4&&sniff>1100&&sniff<=1600)?'http://www.website.co.uk/styles/wideN.css':
'http://www.website.co.uk/styles/wideH.css';
	document.getElementById('def').href=(chang);}

HTML Code:

<link rel='stylesheet' type='text/css' href='http://www.website.co.uk/styles/all.css' id='def' />
<script type='text/javascript' src='http://www.website.co.uk/scripts/res.js'></script>
</head>
<body onload='resCheck()'>

**hamwisk** · 08-14-2012 01:01 PM

This script will detect the browsers screen ration (normal or wide) and the screen size. It will then change the pages style sheet to correspond.

Code:

window.onload = resCheck;
function resCheck(){
	var ratio = (screen.width/screen.height);
	var change = 
	(ratio < 1.4 && screen.width < 1024)?'http://www.website/styles/normS.css':
	(ratio < 1.4 && screen.width > 1024)?'http://www.website/styles/normN.css':
	(ratio < 1.4 && screen.width > 1600)?'http://www.website/styles/normH.css':
	(ratio >= 1.4 && screen.width < 1100)?'http://www.website/styles/wideS.css':
	(ratio >= 1.4 && screen.width > 1100)?'http://www.website/styles/wideN.css':
	'http://www.website.co.uk/styles/wideH.css';
	document.getElementById('style').href = change;}

HTML Code:

<link rel='stylesheet' type='text/css' href='http://www.website/styles/all.css' id='style' />
<script type='text/javascript' src='http://www.website/scripts/res.js'></script>

Thread: [RESOLVED] Please help me with basic stuff

Thread Tools

Display

[RESOLVED] Please help me with basic stuff

Javascript, resolution and aspect ratio to set style sheet

Working, and tidied up a bit too

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions