IE <DIV> layer and z-index question

Discussion in 'Javascript' started by wilq, Feb 11, 2008.

  1. wilq

    wilq Guest

    I got a little problem, maybe You could help me out.

    I have one layer that is used to darken all content on page (opacity
    50%) to make other layer more visible.

    If i show two separate Layers - darkenLayer with z-index:1, and a
    other layer with z-index:2 - everything is ok. But i would like to do
    something like this:

    <DIV id="darken"></DIV>

    <DIV id="someDIV">

    <TABLE><TR><TD>
    <DIV id="someChildDIV"> blablalbal

    <DIV id="doNotDarkenThisDiv"> IMPORTANT DIV</DIV>

    </DIV>

    </TD></TR></TABLE>
    </DIV>


    My question is - how to make a DIV - doNotDarkenThisDiv to be over the
    darken DIV. I tried set higher z-index for doNotDarkenThisDiv however
    this do not solved problem. I read a few pages, looking alot on google
    and still haven't got any clues. In my case 'darken' DIV have to be
    position:absolute, and 'someDIV' too...... Help!
    wilq, Feb 11, 2008
    #1
    1. Advertising

  2. wilq

    SAM Guest

    wilq a écrit :
    > I got a little problem, maybe You could help me out.
    >
    > I have one layer that is used to darken all content on page (opacity
    > 50%) to make other layer more visible.
    >
    > If i show two separate Layers - darkenLayer with z-index:1, and a
    > other layer with z-index:2 - everything is ok. But i would like to do
    > something like this:
    >
    > <DIV id="darken"></DIV>
    >
    > <DIV id="someDIV">
    >
    > <TABLE><TR><TD>
    > <DIV id="someChildDIV"> blablalbal


    blablabal must be in a <p>aragraph

    > <DIV id="doNotDarkenThisDiv"> IMPORTANT DIV</DIV>
    >
    > </DIV>
    >
    > </TD></TR></TABLE>
    > </DIV>
    >
    >
    > My question is - how to make a DIV - doNotDarkenThisDiv to be over the
    > darken DIV. I tried set higher z-index for doNotDarkenThisDiv however
    > this do not solved problem.


    that doesn't work this way ...

    With the code above as the darken is coded in first, this one is bellow
    all what follow

    So ... no problem, the notDarken (and its table contener) are not darken

    Give a background color to your 'notDarken'

    --
    sm
    SAM, Feb 11, 2008
    #2
    1. Advertising

  3. wilq

    wilq Guest

    On Feb 11, 8:18 pm, SAM <>
    wrote:
    > wilq a écrit :
    >
    > > I got a little problem, maybe You could help me out.

    >
    > > I have one layer that is used to darken all content on page (opacity
    > > 50%) to make other layer more visible.

    >
    > > If i show two separate Layers - darkenLayer with z-index:1, and a
    > > other layer with z-index:2 - everything is ok. But i would like to do
    > > something like this:

    >
    > > <DIV id="darken"></DIV>

    >
    > > <DIV id="someDIV">

    >
    > >    <TABLE><TR><TD>
    > >     <DIV id="someChildDIV"> blablalbal

    >
    > blablabal must be in a <p>aragraph
    >
    > >          <DIV id="doNotDarkenThisDiv">  IMPORTANT DIV</DIV>

    >
    > >    </DIV>

    >
    > >    </TD></TR></TABLE>
    > > </DIV>

    >
    > > My question is - how to make a DIV - doNotDarkenThisDiv to be over the
    > > darken DIV. I tried set higher z-index for doNotDarkenThisDiv however
    > > this do not solved problem.

    >
    > that doesn't work this way ...
    >
    > With the code above as the darken is coded in first, this one is bellow
    > all what follow
    >
    > So ... no problem, the notDarken (and its table contener) are not darken
    >
    > Give a background color to your 'notDarken'
    >
    > --
    > sm


    I mean that all DIV-s got own backgrounds. Darken one got black
    background with opacity 50%, someDiv have no color, TABLE and its
    components got white backgrounds, and DIV doNotDarkenThisDiv have gray
    background. I would like to show Darken DIV that would be over other
    layers except the "doNotDarkenThisDiv" and here comes a problem :
    ( Here is complete code for this example:

    <html>
    <head>
    <style type="text/css">
    #darken {
    background-color : black ;
    opacity: 0.5 ;
    position : absolute ;
    filter : alpha(opacity=50) ;
    width : 150;
    height : 150 ;
    z-index : 11 ;

    }
    #someDiv
    {
    position:absolute;
    z-index:10;
    }
    #someChildDIV
    {
    position:absolute;
    }

    #doNotDarkenThisDiv
    {
    background-color : WHITE ;
    z-index:23;
    }
    </style>
    </head>
    <body>
    <DIV id="darken"></DIV>
    <DIV id="someDIV">
    <TABLE><TR><TD>
    <DIV id="someChildDIV"> Some text
    <DIV id="doNotDarkenThisDiv"> IMPORTANT DIV</DIV>
    </DIV>
    </TD></TR></TABLE>
    </DIV>
    </body>
    </html>

    I would like to 'doNotDarkenThisDiv' be over the 'darken' div (so
    background of doNotDarken... should be white, but it's not (in IE)).
    Anyyone know any solution for that?
    wilq, Feb 11, 2008
    #3
  4. wilq

    SAM Guest

    wilq a écrit :
    >
    > I mean that all DIV-s got own backgrounds. Darken one got black
    > background with opacity 50%,


    but ... what you did seems to work (in Fx) :

    <html>
    <head>
    <style type="text/css">
    #darken {
    background-color : black ;
    position : absolute ;
    filter : alpha(opacity=50) ;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    width : 150;
    height : 150 ;
    /*
    z-index : 11 ;
    */

    }
    #someDiv
    {
    position:absolute;
    z-index:10;
    }
    #someChildDIV
    {
    position:absolute;
    }

    #doNotDarkenThisDiv
    {
    background-color : WHITE ;
    /*
    z-index:23;
    */
    }
    </style>
    </head>
    <body>
    <DIV id="darken"></DIV>
    <DIV id="someDIV">
    <TABLE><TR><TD>
    <DIV id="someChildDIV"> Some text
    <DIV id="doNotDarkenThisDiv"> IMPORTANT DIV</DIV>
    </DIV>
    </TD></TR></TABLE>
    </DIV>
    </body>
    </html>
    SAM, Feb 12, 2008
    #4
  5. wilq

    wilq Guest

    Hmm it work's in FF in IE 6.0 but not in IE 7.0 ?? hmmm but its not my
    problem ehh:/ I have to make a proper sample again. Grr..
    wilq, Feb 12, 2008
    #5
  6. wilq

    SAM Guest

    wilq a écrit :
    > Hmm it work's in FF in IE 6.0 but not in IE 7.0 ?? hmmm but its not my
    > problem ehh:/ I have to make a proper sample again. Grr..


    And with only :


    #darken {
    background-color : #888;
    }

    Why to work with opacity with a div in rear of layout ?

    --
    sm
    SAM, Feb 12, 2008
    #6
  7. wilq

    wilq Guest

    On Feb 12, 3:05 pm, SAM <>
    wrote:
    > wilq a écrit :
    >
    > > Hmm it work's in FF in IE 6.0 but not in IE 7.0 ?? hmmm but its not my
    > > problem ehh:/ I have to make a proper sample again. Grr..

    >
    > And with only :
    >
    > #darken {
    >          background-color : #888;
    >          }
    >
    > Why to work with opacity with a div in rear of layout ?
    >
    > --
    > sm


    First of all: The script do not works in IE 7.0 (but in fact mine
    problem ocurres in IE 6.0 so now im trully confused ;))). Second: I
    want a darkening div as i presented there - i mean that I need to
    darken all context on page and to shop a "popup", but ocasionally i
    want to "do not darken" few elements of context. In my logic (maybe
    wrong logic) setting a z-index for element of darkened context should
    make them to be not darken but it dont work. ;( ech...
    wilq, Feb 12, 2008
    #7
  8. wilq

    SAM Guest

    Re:[CSS] IE <DIV> layer and z-index question

    wilq a écrit :
    > I want a darkening div as i presented there - i mean that I need to
    > darken all context on page and to shop a "popup", but ocasionally i
    > want to "do not darken" few elements of context.


    We are out of goal of this ng ...

    This bellow almost works (in my Fx),
    it rest to treat the tables problem.

    - the darken must be inserted in all end of the body (no z-index)
    to be on front (over all others elements)
    - the not darken must be in absolute position and with z-index (anyone)


    <html>
    <head><title>test darken</title>
    <style type="text/css">
    #darken {
    position : absolute ;
    width : 100%;
    height : 100%;
    top: 0; left: 0;
    background-color : black ;
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6 ;
    filter : alpha(opacity=60) ;
    }
    td { empty-cells: show; vertical-align: top; }
    td div {
    position: relative; /* */
    width: 200px;
    border: 1px solid
    }
    ..doNotDarkenThisDiv {
    position: absolute;
    top: 0px;
    z-index: 1;
    background-color : #ffc ;
    border:1px solid red;
    padding: 5px; margin: 0;
    }
    </style>
    </head>
    <body>
    <DIV id="someDIV">
    <TABLE border=1 cellspacing=3>
    <TR>
    <TD>
    <div>
    <p id="someChildDIV"> Some text
    <span class="doNotDarkenThisDiv"> IMPORTANT DIV</span>
    </p>
    </div>
    </TD>
    <td>
    <div>
    <p class="doNotDarkenThisDiv">one other very important</p>
    </div>
    </td>
    </TR>
    <tr>
    <td style="background:#ff5"><div><p>some more text</p></div></td>
    <td>here also : some text</td>
    </tr>
    </TABLE>
    </DIV>
    <DIV id="darken"></DIV>
    </body>
    </html>

    --
    sm
    SAM, Feb 13, 2008
    #8
  9. wilq

    wilq Guest

    Thanks for reply! I have bad news :( It's still not working in IE. It
    working in FF, but the code i presented before works in FF too so
    nothing changes :( Any other ideas? I found a site about IE bug, but i
    cant find any workaround ... :( here it is: http://aplus.co.yu/lab/z-pos/
    wilq, Feb 13, 2008
    #9
  10. wilq

    wilq Guest

    Ok i found a first workaround:

    Setting z-index of parent element higher than a darkening element,
    then gives all content lower z-index makes it show properly. Here is
    code:

    <html>
    <head>
    <style type="text/css">
    #darken {
    background-color : black ;
    opacity: 0.5 ;
    position : absolute ;
    filter : alpha(opacity=50) ;
    width : 150;
    height : 150 ;
    z-index : 11 ;

    }
    #someDiv
    {
    position:absolute;
    z-index:12; <---- notice here
    }
    #someChildDIV
    {
    position:absolute;
    z-index : 10 ; <---- notice here
    }

    #doNotDarkenThisDiv
    {
    background-color : WHITE ;
    z-index:23;
    }
    </style>
    </head>
    <body>
    <DIV id="darken"></DIV>
    <DIV id="someDIV">
    <TABLE><TR><TD>
    <DIV id="someChildDIV"> Some text
    <DIV id="doNotDarkenThisDiv"> IMPORTANT DIV</DIV>
    </DIV>
    </TD></TR></TABLE>
    </DIV>
    </body>
    </html>
    wilq, Feb 13, 2008
    #10
  11. wilq

    wilq Guest

    Ok final solution shows exacly the problem:

    <html>
    <head>
    <style type="text/css">
    #darken
    {
    z-index : 11 ;
    }
    </style>
    <script type="text/javascript">
    function test()
    {
    alert(document.getElementById("darken").style.zIndex);
    document.getElementById("darken").style.zIndex=5;
    alert(document.getElementById("darken").style.zIndex);
    }
    </script>
    </head>

    <body onload="test()">
    <DIV id="darken"></DIV>
    </body>
    </html>


    It seems that setting z-index via css do not sets style.zIndex for
    object (but dunno how it it can works normally on all site). So
    workaround for that problem is manually set z-index via style.zIndex
    on "onload".

    Hope it will helps someone!
    wilq, Feb 13, 2008
    #11
  12. wilq

    SAM Guest

    wilq a écrit :
    >
    > It seems that setting z-index via css do not sets style.zIndex for
    > object


    CSS style any objets you gave to them to style, and even z-index.

    But it is very right, the JS can only get JS styles
    (style attribute of object)

    you'ld need :

    <DIV id="darken" style="z-index:25"></DIV>

    to know on witch z-index 'darken' is set
    (probably you could inspect Rules too but it is more difficult)

    > workaround for that problem is manually set z-index via style.zIndex
    > on "onload".


    Why that ?

    --
    sm
    SAM, Feb 14, 2008
    #12
  13. wilq

    SAM Guest

    wilq a écrit :
    > Ok i found a first workaround:
    >
    > Setting z-index of parent element higher than a darkening element,
    > then gives all content lower z-index makes it show properly. Here is
    > code:


    Yes that works too.

    It's difficult for me to judge since my Fx worked fine with a lot of
    options about these z-index and because I have not IE ...

    The given code is very tortuous just to get an element correctly Z indexed.
    Did you find it in M$ recommendations (FAQ or knowledge base) ?

    --
    sm
    SAM, Feb 14, 2008
    #13
  14. wilq

    wilq Guest

    On Feb 14, 2:36 am, SAM <>
    wrote:
    > wilq a écrit :
    >
    > > Ok i found a first workaround:

    >
    > > Setting z-index of parent element higher than a darkening element,
    > > then gives all content lower z-index makes it show properly. Here is
    > > code:

    >
    > Yes that works too.
    >
    > It's difficult for me to judge since my Fx worked fine with a lot of
    > options about these z-index and because I have not IE ...
    >
    > The given code is very tortuous just to get an element correctly Z indexed..
    > Did you find it in M$ recommendations (FAQ or knowledge base) ?
    >
    > --
    > sm


    Huh Your answer was faster than mine "remove post" method :)) In fact
    i found that i did not solved problem, just made a "visual" mistake
    when trying solve this. Instead i made a somewhat stupid but working
    solution: I create one DIV outside of everything and when i want to
    make "doNotDarkenThisDiv" visible - i just copy it all via appendChild
    to this temporary DIV. After everything is back to normal i just
    copying it back to orginal place. Now i have other problem:

    Copying it to temporary layer works well and on every Browsers.

    Now I got new problem - I got problem to appendChild it back to
    orgiginal DIV ech... This problem sux so hard ;(
    wilq, Feb 14, 2008
    #14
  15. wilq

    SAM Guest

    wilq a écrit :
    >
    > Now I got new problem - I got problem to appendChild it back to
    > orgiginal DIV ech... This problem sux so hard ;(


    example 1 :

    function moveThisDiv(divId, target) {
    divId = documentGetElementById(divId);
    target = target=='body'?
    document.getElementsByTagName('BODY')[0] :
    documentGetElementById(target);
    target.appendChild(divId);
    }

    <button onclick="moveThisDiv('darken', 'theDiv');">
    move 'darken to the div 'theDiv' </button>
    <button onclick="moveThisDiv('darken', 'body');">
    move back 'darken' to the end of 'body' </button>



    example 2 :

    function $(id) { return document.getElementById(id); }
    function moveInBottom(divId, target) {
    target = target=='body'?
    document.getElementsByTagName('BODY')[0] :
    $(target);
    target.appendChild($(divId));
    }
    function moveBefore(divId, target) {
    $(target).parentNode.insertBefore($(divId), $(target));
    }

    <button onclick="moveInBottom('darken', 'theDiv');">
    move 'darken to the end of div 'theDiv' </button>
    <button onclick="moveInBottom('darken', 'body');">
    move 'darken to the end of the 'body' </button>
    <button onclick="moveBefore('darken', 'theDiv');">
    move back 'darken' before 'theDiv' </button>


    --
    sm
    SAM, Feb 15, 2008
    #15
  16. wilq wrote:
    > I got a little problem, maybe You could help me out.
    >
    > I have one layer that is used to darken all content on page (opacity
    > 50%) to make other layer more visible.


    Nonsensical approach. Use a dark background color and set the `opacity' CSS
    property and its proprietary equivalents for the elements to be darkened
    accordingly.

    That said, your problem is off-topic here as script programming is not
    involved at all. Try comp.infosystems.www.authoring.stylesheets.


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Feb 15, 2008
    #16
  17. wilq

    wilq Guest

    On 15 Lut, 01:24, SAM <>
    wrote:
    > wilq a écrit :
    >
    >
    >
    > > Now I got new problem - I got problem to appendChild it back to
    > > orgiginal DIV ech... This problem sux so hard ;(

    >
    > example 1 :
    >
    > function moveThisDiv(divId, target) {
    > divId = documentGetElementById(divId);
    > target = target=='body'?
    >           document.getElementsByTagName('BODY')[0] :
    >           documentGetElementById(target);
    > target.appendChild(divId);
    >
    > }
    >
    > <button onclick="moveThisDiv('darken', 'theDiv');">
    >    move 'darken to the div 'theDiv' </button>
    > <button onclick="moveThisDiv('darken', 'body');">
    >    move back 'darken' to the end of 'body' </button>
    >
    > example 2 :
    >
    > function $(id) { return document.getElementById(id); }
    > function moveInBottom(divId, target) {
    > target = target=='body'?
    >           document.getElementsByTagName('BODY')[0] :
    >           $(target);
    > target.appendChild($(divId));}
    >
    > function moveBefore(divId, target) {
    > $(target).parentNode.insertBefore($(divId), $(target));
    >
    > }
    >
    > <button onclick="moveInBottom('darken', 'theDiv');">
    >    move 'darken to the end of div 'theDiv' </button>
    > <button onclick="moveInBottom('darken', 'body');">
    >    move 'darken to the end of the 'body' </button>
    > <button onclick="moveBefore('darken', 'theDiv');">
    >    move back 'darken' before 'theDiv' </button>
    >
    > --
    > sm



    Thanks for reply and for scriptings. I made my own solution meanwhile.
    The problem with copying content back was that the applyChild used on
    document.getElementById('someDiv') movies all content of this element
    with "<DIV id='someDiv'> </div>" that this content was IN. So I just
    have to make own function that copies all content of DIV leaving a
    braces <DIV id(...)</div> in place. It's done via those functions:

    childrens=document.getElementById('d1').childNodes;
    while(childrens[0])
    document.getElementById('d3').appendChild(childrens[0]);

    or in optimized, variable-less version:

    while(document.getElementById('d1').childNodes[0])
    document.getElementById('d3').appendChild(document.getElementById('d1').childNodes[0]);


    The rest make new DIV positioned and sized the same as its parent. It
    works well in FF, Opera, IE 7.0. I hope that it will help someone in
    future. Have nice bugtracking in future heh!.





    <html>
    <head>

    <script type="text/javascript">

    function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
    do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;

    } while (obj = obj.offsetParent);
    }

    return [curleft,curtop];
    }

    function zmien()
    {
    var childrens;

    if (document.getElementById('d1').innerHTML)
    {
    childrens=document.getElementById('d1').childNodes;

    while(childrens[0])
    document.getElementById('d3').appendChild(childrens[0]);


    document.getElementById('d3').style.width=document.getElementById('d1').offsetWidth
    +'px';

    document.getElementById('d3').style.height=document.getElementById('d1').offsetHeight
    +'px';

    document.getElementById('d3').style.top=findPos(document.getElementById('d1'))
    [1]+'px';

    document.getElementById('d3').style.left=findPos(document.getElementById('d1'))
    [0]+'px';


    }
    else
    {
    childrens=document.getElementById('d3').childNodes;

    while(childrens[0])
    document.getElementById('d1').appendChild(childrens[0]);
    }
    }

    </script>
    </head>
    <body marginheight="0" marginwidth="0"><DIV id="d3"
    style="position:absolute;z-index:4;backgroud-color:#00ff00"></DIV>
    <Center><table><tr><td width="200" height="40" bgcolor="blue"
    align="left"><BR><BR><BR>
    <DIV id="d1">
    Tu tresc pierwszego div-a asdf as dfsa fsf das fad s
    <table><tr><td>tutaj tabelka</td></tr></table>
    <P> KOLEJNY PARAGRAF</P>

    </DIV>
    </td></tr>
    <tr><td width="200" height="40" bgcolor="red">
    <DIV id="d2"></DIV>
    </td></tr>

    </table>



    <input type="button" value="zmien miejscami" onclick="zmien()">
    <div id="x"></div><div id="y"></div>
    </center>
    </body>
    </html>
    wilq, Feb 15, 2008
    #17
  18. wilq

    wilq Guest


    > Nonsensical approach.  Use a dark background color and set the `opacity'CSS
    > property and its proprietary equivalents for the elements to be darkened
    > accordingly.
    >
    > That said, your problem is off-topic here as script programming is not
    > involved at all.  Try comp.infosystems.www.authoring.stylesheets.
    >
    > PointedEars
    > --
    > var bugRiddenCrashPronePieceOfJunk = (
    >     navigator.userAgent.indexOf('MSIE 5') != -1
    >     && navigator.userAgent.indexOf('Mac') != -1
    > )  // Plone, register_function.js:16


    It seems that You did not understand all problem that I told about
    here - just read one of links that i typed here and You will
    understand that solution of mine problem isn't lying in css only (i
    really tried to solve it just only via css - IT SHOULD BE solved via
    CSS, but IE is kind of bugged program). In fact as I proposed - there
    is JS solution for this problem... You can try check it by yourself
    using code that I gave ..... Eh.... never mind.
    wilq, Feb 18, 2008
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. et
    Replies:
    2
    Views:
    1,877
  2. java-john
    Replies:
    0
    Views:
    518
    java-john
    Mar 23, 2006
  3. Federico Bari
    Replies:
    2
    Views:
    1,939
    Federico Bari
    Aug 31, 2003
  4. Dhananjay
    Replies:
    1
    Views:
    1,089
    sloan
    Dec 18, 2006
  5. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    256
    Tomasz Chmielewski
    Mar 4, 2008
Loading...

Share This Page