ugrás a tartalomhoz

Gyermek elem szülő mögé pozicionálása... lehetséges?

csla · 2010. Jún. 10. (Cs), 16.50
Sziasztok!

<div id="_window_...">
  ...
  <div id="_shadow_...">
  </div>
  ...
</div>
Lehetséges-e valamilyen furmányos módon "shadow"-t "window" mögé pozicionálni?

Webalkalmazásban ablak árnyéka lenne (IE esetében), és elegáns és praktikus (mozgatáskor, bezáráskor stb.) lenne, ha - a többi ablakelemhez hasonlóan - gyermeke lenne az ablaknak.
‹ MI lehet a gond? Több adat visszaküldése Ajax-ban ›
 ■
1

megoldható

ironwill · 2010. Jún. 10. (Cs), 17.40
Szia!

Persze, megoldható.

1. megoldás: absolute-al pozícionálva, z-index-et használva.

2. ha az árnyékolás csak egy kép akar lenni, akkor érdemes háttérképként beállítani, pl. body-ra és bepozícionálni.

Ha részletezed a feladatot, akkor többet tudok segíteni.

üdv, Gábor
2

Még nem sikerült

csla · 2010. Jún. 10. (Cs), 18.02
Szia!

Abszolút pozicionált, z-indexre rá se bagózik. Nem kép, mert változó nagyságú az ablak, nyújtani meg nem akarom az árnyékot.

Kicsit lecsupaszítva, itt a lényeg:

function newWindow(newID,newParent,width,height,left,top,...)
  {
   var selfID = '_window_' + newID;

   if (!((newParent == 'body') || (newParent == 'divWrapper')))
    newParent = '_window_' + newParent;

   if (posFixed == true)
    {
     var parentLeft = 0; 
     var parentTop  = 0; 
    }
   else
    {
     var parentLeft = $(newParent).offsetLeft; 
     var parentTop  = $(newParent).offsetTop; 
    }; 

   //Window
   var oNewElement = document.createElement('div');
   oNewElement.id = '_window_' + newID;

   if ((newID == 'messageBox') || (newID == 'selectionBox') || (newID == 'Calendar') || (newID == 'Color'))
     {
      zIndexPopUpMax++;
      oNewElement.style.zIndex = zIndexPopUpMax;
     }
   else
     {
      zIndexNormalMax++;
      oNewElement.style.zIndex = zIndexNormalMax;
     };

   if (posFixed == true)
     oNewElement.style.position    = 'relative';
   else
     oNewElement.style.position    = 'absolute';      
   oNewElement.style.top         = parentTop + top + 'px';
   oNewElement.style.left        = parentLeft + left + 'px';
    
   oNewElement.style.width       = width + 'px';
   oNewElement.style.height       = height + 'px';
    
   var parent = $(newParent); 
   parent.insertBefore(oNewElement, null);

   //Shadow 
   if (shadow)
    {
      if (navigator.appName == 'Microsoft Internet Explorer')
        {
           //Shadow
           var oNewElement = document.createElement('div');
           oNewElement.id = '_shadow_' + newID;
      
           oNewElement.style.position    = 'absolute';
           oNewElement.style.top         = '-8px';
           oNewElement.style.left        = '-8px';
            
           oNewElement.style.width       = width + 6 + 'px';
           oNewElement.style.height      = height + 6 + 'px';
            
           oNewElement.style.background  = '#000000';
           
           oNewElement.style.zIndex      = zIndexNormalMax - 1;

           oNewElement.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color="#000000", Direction=0, Strength=0.2)';
           oNewElement.style.filter = 'progid:DXImageTransform.Microsoft.Blur(PixelRadius="5", MakeShadow="true", ShadowOpacity="0.2")';
      
           var parent = $(selfID); 
           parent.insertBefore(oNewElement, null);
        }
      else
        {
          oNewElement.style.MozBoxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
          oNewElement.style.WebkitBoxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
          oNewElement.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
        };
    } 
  ...
  }
5

hmm...

ironwill · 2010. Jún. 10. (Cs), 18.46
Szia!

A z-index, azonos típusú pozícionálásoknál működik, tehát:
a normál (static), mindig az absolute-os alatt lesz, bármennyi legyen is a z-index-e.
static/z-index: 1 < static/z-index: 2
static/z-index: 999 < absolute/z-index: 1
absolute/z-index: 1 < absolute/z-index: 2

Ezért, úgy kellene megoldanod:
div - position: relative
-div-window - position: absolute / z-index: 100
-div-shadow - position: absolute / z-index: 99

Így már működnie kell.

[OFF]
Miért szükséges, hogy külön dobozt hozz létre az árnyéknak?
Ha úgyis a css szabályokat használod, akkor miért nem közvetelenül arra az elemre teszed az árnyékolást?

Szerintem ne így optimalizálj Explorerre. Elég béna megoldás a Microsoft részéről, hogy saját filter tulajdonságot használtatnak ahelyett, hogy a szabvány css-t támogatnák. (arról nem is beszélve, hogy nem is ugyanúgy működik)

Ha lényeges, hogy minden böngészőn ugyan úgy nézzen ki, akkor inkább csináld meg képpel az árnyékolást.
[/OFF]

üdv, Gábor
3

css?

zzrek · 2010. Jún. 10. (Cs), 18.26
Árnyékot már lehet csinálni css-sel is, IE-ben régóta a drop shadow filterrel (a glow effekt még szebb, és hasonló) mozillában meg webkitben a -xxx-box-shadow ad lehetőséget ilyesmire.

Ha mindenképp div-ekkel akarod, akkor tedd bele egy divbe mindkettőt.
4

css

csla · 2010. Jún. 10. (Cs), 18.45
Mint látod, ezeket használom, csak IE esetében van (lenne) a plusz div, mert a DropShadow-val elérhető eredmény nem igazán tetszik, legalábbis nem sikerült elérnem - eddig - hogy olyan "finom" legyen, mint a többi.
6

Valóban

zzrek · 2010. Jún. 11. (P), 00.12
Valóban, látom már; nekem sem tetszik a dropshadow, de így jártak az IE-sek: nem olyan szép nekik... másrészt viszont kipróbálhatod pl. a glow effektet is, nekem az jobban tetszik.

Ja, itt egy link is:glow

(Opps)
7

Úgy tűnik nem, de van megoldás

csla · 2010. Jún. 11. (P), 00.54
Nos, arra jutottam, hogy nem lehetséges a dolog.
Az árnyék problémát azért sikerült megoldani egy _shadow_wrapper_... div alkalmazásával, ami az ablak div gyermeke, és a shadow div szülője. Így ugyan az ablak fölé kerül az árnyék, de alatta van az ablak összes elemének (gyermekének), tehát kinézetre rendben van, és lehet szépen egyben kezelni az ablakkal.
Ilyen kis szolid: www.csla.hu/link/shadow.jpg
Persze lehet játszadozni vele, hogy még egyformább legyen, a lényeg, hogy jó helyen van. :)