SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Viewport area in FireFox seems to add 4px to height/width

    Hello all

    I did a search thru Sitepoint and found 2 pages of examples on finding the viewport height and width. Here is one link that I found.

    http://www.quirksmode.org/viewport/compatibility.html

    Doing some initially testing on IE6 & IE7, everything seems to be working pretty well. I do have one issue in FireFox. It seems that 4 pixels (px) are always added to the height and width regardless of how many toolbars I have visible. Has anyone else noticed this? I am creating a custom lighbox effect but I want the shadowed box to only cover the viewable area and not cause scrollbars to appear. Since FireFox seems to be adding 4 px to the height and width, I am always getting horizontal and vertical scroll bars.

    Should I just detect if the browser is FireFox and subtract a few pixels from the height and width to prevent the scrollbars from appearing or does anyone else have a better suggestion on getting this to work?

    Thanks in advance for your time.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    IE uses the content, padding and border to measure the width and height of page elements.

    Everybody else uses just the content itself.

    Is it possible that padding and/or borders are causing you the trouble?
    If so, there are well-worn techniques for beating IE into submission.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the response but I am not sure I understand. IE is working… it is FireFox where I am having my issue. I also looked at the code and I do not have borders around anything. What I am doing is adding an iframe and a div to the page. The iframe prevents select objects from bleeding thru in IE6 and the div allows me to add an opacity filter using css stylesheets. I reviewed my stylesheets and my html and I do not see any padding or borders.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There is little more advice that can be given unless we can play around with some sample code.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I have it down to. If the content of the page does not cause a vertical scroll bar, then everything works fine. If the content does exceed the viewable page (which causes a vertical scroll bar to appear), I then click “Start Shadow”, and the shadow affect appears but it causes a horizontal scroll bar to appear even though there is no content horizontally.

    Can someone see why this occurs? It only occurs in FireFox… IE6 & IE7 work fine.

    Here is the code

    Code:
    <html>
    <head>
    
    <style type="text/css">
    	.iframeShadow
    	{
    		position:absolute;		
    		display: none;
    		top: 0px;
    		left: 0px;
    		filter: alpha(opacity = 0); 
    		-moz-opacity: 0.0;
    		z-index: 1000;
    	}
    	
    	.divShadow
    	{
    		position:absolute;		
    		display: none;
    		top: 0px;
    		left: 0px;
    		filter: alpha(opacity = 50); 
    		-moz-opacity: .30; 
    		background:gray;
    		z-index: 1001;
    	}	
    </style>
    
    <script type="text/javascript">
    function showShadow()
    {
       var shadowDiv = document.getElementById( "shadowDiv" );
       var shadowIframe = document.getElementById( "shadowIframe" );
       
       shadowDiv.style.height = getTotalHeight();
       shadowDiv.style.width = getTotalWidth();
       shadowDiv.className = "divShadow";
       shadowDiv.style.display = "block";
       
       shadowIframe.style.height = getTotalHeight();
       shadowIframe.style.width = getTotalWidth();
       shadowIframe.className = "iframeShadow";
       shadowIframe.style.display = "block";
    }
    
    function getTotalHeight()
    {
    	if (self.innerHeight) // all except Explorer
    	{
    		return self.innerHeight;
    	}
    	else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
    	{
    		return document.documentElement.clientHeight;
    	}
    	else if (document.body) // other Explorers
    	{
    		return document.body.clientHeight;
    	}
    }
    
    function getTotalWidth()
    {
    	if (self.innerHeight) // all except Explorer
    	{
    		return self.innerWidth;
    	}
    	else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
    	{
    		return document.documentElement.clientWidth;
    	}
    	else if (document.body) // other Explorers
    	{
    		return document.body.clientWidth;
    	}
    }
    
    </script>
    
    </head>
    
    <body>
    <iframe id="shadowIframe" frameborder="0" style="display: none; position:absolute; top:0px; left:0px;"></iframe>
    <div id="shadowDiv" style="display: none; position:absolute; top:0px; left:0px;"></div>
    
    <a href="javascript: showShadow();">Start Shadow</a>
    
    <br>
       
       <select name="cboSelect" id="cboSelect">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
       </select>
        
       <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
       test <br>
    
    </body>
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Use this while the shadow is displayed to hide any overflow.

    Code JavaScript:
       document.body.style.overflow = 'hidden';

  7. #7
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the post but document.body.style.overflow eliminates the scrollbar. Then when the effect is removed, the scroll bar does not come back. Is there a way to keep the scroll bar all the time but to just remove the extra space FireFox is adding? I have a concern with eliminating the scroll bar with all of the different screen sizes and resolutions.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The simple answer is that when the effect is removed, you should remove that style.

    Code JavaScript:
    function showShadow()
    {
      document.body.style.overflow = 'hidden';
      . . .
    }
    function removeShadow()
    {
      document.body.style.overflow = '';
      . . .
    }

  9. #9
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you again for the response and I will agree that is an acceptable solution. It just bothers me that I have this working great in both IE6 & IE7 but there is this 1 little issue in FireFox. If anyone else has any ideas, I would love to hear them. I will also continue my research. If I am not able to fund anything, pmw57, I will use your solution. Thanks again for the feedback.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The clientWidth gives the better results, so the in the tests that you have, the more specific ones should come first.

    Tested on Firefox 2 and IE6, is there any reason why the following shouldn't work for you.

    Code JavaScript:
    function getTotalWidth()
    {
    	if (document.documentElement && document.documentElement.clientWidth)
    	{
    		return document.documentElement.clientWidth;
    	}
    	else if (self.innerWidth)
    	{
    		return self.innerWidth;
    	}
    	else if (document.body) // other Explorers
    	{
    		return document.body.clientWidth;
    	}
    }

  11. #11
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It now works!!! I used your code and I also added border: none; to the iframeShadow. Thank you for the multiple suggestions!!!

  12. #12
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I use this little function to get the key browser window dimensions ...

    Code:
    function getBrowserDims () {
    	cW = xClientWidth();
    	cH = xClientHeight();
    	sT = xScrollTop();
    	var arrWHS = new Array (cW,cH,sT);
    	return arrWHS;
    }
    
    var WHS = getBrowserDims();
    var wW = WHS[0];
    var wH = WHS[1];
    var sT = WHS[2];
    The xYadda functions are part of the Mike Foster's X-Library. (Mike is a regular contributor here).

    I'm using this to determine the viewport area so I can size appropriately an image that gets shown in a "popup" div.
    Ian Anderson
    www.siteguru.co.uk


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
  •