SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show or not, image based on browser 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. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,433
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    width

    It's a pleasure to see that someone actually gets that resolution is not viewport
    You could try using
    Syntax
    iAvail = window.screen.availWidth
    Parameters
    iAvail is an integer representing the amount of space in pixels.
    and
    Syntax
    window.innerWidth = iPx
    iPx = window.innerWidth
    Parameters
    iPx is the number of pixels as an integer.

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get the window width in most browsers you need a little more:

    Code:
    function win_width(){
    	if(window.innerWidth !==undefined) return window.innerWidth;
    
    	var hoo= document.documentElement;
    	if(!hoo) hoo= document.body;
    	if(hoo.clientWidth!= undefined) return hoo.clientWidth;
    
    	else return screen.availWidth;
    }


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
  •