Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2005
    Thanked 0 Times in 0 Posts

    show invisible animation layer on div


    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.


  2. #2
    Regular Coder
    Join Date
    Nov 2002
    Carmel California
    Thanked 1 Time in 1 Post
    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:
    Kris Hubby
    kwhubby site

  3. #3
    New Coder
    Join Date
    Nov 2004
    Thanked 0 Times in 0 Posts
    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.



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts