Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: Image Detection

  1. #1
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Detection

    Hey because im using css to create a layout which has a banner which always has to be 100% in width this is ok at 1024*786 but at 800*600 it cuts part of it off. So even if you use width:100%; at 800*600 you lose quality. I was wondering if there were either a javascript way or preferably php way to detect if the resolution is 800*600 then give this banner if not give the 1024*786.

    Any help is greatly appreciated.
    Also i thought this topic suited here the best.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Something like this maybe


    <script language="javascript">
    <!--
    function chk_res(){
    w=screen.width

    if(w>=1024){
    do_this1()
    }

    if(w==800){
    do_this2()
    }

    }
    // -->
    </script>

  • #3
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks i know very little about javascript sorry where does the image path go.

    Cheers again mate

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Unless I see your actual layout I cannot relate to your divs but here is an example of how the script would work


    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>

    <script language="javascript">
    <!--
    function chk_res(){
    w=screen.width

    if(w>=1024){
    document.images["img1"].src="pic01.jpg"
    }

    if(w==800){
    document.images["img1"].src="pic02.jpg"
    }

    }
    // -->
    </script>
    </HEAD>
    <BODY onload="chk_res()">
    <img name="img1" src="" style="width:100%;height:200px">

    </BODY>
    </HTML>

  • #5
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you

  • #6
    mypointofview
    Guest
    Fantastic. Exactly what I needed also

    Just one question though: How could I fine tune this to accomodate (a) the smaller 800 style screens, (b) the rather normal 1024 screens, and (c) those huge 30 inch monitors?

    Maybe have 1024 as default, then a rule for all that's bigger and another rule for all that's smaller.

    Would the following be correct - do I use the ">=" symbols correctly ?

    Code:
    if(w>=1024){
    document.images["img1"].src="pic_huge.jpg"
    }
    
    if(w<=800){
    document.images["img1"].src="pic_small.jpg"
    }
    
    else
    document.images["img1"].src="pic_normal.jpg"
    }
    Last edited by mypointofview; 12-18-2005 at 08:13 AM.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Probably something like

    PHP Code:

    if(w>1024){
    document.images["img1"].src="pic_huge.jpg"
    }

    if(
    w<=800){
    document.images["img1"].src="pic_small.jpg"
    }
    else{
    document.images["img1"].src="pic_normal.jpg"

    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Why not check the width of the window instead of the screen width. Someone may have a screen width of 1280 but have their browser using a width of 500.

    Code:
    function pageWidth() {return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;}
    function pageHeight() {return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Good point there Felgall
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #10
    mypointofview
    Guest

    Doesn't work

    Mr. J. - unfortunately that doesn't work

    But I rememembered my steps in AppleScript and I came up with the "else if" command, and guess what

    PHP Code:
    if(w>=1680){
    document.images["img1"].src="large.jpg"
    }

    else if(
    w<=800){
    document.images["img1"].src="small.jpg"
    }

    else{
    document.images["img1"].src="medium.jpg"

    ..this did the trick! I can now serve different sized pictures for different screen resolutions. I guess that will also do the trick for the window.open function where I'm then able to serve different sized popup windows...


    Martin

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You just need to add:

    var w = pageWidth();

    to get the actual width within the browser before your if statement.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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