Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Fit Element To Page Size In Ie6

This is a discussion on Fit Element To Page Size In Ie6, within the Javascript section. This forum and the thread "Fit Element To Page Size In Ie6" are both part of the Programming Your Website category.

 
 Reply to this topicStart new topic
> Fit Element To Page Size In Ie6
djeyewater
post May 29 2008, 05:35 AM
Post #1


Fresh Squeezed
**

Group: Members
Posts: 40
Joined: 18-February 08
Member No.: 169
I'm trying to get an Element to fit to the page size when the window is resized in IE6. Unfortunately, it seems that when calculating the page size IE6 calculates it with the Element still taking up the size it was before the window was resized, even though I am telling it not to. I have tried setting the element display to 'none' instead of resizing it to 0px, but still the same problem.

Hope someone can help me!

Dave

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
   <head>
       <title>Untitled Page</title>
       <style type="text/css">
       body, html
       {
           margin: 0;
           padding: 0;
           height: 100%;
       }
       #lbContainer
       {
           background-color: #000;
           filter: alpha(opacity=70);
           z-index: 2;
           position: absolute;
           top: 0;
           left: 0;
       }
       </style>
       <script type="text/javascript">
       window.onresize = function()
       {
           var lbContainer = document.getElementById('lbContainer');
           lbContainer.style.width = 0;
           lbContainer.style.height = 0;
           resize();
       }        
      
       function resize()
       {
           var lbContainer = document.getElementById('lbContainer');
           var pageSize = getPageSize();
           lbContainer.style.width = pageSize[0];
           lbContainer.style.height = pageSize[1];
       }
      
       function getPageSize()
       {
           return new Array(document.documentElement.scrollWidth, document.documentElement.scrollHeight);
       }
       </script>
   </head>
   <body>
   <div id="lbContainer"></div>
   </body>
   </html>


This post has been edited by djeyewater: May 30 2008, 09:29 AM
Go to the top of the page
 
+Quote Post
Antti
post May 29 2008, 05:43 AM
Post #2


Rapid Squeezer
****

Group: Members
Posts: 232
Joined: 15-February 08
From: Finland
Member No.: 139
You don't need that javascript. Just put height:100%; width:100%; to the container. Also remember to set body/html to height:100% for it to work.


--------------------
anttisimonen.com - .NET developer

anttis.wordpress.com - Blog
Go to the top of the page
 
+Quote Post
djeyewater
post May 29 2008, 06:49 AM
Post #3


Fresh Squeezed
**

Group: Members
Posts: 40
Joined: 18-February 08
Member No.: 169
Thanks for your help, but the element has a z-index of 2 (sorry, forgot to put this in my example), so when setting size to 100%, it is set to 100% of window size rather than page size.

Dave
Go to the top of the page
 
+Quote Post
MikeHopley
post May 30 2008, 05:32 AM
Post #4


Squeeze Machine
*****

Group: Mentor
Posts: 505
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (djeyewater @ May 29 2008, 12:49 PM) *
Thanks for your help, but the element has a z-index of 2 (sorry, forgot to put this in my example), so when setting size to 100%, it is set to 100% of window size rather than page size.

Dave


But your z-index doesn't do anything! Z-index only affects positioned elements, and your container is not positioned. Besides, all other box formatting should be applied independently of the stacking order.

Antti's solution (height: 100%; width: 100%) should work here.

This post has been edited by MikeHopley: May 30 2008, 05:33 AM
Go to the top of the page
 
+Quote Post
djeyewater
post May 30 2008, 09:29 AM
Post #5


Fresh Squeezed
**

Group: Members
Posts: 40
Joined: 18-February 08
Member No.: 169
QUOTE (MikeHopley @ May 30 2008, 05:32 AM) *
But your z-index doesn't do anything! Z-index only affects positioned elements, and your container is not positioned. Besides, all other box formatting should be applied independently of the stacking order.

Antti's solution (height: 100%; width: 100%) should work here.


Oops, sorry, it's absolutely positioned (forgot that in my example as well!)
Go to the top of the page
 
+Quote Post
MikeHopley
post May 30 2008, 10:05 AM
Post #6


Squeeze Machine
*****

Group: Mentor
Posts: 505
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (djeyewater @ May 30 2008, 03:29 PM) *
Oops, sorry, it's absolutely positioned (forgot that in my example as well!)


Why is it absolutely positioned? What are you trying to achieve?

You're drip-feeding us information here. Can you supply a link to a test page, and an expanation of what you're trying to do?

Absolute positioning is greatly overused by CSS beginners. Most of the time it's harmful.
Go to the top of the page
 
+Quote Post
djeyewater
post Jun 1 2008, 04:10 AM
Post #7


Fresh Squeezed
**

Group: Members
Posts: 40
Joined: 18-February 08
Member No.: 169
QUOTE (MikeHopley @ May 30 2008, 11:05 AM) *
Why is it absolutely positioned? What are you trying to achieve?

You're drip-feeding us information here. Can you supply a link to a test page, and an expanation of what you're trying to do?

Absolute positioning is greatly overused by CSS beginners. Most of the time it's harmful.


Here's a test page: http://www.brighton360.com/IE6test/Untitled%20Document.htm

Basically I'm just trying to create an overlay for a lightbox effect.
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 1 2008, 04:41 AM
Post #8


Squeeze Machine
*****

Group: Mentor
Posts: 505
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (djeyewater @ Jun 1 2008, 10:10 AM) *
Here's a test page: http://www.brighton360.com/IE6test/Untitled%20Document.htm

Basically I'm just trying to create an overlay for a lightbox effect.


I think you should read this article. smile.gif
Go to the top of the page
 
+Quote Post
djeyewater
post Jun 1 2008, 01:51 PM
Post #9


Fresh Squeezed
**

Group: Members
Posts: 40
Joined: 18-February 08
Member No.: 169
QUOTE (MikeHopley @ Jun 1 2008, 05:41 AM) *
I think you should read this article. smile.gif


Read that now and got it working, thanks for your help!

Dave
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 2 2008, 04:27 AM
Post #10


Squeeze Machine
*****

Group: Mentor
Posts: 505
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (djeyewater @ Jun 1 2008, 07:51 PM) *
Read that now and got it working, thanks for your help!

Dave


My pleasure. smile.gif
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   1 thunderrabbit 158 13th February 2008 - 11:21 PM
Last post by: Jacob
No New Posts   13 Rakuli 403 19th February 2008 - 09:53 AM
Last post by: karinne
No New Posts   11 unitedcraig 236 15th February 2008 - 06:08 PM
Last post by: unitedcraig
No New Posts   8 Daniela 296 18th February 2008 - 05:28 PM
Last post by: Jasontor
No new   16 thewal 386 19th February 2008 - 02:34 PM
Last post by: thewal