Кой-какие полезные скрипты

1. viewObject предназначен для отображения всех полей какого-либо объекта. Выводит окошко в котором представлены все поля объекта и их значения. Пример

<script type="text/javascript" src="scripts/view_object.js"></script>

<div id="test_div">Bla-bla</div>

<script>

var test_div = document.getElementById("test_div");

viewObject(test_div);

</script>

2. BrowserDetect Скрипт для определения браузера и его версии. Умеет отлавливать IE, Firefox, Opera, Safari и всякие другие. Пример

<script type="text/javascript" src="scripts/browser_version.js"></script>

<script>

alert("Client: " + BrowserDetect.browser +" ver: "+ BrowserDetect.version);

</script>

3. SWFObject Предназначен для вставки SWF объекта в страницу так, чтобы вокруг него не появлялась дебильная рамочка, которую особенно любит рисовать эксплорер и чтобы не приходилось тыкать по SWFке дважды, чтоб ее активировать. Пример:

<script type="text/javascript" src="scripts/swfobject.js"></script>

<div id="flashcontent">

<strong>You need to <a href="http://www.macromedia.com/go/getflashplayer">upgrade your Flash Player</a></strong>

</div>

<script type="text/javascript">

var fo = new SWFObject("swf/flash.swf", "navigation", "1083", "767", "8.0.22", "#FFFFFF", true);

fo.addParam("wmode", "transparent");

fo.write("flashcontent");

</script>

flash.swf	- полный путь до выводимого Flash-объекта
navigation	- ID флешки (не обязятельно)
1083	- высота флешки
767	- ширина флешки
8.0.22	- версия плеера для корректной работы флешки
#FFFFFF	- фон выводимой области

Абсолютно позиционируемый DIV поверх SELECT

Довольно известная бага IE6. Заключается в том, что если накрыть SELECT дивом, то SELECT ВСЕГДА отрисовывается поверх, несмотря ни на какие z-index.

Причина
Выдержка из MSDN: This element is a windowed control and does not support the z-index attribute or zIndex property. Иначе говоря SELECT при обработке страницы заменяется виндовым контролом и ему глубоко накласть на z-index;

Постановка задачи
Сделать так чтоб SELECT отображался корректно под DIV'ом

Решение
1. Написать собственный класс, на основе использования слоев, который заменит собой SELECT
2. Детектить браузер c помощью скрипта, и делать SELECT'у style.display = "none"
3. Накрывать SELECT iframe'ом. Но это не всегда возможно, особенно если DIV должен быть полупрозрачный.
4. Воспользоваться скриптом, который дивным образом решает эту проблему. WCH.
А теперь пример кода:


<script type="text/javascript" src="scripts/WCH.js"></script>

<style>

#al {

font-weight: bold;

font-size:12px;

color: #fff;

background-color: #900;

padding: 20px;

border: 1px solid #000;

width: 100px;

height: 100px;

position: absolute;

left: 200px;

top:70px;

z-index: 10;

}

</style>

<script type="text/javascript">

function pageload() {

WCH.Apply('al');

}

if (window.attachEvent) {

window.attachEvent("onload", pageload);

}

</script>

<div id="al">Layer with pos:absolute and z-index:10</div>

<p>

<select style="width:500px;">

<option value="Fractions" selected="selected">Option-1</option>

<option value="Decimals">Option-2</option>

<option value="American">Option-3</option>

</select>

</p>

<p>

<select style="width:500px;">

<option value="Fractions" selected="selected">Option-1</option>

<option value="Decimals">Option-2</option>

<option value="American">Option-3</option>

</select>

</p>

Лекарство взято отсюда. Пример там же.

Вызов JavaScript после обновления UpdatePanel

Многие веб-девелоперы столкнулись с такой проблемой как вызов клиентского скрипта, находящегося внутри аяксовой апдейт панели. Они бля, не работают при обновлении панели....просто не работают и все....

Постановка задачи
Сделать так, чтобы после отработки UpdatePanel вызывался клиентский JavaScript

Решение
Причина в том, что ScriptManager который находится на странице не обрабатывает клиентские скрипты, поэтому надо сделать подписку на событие, обернуть скрипт в функцию и вызывать ее в качестве обработчика. Показываю...

<script language="javascript" type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(ShowBeforeAlert);

function ShowBeforeAlert(sender, args){

alert("Function before UpdatePanel refresh");

}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ShowAfterAlert);

function ShowAfterAlert(sender, args){

alert("Function after UpdatePanel refresh");

}

</script>

<asp:UpdatePanel runat="server" UpdateMode="Conditional" id="UpdatePanel">

<contenttemplate>

<script language="javascript" type="text/javascript">

alert("Page Load");

</script>

<asp:button runat="server" id="TestButton" Text="Test"/>

</contenttemplate>

</asp:UpdatePanel>

Начало

Вот уже год как я работаю веб-программистом. Стаж маленький - скажут многие. И многие будут правы, но... этого времени достаточно, чтоб понять как все непросто обстоит с браузерной совместимостью.

Я работаю в компании Site-Mechanics. Мы занимаемся разработкой сайтов в основном для буржуев, а потому критерии качества сайта у нас достаточно высокие.

Короче говоря, все эти мазиллы и сафари меня так достали, что в один прекрасный день(сегодня) я решил записать все их баги и способы обхода в блог, дабы помочь широкой общественности веб-девелоперов не наступать на одни и те же грабли.

Все вопросы освещаемые здесь будут касаться следующих технологий:
ASP.NET, AJAX, JavaScript, C#, MSSQL, CSS.

Вообще я пока не освоил всех возможностей CSS(для верстки у нас есть специальный человек), но постараюсь иногда затрагивать и этот вопрос.

Вот. Вроде бы и все.....Добро пожаловать