View Full Version : show invisible animation layer on div

01-20-2005, 12:30 AM

Been searching the forum and net for the info I need with no luck.

I have a simple <div> with scroll:auto for all my text content. 300px by 300px.

I will have animations pertinent to various sections of the text.

I want to make an invisible layer for my animations area, and have that layer show-upon request-on my <div> text content area, on the bottom half of it. 300px by 150px layer.

So basically, the animations layer would cover the bottom half of the text area, yet not cover the scroll bar for the text. Then,-upon request- the user gets back the full text area when the animations layer is hidden.

There would be show/hide links both inside the text area, and outside the text area.

Is it possible to make a layer, specifically an image or animation, appear on top of a <div> that has a scroll bar? I can't seem to make it work.


01-22-2005, 11:01 AM
Well with divs you can z-index to make them appear on top or below but in mozilla it wont seem to let you move these over things like iframes where you have scrollbars. In IE you should be able to put a div over anything. But since your not using iframes you should be able to by having a div positioned ontop of the other div with a zindex higher then the scrolling one. A quick example:
<div style="position:absolute; width: 300px; height: 300px; z-index: 1;" id="scroll">blahblah scrolly stuff</div>
<div style="position:absolute; width: 300px; height: 150px; top: 150px; z-index: 2; visibility: hidden;" id="animation">animation</div>
Then you could simply change the visibility of the animation div like:

01-22-2005, 11:53 AM
You must be aware of the difference in using obj.style.visibility="hidden" and obj.style.display="none". The first attribute lets you hide the object but still uses it's space in the flow of the page layout (if position not absolute), the second form removes completely the object from the flow of the page and does not use that space until obj.style.display="block" is set again.

Also, keep in mind that if you are loading something in the object while it's display property is set to "none" chances are that the loading process will not take place until this property is set to "block" or sometime visibility set to "show" that sometime depend on browser implementation.

If you use an IFrame you can cover any form element including select boxes and scrollbars. I have not tested this piece of code just typed in, but it should be a start...

function createIFrame(t){
var f=document.createElement('iframe');
return f;

function show(f){ f.style.display = 'block'; }
function hide(f){ f.style.display = 'none'; }

var IFrame=new createIFrame('TESTIFRAME')
IFrame.top=...y position of animation...
IFrame.left=...x position of animation...


Hope this help.