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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change bg image based on res setting.....

    Hello, I am trying to have my background image selected based on viewers resolution.

    This is the code I found via the net. Is there something that needs modified so it works with other browsers? I have tested in IE6 (works) and NS7(doesn't work).

    Code:
     <Script Language="JavaScript">
    
    var scrh = screen.Height 
    var scrw = screen.Width 
    if ( scrh == "768" && scrw == "1024" )
    {
    document.write("<body bgcolor='000000' background=themes/cmg/images/background.jpg>")
    }
    else
    {
    document.write("<body bgcolor='000000' background=themes/cmg/images/background5.jpg>")
    } 
    </Script>

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Why not use document.body.background instead?
    Omnis mico antequam dominus Spookster!

  • #3
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am extremely new to javascript, how would I do that?

  • #4
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was able to get it working with IE6 and Netscape7, just thought I would post what I used.

    Code:
     <Script Language="JavaScript">
    bname=navigator.appName
    if (bname.indexOf("Netscape")!=-1) {
    scrw= window.innerWidth;
    }
    if (bname.indexOf("Microsoft")!=-1) {
    scrw=screen.width
    }
     
    if ( scrw == "800" ) {
    document.write("<body bgcolor='000000' background=background.jpg>")
    }
    else if ( scrw == "1024" ) {
    document.write("<body bgcolor='000000' background=background1.jpg>")
    }
    else if ( scrw == "1152" ) {
    document.write("<body bgcolor='000000' background=background2.jpg>")
    }
    else if ( scrw == "1280" ) {
    document.write("<body bgcolor='000000' background=background3.jpg>")
    }
    else if ( scrw == "1600" ) {
    document.write("<body bgcolor='000000' background=background4.jpg>")
    }
    else {
    document.write("<body bgcolor='000000' background=background1.jpg>")
    } 
    </Script>
    Granted the code above only covers part of the resolution options that people use, I have a module on my site that tracks what visitors resolution settings are, I went with the most popular settings. Not sure if this will work with all the other browsers.

  • #5
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    What I suggested was to use like this --

    if(whatever) {
    document.body.background = 'yourimage.jpg';
    }

    It's cleaner, and probably works in all browsers (I'm not an expert on what works in what for js)..
    Omnis mico antequam dominus Spookster!


  •  

    Posting Permissions

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