Results 1 to 1 of 1

Thread: Iframe-divs: a technique for letting divs overlay anything we want

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default Iframe-divs: a technique for letting divs overlay anything we want

    1) CODE TITLE: Iframe-divs - a technique for letting divs overlay anything we want

    2) AUTHOR NAME: Arie Molendijk

    3) DESCRIPTION:
    We can let a div overlay flash objects (without changing wmode to 'transparent' or 'opaque'), select boxes and other windowed elements by giving it certain characteristics of an iframe (without src) having high z-index. The result is an 'iframe-div'. Iframes-divs are iframes injected with HTML. Like real divs, they have no 'source'.

    An iframe-div is created by using the iframe's onload handler, like this:
    <iframe name="ifr" onload="frames['ifr'].document.body.innerHTML='This is an iframe-div'"></iframe>
    Putting an iframe_div of top of a windowed element (like flash objects), then, is a simple matter of giving the iframe-div a position (absolute or relative), a background (non-transparent) and an appropriate z-index:
    <iframe name="ifr" style="position:relative;z-index:10;background:white" onload="frames['ifr'].document.body.innerHTML='This is an iframe-div'"></iframe>

    I used this (has it been observed yet?) in a script that does not only put an iframe-div on top of anything else, but also styles it in such a way that it looks line a normal div. DEMO and explanations in the URL TO CODE below.

    4) URL TO CODE:
    http://mesdomaines.nu/eendracht/ifra...rame_divs.html
    Last edited by molendijk; 03-22-2012 at 08:37 PM. Reason: Correction in text

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
  •