Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > IE <DIV> layer and z-index question

Reply
Thread Tools

IE <DIV> layer and z-index question

 
 
wilq
Guest
Posts: n/a
 
      02-11-2008
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!
 
Reply With Quote
 
 
 
 
SAM
Guest
Posts: n/a
 
      02-11-2008
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
 
Reply With Quote
 
 
 
 
wilq
Guest
Posts: n/a
 
      02-11-2008
On Feb 11, 8:18*pm, SAM <(E-Mail Removed)>
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?
 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      02-12-2008
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>
 
Reply With Quote
 
wilq
Guest
Posts: n/a
 
      02-12-2008
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..
 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      02-12-2008
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
 
Reply With Quote
 
wilq
Guest
Posts: n/a
 
      02-12-2008
On Feb 12, 3:05*pm, SAM <(E-Mail Removed)>
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...
 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      02-13-2008
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
 
Reply With Quote
 
wilq
Guest
Posts: n/a
 
      02-13-2008
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/

 
Reply With Quote
 
wilq
Guest
Posts: n/a
 
      02-13-2008
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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
business layer, data access layer , presentation layer for asp.net using C#.net Dhananjay ASP .Net 1 12-18-2006 11:35 PM
The business layer and data access layer java-john Java 0 03-23-2006 07:10 PM
Business Layer, Data Layer, Speed Issues, Classes, and all that et ASP .Net 2 03-06-2006 02:46 PM
difference b/w layer 2 switch and layer 3 switch praveen Cisco 1 10-22-2003 07:19 AM
**HELP: layer as form target and refresh layer with an external file ** Federico Bari HTML 2 08-31-2003 05:56 PM



Advertisments