[RESOLVED] Please help me with basic stuff

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>

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()">

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

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.

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

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 :(

Quote:

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);} }

Javascript, resolution and aspect ratio to set style sheet

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()'>

Working, and tidied up a bit too

:)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>