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

    show (or don't) image based on document width

    I am working on a site that will not all fit horizontally in a browser window that is less than 945px. My client is fine with that and wants the current layout. What happens is that 2 images overlap.

    What I would like to do in javaScript is to use a script that will determine the width of the browser window (not the screen resolution) and then show or hide the one image which is not crucial to the content of the site. The image I want to do this to is one that is in it's own div. So for example: "onLoad if browser window is less than 945px then hide ths image (or div)" would be what I'm trying (I think) to express in JS.

    I don't want to use screen resolution because the script wouldn't work if a 1024 user had his Favorites panel open, so I'd like to sniff out the current width of the browser window.

    And of course it needs to work in all recent browsers. My knowledge of JS is limited thought I'm good with Action Script so I get the idea, and I have reference books to help me, also.

    I would greatly appreciate any help I can get.

    Thanks.
    RH

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    This should help

    Code:
    function pageWidth() {return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?  document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;} 
    
    if (pageWidth() > 945) {...
    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
    •