I am having problems with a clipping region. The basic goal (which I haven't written the script for yet) is to have a div tag which contains a promo open slowly (can't just use display property) so I am trying to set the clip and then expand the clip on a timer. I don't have a fixed height for the content so the vertical clip has to be set by %, but I am not able to get any of the clip region to work, I have tried different values but nothing.
<div id="adPromo" style="clip: rect(0px 775px 10% 0px); overflow:hidden;">
<div style="background-image:url'images/phones_promo_top_back.gif');"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/trans.gif" height="2"></div>
<div align="center" style="background-color:#ff6600; font-weight:bold; padding:3px; color:#ffffff;">Right Now, Save $150.00 by Purchasing Online!</div>
<div style="background-image:url'images/phones_promo_bottom_back.gif');"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/trans.gif" height="2"></div>
</div>Here is a transition page demo that I developed. One of the effects is called "box out". It sounds like what you are trying to do.
<!-- m --><a class="postlink" href="http://gil.davis.home.att.net/wipe.htmThose">http://gil.davis.home.att.net/wipe.htmThose</a><!-- m --> effects are very cool and the boxout has similar effects to what I am looking for but what I need is for someone to tell me where I went wrong with the clip style I set on the outer <div>. If you take a look at it, its not clipping anything.
ThanksThere is a function called setClip() that I used to set up the clipping. What I see different in your post is that you are missing commas between settings.
Initially I set right and bottom to be the full size of the object, and I set left and top to zero. I didn't specify the clip region in the CSS, but used an onload script instead.
If you were to use my setClip() function, it might make your life easier.
rt = document.getElementById("adPromo").offsetWidth;
bt = document.getElementById("adPromo").offsetHeight;
setClip("adPromo", 0, rt, bt, 0);Well, that sorta worked. But it leaves a bunch of problems. Namely that you can only use the clip with absolute positioned elements which won't work for what I need because it has to push the rest of the content down as it opens. Since the document doesn't save space for absolute elements, it fails.
On a slight side note though, I noticed that IE always returns 0 for offsetWidth/offsetHeight. Could be because I am using text instead of images for my content, but I have the width of the div hard coded and it doesn't recognize it. Strange....IE bug I guessyou can only use the clip with absolute positioned elementsI guess that sort of kills your idea.
You could use a transparent image to act as both a locating element and a stretch-the-page element.
Place the image in the flow of the document with a height and width of 0 and a name or id. Locate your expanding box at the image's top and left coordinates. As you expand the box, expand the image by the same amount.you can only use the clip with absolute positioned (parent) elements
If the parent, body, is absolutely positioned all child elements can be clipped.I found a solution for none positioned elements. With overflow set to hidden you can just set the height of the element to 1 and grow it slowly. That preserves you space and pushes other content down as it grows.
The clientHeight works, just not until the page is fully loaded. You just have to have a nested <div> which will maintain the correct height to know when to quit expanding the outer <div>
thanks for the suggestions though
<div id="adPromo" style="clip: rect(0px 775px 10% 0px); overflow:hidden;">
<div style="background-image:url'images/phones_promo_top_back.gif');"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/trans.gif" height="2"></div>
<div align="center" style="background-color:#ff6600; font-weight:bold; padding:3px; color:#ffffff;">Right Now, Save $150.00 by Purchasing Online!</div>
<div style="background-image:url'images/phones_promo_bottom_back.gif');"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/trans.gif" height="2"></div>
</div>Here is a transition page demo that I developed. One of the effects is called "box out". It sounds like what you are trying to do.
<!-- m --><a class="postlink" href="http://gil.davis.home.att.net/wipe.htmThose">http://gil.davis.home.att.net/wipe.htmThose</a><!-- m --> effects are very cool and the boxout has similar effects to what I am looking for but what I need is for someone to tell me where I went wrong with the clip style I set on the outer <div>. If you take a look at it, its not clipping anything.
ThanksThere is a function called setClip() that I used to set up the clipping. What I see different in your post is that you are missing commas between settings.
Initially I set right and bottom to be the full size of the object, and I set left and top to zero. I didn't specify the clip region in the CSS, but used an onload script instead.
If you were to use my setClip() function, it might make your life easier.
rt = document.getElementById("adPromo").offsetWidth;
bt = document.getElementById("adPromo").offsetHeight;
setClip("adPromo", 0, rt, bt, 0);Well, that sorta worked. But it leaves a bunch of problems. Namely that you can only use the clip with absolute positioned elements which won't work for what I need because it has to push the rest of the content down as it opens. Since the document doesn't save space for absolute elements, it fails.
On a slight side note though, I noticed that IE always returns 0 for offsetWidth/offsetHeight. Could be because I am using text instead of images for my content, but I have the width of the div hard coded and it doesn't recognize it. Strange....IE bug I guessyou can only use the clip with absolute positioned elementsI guess that sort of kills your idea.
You could use a transparent image to act as both a locating element and a stretch-the-page element.
Place the image in the flow of the document with a height and width of 0 and a name or id. Locate your expanding box at the image's top and left coordinates. As you expand the box, expand the image by the same amount.you can only use the clip with absolute positioned (parent) elements
If the parent, body, is absolutely positioned all child elements can be clipped.I found a solution for none positioned elements. With overflow set to hidden you can just set the height of the element to 1 and grow it slowly. That preserves you space and pushes other content down as it grows.
The clientHeight works, just not until the page is fully loaded. You just have to have a nested <div> which will maintain the correct height to know when to quit expanding the outer <div>
thanks for the suggestions though