SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Aug 1, 2006, 02:34 #1
- Join Date
- Jul 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
resolution dependent script to change class
I have to make a site that displays a few different items depending on the resolution of the client. I am having trouble with the scripting. I want to check the resolution and display the correct items accordingly. I set up two classes in my style sheet and I want to change the class. heres the script as it is.
HTML Code:function change(id, newClass) { identity=document.getElementById(id); identity.className=newClass; } if ((screen.width>=1280) && (screen.height>=960)) { function reschange(){ change('header','highres'); change('logo','highres'); change('title','highres'); change('headerbase','highres'); change('left','highres'); change('clearheader','highres'); change('main','highres'); } } else { function reschange(){ change('header','lowres'); change('logo','lowres'); change('title','lowres'); change('headerbase','lowres'); change('left','lowres'); change('clearheader','lowres'); change('main','lowres'); } } window.onload=reschange();
-
Aug 1, 2006, 04:19 #2
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
Why do you care about the screen size. Most people with larger screen sizes would have their browser opened to only fill part of the screen. It is the size inside the browser window that you have to fit the page into not the whole screen.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Aug 1, 2006, 05:21 #3
- Join Date
- May 2003
- Location
- Cambridge, UK
- Posts
- 2,366
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here's what I've used recently:
Code:function page_size_setup() { var browserWidth = getBrowserWidth(); if (browserWidth < 1000 && document.getElementsByTagName('body')[0].className == '') { document.getElementsByTagName('body')[0].className = 'tc'; } else if (browserWidth >= 1000 && document.getElementsByTagName('body')[0].className == 'tc') { document.getElementsByTagName('body')[0].className = ''; } } function getBrowserWidth(){ if (window.innerWidth) { return window.innerWidth; } else if (document.documentElement && document.documentElement.clientWidth != 0) { return document.documentElement.clientWidth; } else if (document.body) { return document.body.clientWidth; } return 0; } window.onload = function() { page_size_setup(); } window.onresize = function() { page_size_setup(); }
-
Aug 1, 2006, 22:06 #4
- Join Date
- Jul 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well, the reason I want the resolution is because I have a site that will be visited by alot of older people, and I have found that older people use older computers because they don't see the need of paying for a new one when they barely use it,(older computers have lower resolution) and they also have a hard time seeing the screen when the resolution is higher so they turn it down to 800X600 sometimes. The way I designed this site, there is a permanent header and footer with a scrolling center. When I put the machine into 800X600 the menu on the left is too big to fit in the screen. Instead of making the menu smaller for everyone, I want to make the header smaller for just those in a lower resolution. Make sense?
-
Aug 1, 2006, 23:36 #5
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
So use Buddy's code that tests the area inside the browser window rather than test for the screen resolution. Screen resolution is irrelevant. I can set up my screen to use 1600x1200 resolution and then set my browser so that it only has 400x300 visible within the browser (one quarter of the screen + browser chrome). If I do that then your page should try to fit in the 400 width available in the browser and not expand to the 1600 width of my screen.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Aug 3, 2006, 00:32 #6
- Join Date
- Jul 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
k, thanks
Bookmarks