www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Please help me with basic stuff

  1. #1
    Join Date
    Jun 2012
    Posts
    6

    resolved [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>

  2. #2
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    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()">

  3. #3
    Join Date
    Jun 2012
    Posts
    6
    I've changed the body, but it still doesn't work.

  4. #4
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    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.

  5. #5
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    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

  6. #6
    Join Date
    Jun 2012
    Posts
    6
    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

  7. #7
    Join Date
    Jun 2012
    Posts
    6
    Quote Originally Posted by hamwisk View Post

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

  8. #8
    Join Date
    Jun 2012
    Posts
    6

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

  9. #9
    Join Date
    Jun 2012
    Posts
    6

    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles