Пара приемов

В последнее время все чаще используются всплывающие слои для различных сообщений с эффектом тени. Возникает вопрос как эту тень корректно сверстать. Известный факт – Firefox корректно отображает «тени» сохраненные в PNG, а IE можно заставить их отображать посредством инструкций в HTC файле. По инструкциям существует множество решений. Мне понравилось следующее:

1) Располагаем в корневой папке файл png.htc со следующим содержанием:

<PUBLIC:COMPONENT lightWeight="true">
    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="filterImage()" />
    <SCRIPT LANGUAGE="JScript">
        var orignalImage = element.src; 
        var spacerImage = "images/x.gif"; 
        var htcCapable = /MSIE ((5.5)|[6])/.test(navigator.userAgent) && navigator.platform == "Win32";

    function filterImage() { 
        if(/.png$/.test(orignalImage)) { 
            if(htcCapable) { 
                element.src = spacerImage; 
                element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + orignalImage + ",sizingMethod='scale')"; 
            } 
        }
    element.style.visibility = 'visible'; 
    }

    </SCRIPT>
</PUBLIC:COMPONENT>

Где x.gif - прозрачный GIF 1x1 пиксел.

2) Тень сохраняем в файле PNG и определяем класс shadow при декорации ее в HTML:

    <img class="shadow" src="images/shadow.png" alt="0" />

3) В PHP-скрипт формирующий HTML добавляем код:

<?
if(preg_match("/sMSIEs/is", $_SERVER["HTTP_USER_AGENT"]))
print '<style>
img.shadow { visibility:hidden; behavior: url(png.htc); }
</style>';
?>

Все чаще ныне используются всплывающие диалоги подтверждений (confirm), «замораживающие» прочие элементы окна до принятия пользователем какого-либо решения. Для «заморозки» окна достаточно показать полупрозрачный слой на переднем плане (Z-index выше прочих элементов). Все просто, до тех пор, пока не выясняется, что ширина и высота этого слоя должны точно соответствовать актуальным габаритам рабочей области окна. Причем, эти показатели меняются не только при различных разрешениях экранов, но зависимости от числа баров браузера, его состояния и т.д. Самая удобная функция для определения текущей ширины и высоты окна их тех, что мне попадались:

window.size = function()
{
 var w = 0;
 var h = 0;

 //IE
 if(!window.innerWidth)
 {
  //strict mode
  if(!(document.documentElement.clientWidth == 0))
  {
   w = document.documentElement.clientWidth;
   h = document.documentElement.clientHeight;
  }
  //quirks mode
  else
  {
   w = document.body.clientWidth;
   h = document.body.clientHeight;
  }
 }
 //w3c
 else
 {
  w = window.innerWidth;
  h = window.innerHeight;
 }
 return {width:w,height:h};
}

Использовать можно так

window.center = function()
{
 var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};

 var _x = 0;
 var _y = 0;
 var offsetX = 0;
 var offsetY = 0;

 //IE
 if(!window.pageYOffset)
 {
  //strict mode
  if(!(document.documentElement.scrollTop == 0))
  {
   offsetY = document.documentElement.scrollTop;
   offsetX = document.documentElement.scrollLeft;
  }
  //quirks mode
  else
  {
   offsetY = document.body.scrollTop;
   offsetX = document.body.scrollLeft;
  }
 }
 //w3c
 else
 {
  offsetX = window.pageXOffset;
  offsetY = window.pageYOffset;
 }

 _x = ((this.size().width-hWnd.width)/2)+offsetX;
 _y = ((this.size().height-hWnd.height)/2)+offsetY;

 return{x:_x,y:_y};
}