SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Screen detect and image swap - help needed

    Hi all. I really would appreciate some help.

    I'm trying to make a site which looks good on both 1024*768 and 800*600 screen resolutions. Basically to do this I need to resize an image on my homepage called "main_image.jpg".

    What i'm trying to do is create a script which detects the screen size and displays a large version of the image if the size = 1024*768, and a small version of the image if the screen size is 800*600 or smaller. Here's my attempt:

    Code:
    <script type="text/javascript">
    
    var width = screen.width
    var height = screen.height
    var screen = width + height
    
    if (screen == "1792") {
    document.getElementById('main_image').src="images/global_images/churchbig.jpg"
    }
    else {
    document.getElementById('main_image').src="images/global_images/churchsmall.jpg"
    }
    
    </script>


    This doesn't seem to work. Can anyone work out why? Or if anyone has a better solution for doing what i'm trying to do can they let me know?

    Many thanks for taking the time to help,

    Dave Smith
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,140
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    screen size determining image size

    When I think of screen size (not resolution) I usually think of area. Math I've seen dealing with area involves height times width, not height plus width (half the length of the perimeter).
    Your
    HTML Code:
    if (screen == "1792") {
    }
    else
    means that any resolution other than "1792" (eg 2800) will use the "small" image.
    I think you may have somewhat better results if you use a "less than / or equal to / greater than" type of conditional test.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You might also want to consider checking what space there is in the browser window itself rather than the screen resolution as the browser itself takes up some space on the screen as do any fixed toolbars, also not everyone has their browser at maximum size particularly at higher resolutions.
    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="^$">

  4. #4
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Just to prove i'm not totally thick i thought i'd show you my solution. I had a little help from some useful javascript sites, but i put it all together myself.

    Code:
    <!-- code is used to resize homepage image -->
    
    
    function page_size_setup() {
    	var browserWidth = getBrowserWidth();
    	if (browserWidth < 1000) {
    		document.getElementById('main_image').src="images/global_images/southdown_church_small.jpg";
    		document.getElementById('main_image').style.marginTop="4%";
    		document.getElementById('main_image').style.marginLeft="1em";
    	} 
    	else if (browserWidth >= 1000) {
    	    document.getElementById('main_image').src="images/global_images/southdown_church.jpg";
    	}
    }
    
    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();
    }
    
    //-->
    What anyone think?

    Works for me
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    looks good.

    If you know that the page is always using a strict DOCTYPE then you can drop the document.body test since that is only needed for Internet Explorer where the DOCTYPE is either missing or transitional.

    All browsers except IE populate window.innerWidth etc.
    IE populates one of the other two depending on the DOCTYPE of the page.
    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="^$">


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
  •