Дмитрий Шейко
*авторизированный доступ


Пара приемов [18/08/07]


В последнее время все чаще используются всплывающие слои для различных сообщений с эффектом тени. Возникает вопрос как эту тень корректно сверстать. Известный факт – 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};
}




Создать закладку Google slashdot YahooMyWeb Digg Technorati Delicious Забобрить эту статью! Добавьте на news2.ru




Дмитрий Шейко

ФИО: Дмитрий Шейко
Должность: программист
Ник: Korvin

Личные данные  Письмо автору

Yandex RSS
Получать обновления блога по Email




Мои публикации по теме

Как заставить AJAX читать между строк

Интерактивный грид своими руками
АОП на практике, или Как адаптировать проект и не затронуть систему

Аспектно-ориентированное программирование и PHP

Языки описания пользовательских интерфейсов

Заметки веб-программиста: инсталляция Apache+PHP4+MySQL под Windows (pdf)

Делаем визуальный редактор в HTML своими руками (pdf)

 

Miscellaneous

Add-on для PHPBB, показывает последние записи в форуме при наведении мышью через AJAX

Add-on для PHPBB, реализует простую архитектуру участия в стиле Web 2.0 на базе форума

 

 

 

PHPClasses

 

PHP Programming Innovation award winner
October 2005
Winner

 

 

Персональный сайт:

http://www.cmsdevelopment.com

 

 

Мои прочие блоги:

http://livejournal.com/~dsheiko/ 

Самиздат

http://zhurnal.lib.ru/s/shejko_d_p/ 


Избранное

Лучшая бесплатная CMS для персональных сайтов http://sapid.sf.net/, платформа веб-интеграции http://www.sitesapiens.ru

CMS - аналитика: 

 

http://www.cmswiki.com
http://www.cmswatch.com
http://www.cmswire.com/
http://www.gilbane.com/
http://www.cmsmatrix.org
http://www.cms-lists.org/
http://www.cms-forum.org/

http://www.oscom.org

http://www.contentmanager.eu.com/matrix.htm

http://business-site.ru

http://cmslist.ru

http://www.cmsinfo.ws/

http://cmsobzor.ru/ 

Standarts

http://www.w3c.org

http://www.oasis-open.org

http://www.iso.ch/iso/en/ISOOnline.frontpage

http://www.ietf.org/

http://xmlstds.xemantics.com -

Все XML-стандарты одним CHM 


Information Architecture

http://iainstitute.org/library/

http://argus-acia.com

http://www.iawiki.net/IAwiki

http://louisrosenfeld.com/

http://www.eleganthack.com/blog/

http://www.iaslash.org/ia/

http://www-106.ibm.com ..


PHP

http://phpclub.ru

http://php.com.ua

http://www.php.net

http://software-engineer.org

http://www.phpguru.org/


Apache

http://apache.org

http://apache.lexa.ru

http://asmodeus.com.ua/library/ web/modules/mod_rewrite.htm

 

Java-script

http://msdn.microsoft.com

 

UML

http://www.uml.ru

http://www.interface.ru/public/990804/uml4b.htm

 


количество читателей онлайн и всего
BLOGUS.RU
Рейтинг блогов

Вверх
Вернуться

Поиск
© Red Graphic Systems