SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    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();
    The high resolution works fine, but when I switch it over to a lower one, there is no change.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    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="^$">

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    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();
    }

  4. #4
    SitePoint Enthusiast
    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?

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    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="^$">

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k, thanks


Bookmarks

Posting Permissions

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