Изразяване на ИТ

Вчера, като всеки друг "Приземен свиня Ден", е работил по някои CSS / tableless оформления. Всичко вървеше добре в IE 7, FF 3 и Chrome, докато изведнъж видях някои от ООН ignorable маржове, наблюдавани само в Google Chrome. Въпреки, че много странно worring, Това е някакъв нов бъг / проблем, че съм идват accross, имаше най-накрая някаква подправка в светски ми работа. Сад (но добре) го определя рамките на няколко минути на сондата ...

По принцип, тя изглеждаше като Google Chrome игнорира ми CSS-Нулира (марж: 0px). То всъщност е била причинена от стилове на потребителския агент (WebKit-подложка-старт: 40px). Така че решението е да възстановите този стил, чрез определяне на подложка: 0 непослушните елементи.
Един добър начин да се предотврати този проблем да се случва на всеки елемент е да използвате глобален почивка на CSS, както следва

* {Граница: 0; подложка: 0;}

Какво е Потребителски листове агент стил (спецификация)?
Следният откъс е взета от http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , последваща връзка, за да прочетете повече на потребителските агент Стил листове

CSS 1 въвежда идеята, като посочва, че всяка User Agent (UA, често "уеб браузър" или "уеб клиент") ще има лист по подразбиране стил, който представя документи в разумен, но може би банално - начин. CSS 2 казва, че отговарят агенти потребителски трябва да се прилага един лист стил по подразбиране (или се държат така, сякаш те направи) и, че лист по подразбиране един потребител агент на стил трябва да представи елементите документ език по начини, които удовлетворяват общи очаквания за представяне на документ език; CSS 3 е вероятно да бъде от един и същи ум.

Тъй като CSS спецификации се остави на реализации, дали да се използват "истински" стил за основния дисплей или не, това не е учудващо, че не можете да откриете лист по подразбиране стил в инсталационната папка на всеки браузър. За разлика от Internet Explorer на Microsoft, както и Opera, например (и доколкото знам), Gecko браузъри като Firefox и Netscape Navigator (погледнете за "html.css"), но също така Konqueror, че е доста проста, за да разберем техния стил по подразбиране.

Това тези старото училище, но както обикновено това е ми памет добавка ...
Така че е забранено = "истинска" и хора с увреждания = "фалшиви" една и съща?
... Не вярвам, добре! Това е начина, по който тя е ... тук е малко бързо обяснение ...
"Инвалид" е атрибут на всяка форма елемент / поле и следователно може да приеме никаква стойност по своята същност.

Докато този атрибут е, елементът ще бъде забранено, независимо от неговата стойност. напр.
<input type="text" value="This е disabled" disabled>
<input type="text" value="This е disabled" disabled="disabled">
<input type="text" value="This е disabled" disabled="true">
<input type="text" value="This е disabled" disabled="false">

Всичко това ще направи този формуляр поле "инвалид".

Просто не предоставя атрибута "изключена" поддържа полето "ABLED" ... като по-долу

<input type="text" value="This не е disabled", />

Не забравяйте, "Всяка стойност (или никаква стойност) на инвалиди атрибут, браузърът ще го направи с увреждания". За да запазите нещата ясно в съзнанието ни W3C препоръчва, че ние използваме с увреждания = "инвалид" в тези ситуации.

Това е разликата въпреки че, когато ние използваме този атрибут, JavaScript ...

document.form.element.disabled = вярно; / / елемент ще бъде забранена
document.form.element.disabled = False / / елемент ще бъде включен

Посочените по-горе аргументи са също така и за тези атрибути и елементи:

• проверявани (радио бутона и отметката)
• избран (опция)
• nowrap (TD)

Google стартира движение ред на хората да се отърват от IE6 ... С подслушвателни IE6 потребителите с изскачащ за зареждане на страницата ... не може да бъде много добра идея ... но е разработчик на UI, аз трябва да се присъединят към този вагон лента ... един по-малко браузър за мен се тревожат за ... За съжаление това е егоистично! но аз съм този Javascript ... (опитайте тази страница в IE6) ...
Хей! и по-светло бележка ... Вижте, това е проява на силата на JavaScript .... тя дори може да свали гигант (или след като е)

Така че ... помощ се отърве от света на IE6 с по една линия на JavaScript!

http://code.google.com/p/sevenup/

С друг браузър, за да се грижи от утре! (, IE8 излиза от бета членка утре) ... Неговият наистина високо време IE6 е дал своето Long Поради смърт Mercy ... Съединените ние стоим за падането на IE6

"IE6 е нов 4 на Netscape. Хакове, необходими за подпомагане на IE6 все по-често се разглеждат като излишък железопътен товарен превоз. Подобно на Netscape 4 през 2000 г., IE6 се възприема за да се задържа в интернет. "

Джеф Zeldman, стандарти гуру

А междувременно, за такива като мен, които ще бъдат наводнени с призиви за чупене на CSS оформления в IE8, тук е стара творба около / се определи с помощта на мета тагове (мета HTTP-екв = "X-UA-съвместими"), бихте могли да опитате ...

Погрешно поведение IE8: CSS оформление счупвания (насочване версия на браузъра с помощта на мета таговете в IE8)

, Ерес друго малко peice, на измама Javascript, че аз трябваше да копаем наоколо, защото ситуацията го commaned. В един от моите уеб сайтове, имах тази ситуация, в която трябваше да въведе "windows.onload" два пъти. Първото нещо, че ще дойде да неопитен ум като моя (аз трябва да кажа честно, че, тъй като имам използвате JavaScript рамки и библиотеки, съм Забравена да го прости неща, на моя ... тъжно, но е истина), е следният метод ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 и т.н. ..

Съжалявам да кажа, но това няма да работят ... не искам да обсъдят науката изпълнението на Javascript много ... но в съответствие с неотдавнашното ми опит, само последната функция (onloadfn3) ще лошо всъщност се изпълнява.

В нормални ситуации, за разлика от моя (което аз ще говоря за малко по-късно) ... бихте могли да направите едно от следните да изпълни mutliple функции onload ....

Или нещо такова

 на функция doOnLoad () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

За сегашното ми положение не може да използвате някоя от по-горе ...
Защо имам нужда да се обадя windows.onload два пъти, а, че призовава две функции в рамките на една функция onload? Ето бърз поглед на моя проблем изявление ...

"Моят сайт" страници са структурирани като Wordpress Тема .... т.е. налице е обща header.php и Footer.php, който да се включва във всички страници на сайта. Налице е едно implementaion onload функция в Footer.php, да се направят някои общи функции onload. И има няколко страници, които се нуждаят от нещо на собствената си ONLOAD, освен тези, направено от общата функция onload. Ако аз зададете функция за обратно извикване директно към window.onload манипулатор, ще свръх-вози на вече възложени извика в Footer.php "

.... Е мой проблем разбира ?

Е! има няколко решения, че съм откри. Те всички са много сходни и най-вече implementions на решение, дадено от за Саймън Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Решение:

Просто добавете този код на JavaScript на сайта ...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } за функция addLoadEvent (функции) {VAR oldonload, = window.onload; ако (Вид на window.onload = 'функция "!) {window.onload = функция} друго {window.onload = функция () {ако (oldonload) {oldonload при () } функции ()}}} 

И да го наречем, вместо на обичайните "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (функция () {
 / * Повече код, за да се движат по зареждане на страницата *
 }); 

Предимства на този код фрагмент ...
1. На първо място, това ви позволява да имате няколко събития windows.onload, наречен от отделни части от кода си, без overridding предходната дефиниция
2. Това наистина е ненатрапчив. Това могат да бъдат поставени във файл с други скриптове или в отделен файл.
3. Тя работи дори ако window.onload вече е определена.

Друг бърз пф. Ето нещо по-просто и хубаво, използвайки силата на CSS ... но е трудно concieve (и със сигурност не бях аз), да започнем с това. Като Добавяне Dropshadow, може да бъде peice торта за много от нас, като се използват някои инструменти за редактиране на изображения, като Photoshop ANF Фойерверки и др.
Причината, защо, аз избрали за Drop Shadow използване на CSS е, че обикновено по време на създаването на дизайна на страницата / HTML на заявление, изискванията пазят iterating. Какво искам да кажа е в съществуващ уеб сайт с много изображения, като тези, показващи freinds списък или галерия, тя ще бъде трудно да се регенерират целия товар на изображения, които вече са били разтоварени да добавяте или премахвате сенките, за това въпрос.
Така че, ако сте направили малко напред мислене, докато създаване на HTMLS да добавите тези допълнителни подразделения или обикновено ситуацията е, че имате Loop Logic генериране на тези икони / миниатюри в XSL, PHP. JAVA или друг програмен / скриптов език, можете да го добавите по всяко време, тогава е само въпрос на шоуто и скриване на тези сенки, използващи Покажи CSS собственост, както и на непрекъснато променящите се изисквания на клиентите ... аз havn't се направи това нещо напред мислене преди това ... но ahev започва сега!

В примера по-долу, оригиналното изображение е сянка безплатно, и dropshadows се прилагат, както се изисква! Също така, аз са отишли ​​малко повече, с помощта на трикове на по-ранните ми Тутанкамон (Well! те вероятно са най-кратък разнообразие от уроци, така че е оправдано само наричайки ги "Тутанкамон" и) за използване на CSS Clip Имоти покаже само

Оригиналното изображение

Резултатите от СГО DropShadow

Вижте Демо | Download sourcefiles

Защо искам да се разбере това?? ... Humm!!

Повечето писатели на СГО ще се съгласят, че CSS Clip имот е може би една от най-нетипичната-често използваните свойства на CSS. Това е толкова вярно за мен и е най-щастлив да го пренебрегнем, докато не започна промяна на MooTools два копчето (ПИН) Slider компонент (с обхват Indicator) .

Имаше добро предложение от една от съставните потребители промяна на плъзгача компонент, използват на подстригва backgroud изображения (срещу променлива разделение ширина), за да се посочи обхвата на плъзгача. Така дойде и моето време да се въведат забавно, но не-експерт (за мен разбира се) води на клипа собственост CSS.

Е! колко трудно може да бъде? Не е много на всички ... ДА и НЕ. Синтаксисът да използвате Clip CSS имот е доста изправено, но, смисъла, / usuage е малко croocked. С памет като моята, всеки път, когато седнете да се преработи на Slider Script ми ... Имам tokeep, препращащо към използването на този клип имот, за да се напомня на логиката, че са създали в моя скрипт .... Следователно! смята, че то писалката, с надежда да се помни, че бъдещето (а също и за полза на онези, които изглежда слисан от клипа Property CSS)

Какво CSS Clip направя?

Клипът е част от модул за визуалния ефект на CSS 2.1. Просто казано, неговата работа е да се постави на видно прозорец на върха на един обект, който се подстригва, така клипинг изображения и създаване на миниатюри, без да се налага да създавате допълнителни файлове (вече съм се сложи тази функция, за да използват по-добре в компонента плъзгача )

Използвайки клипа собственост CSS, можете да създадете клипинг с помощта на формата на прякото. Подобно на много други свойства на CSS (като марж, подложка и т.н.), използващи прякото изисква четири координати Top, надясно, надолу, наляво (TRBL). Croocked характер на този имот отразява, когато погледнем по-отблизо как клип изчислява клипинг региона, като се използват тези четири координати (изпраща мозъка в хвърляне за известно време). Сега да ви обърка дъното започва от върха, и правото започва от ляво. . Виждате ли какво ти казах? .... Оттук този пост ...

Това малко объркване може лесно да изчезне, с тази визуална обяснение на CSS Clip / прякото собственост, както по-долу!!!

Изискванията на СГО за клипа

Задачата, ние започнахме, е за клипа на следния умалено изображение в squarer търси образ (а също и широк ъгъл на изображение)

На Оригинален Thumbnal / изображение	Клипа Изисквания за Sqaure Thumbmail

Резултатите от СГО за клипа

Вижте Демо | Download sourcefiles

Понякога да запази pageweight надолу ... ние сме разделени на нашите скриптове на фрагменти ... Тези javascript, фрагменти могат да бъдат заредени, както и когато е необходимо (на дадено събитие или на кликване на връзка или бутон и т.н.).

Зареждане Javascripts динамично е прост и доста чисти напред както по-долу ...

= “text/javascript” > <Скрипт тип = "текст / JavaScript">
за функция loadNewScript (източник) {
Var = document.createElement ('Script');
s.setAttribute ("тип", "текст / JavaScript");
s.setAttribute ("SRC", източник);
document.body.appendChild (и);
}
</ Скрипта>

и можете да имате на следния линк за набиране навсякъде в тялото, или може да има този скрипт "onLoad", на самия документ ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <Една HREF = "JavaScript: loadNewScript (" myDynamicScript.js ");"> Зареди Dynamic Script </ A>

или

<body onload="loadNewScript('myDynamicScript.js');">

Ако сте CSS човек, вие ще разберете болката в получаване на вашите оформления работни кръстосано браузър. IE8 е още един гаечен ключ в работите за нас, разработчиците. Anywaz! ако ви удари по този въпрос, както аз направих вчера, където перфектно работи CSS в IE7 (и по-рано) и Firefox изведнъж започна да разхвърляне в IE8, опитайте това ... Това добре ли да се определят проблемите ми в момента ....

Използването на Мета декларация, ние можем да определи оказване на двигателя, бихме искали IE8 да се използва. Така че, за да накара IE8 да се направи като IE7 ... Поставете следния мета тагове в главата на вашия документ:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

По подразбиране IE Мета ще бъде: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
което би направило IE8 правят страница с помощта на новия режим на стандарти.

Ако е необходимо, този синтаксис може да се използва за настаняване на други браузъри, както по-долу:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Повече За DOCTYPES:

Ако сте все още непознат с вид на животно, наречено "DOCTYPE" ... ето някои бързи прочетете
Какви са DOCTYPES? Какви са Браузър странности и ПЪЛНА режим?
Настройка на DOCTYPE в XSL

За по-задълбочено разбиране за DOCTYPES, опитайте да посетите тези връзки ...
A List Apart: да се определи вашия сайт с десния DOCTYPE!
A List Apart: Отвъд DOCTYPE: Уеб стандарти, Forward съвместимост и IE8

Забележка: Въпреки, че много от нас HTML / CSS хора са се пренебрегва значението на DOCTYPE decleration, в нашите документи, създаването на правилните DOCTYPE, обикновено е отговорът на по-голямата част от трансграничните проблеми на браузъра.

С разнообразието на въртележката там, много и за MooTools, аз все още реших да напиша моя клас тип "въртележка", за няколко добри причини
1. Исках функцията за виртуална памет (за да бъдем в състояние да скочи даден слайд / стъпка в тип "въртележка").
2. Искаха свобода с поставянето на левия и десния бутони / връзки, където и да се моля.
3. Повече контрол през слайдове стъпки.

Успяха да се създаде нов тип "въртележка", с посочените по-горе функции ..., както по-долу ... Чувствайте се свободни да предлагаме някакви промени, ще изискват!!!

Примера ми прилича на ... [ Виж Demo ]

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1992 пъти)

1. Въртележката Пейджинг

Можете лесно да добавяте за виртуална памет на вашия тип "въртележка", просто чрез създаването на виртуалната памет, под чийто флаг плава корабът, който е миналата parater премина, докато създаването на копие на MooCarousel да е истина (искам виртуална памет) или невярно (, donot желанието за виртуална памет).

за Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно); / / NS = броя на кадрите, SSS = размер слайд стъпка

И разбира се можете да промените външния вид на N-усещане на тези пейджинг achors както ти е угодно, чрез модифициране на техните CSS.

Carousel_paging {текст-align: право; поле: 5px 10px 0 0;}
Carousel_paging ток, carousel_paging страница {контур: няма; ширина:.. 15px; височина: 15px; линия-височина: 15px; текст-align: център; дисплей: блок; поплавъка: ляво; фон: # D8D8EB; марж: 0 1px 0 0; текстови декорация: няма;}

Carousel_paging едно: hover, carousel_paging текущата {фон: # 4D4D9B; цвят: # FFFFFF;}.

Е! има малък проблем обаче, пейджинг котви ако е зададено, след това ще се генерира винаги след Carousel компонент. Исках да направя това динамично, както и, но след това само за да поддържат сценария за духа на пропорциите, реших да го пропуснете.
Но знаете ли малко Javascript, можете лесно биха могли да променят кода на поколение пейджинг в MooCarousel клас да се моля на вашите нужди.

2. Персонализиране на левия и десния икони

Можете да промените разположение, изображения или всеки displat собственост на левия и десен бутон просто играя наоколо с CSS. да бъде в състояние да променят разположенията на левия и десния buttoms е действителната причина за мен да ми право Въртележката нашия клас.
Тъй този MooCarousel клас, приема ID е от тези бутони, може действително да постави тези бутони навсякъде по страницата, ако обичате ... не трябва да бъде в йерархията елемента, тъй като в моя пример.

Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно);

CSS
Carousel_container_l, carousel_container_r {поле: 50px 0 0 0; позиция: относителна; ширина: 23px; височина: 20px; поплавъка: ляво; курсора: показалка;}

Carousel_container_r {фон-позиция: 0-38px;}

Carousel_container_l {фон-позиция: 0-58px;}

3. Стъпки Персонализиране слайдове

Какво имам предвид МОИТЕ Персонализиране слайдове СТЪПКИ?
Повечето въртележки плъзна в пълна с видимата прозорец. Да предположим, че сте имали четири елемента (като в моя проба-горе), тя ще се плъзне всичките четири позиции. С този тип "въртележка" компонент, се преминава броя на кадрите и размера стъпка по ваш избор.

Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно);
c_ns = броя на кадрите, c_sss = размер слайд стъпка

Също така, в моя example1 аз calcuted размера пързалка стъпка, на базата на логиката, където, знам, че броя на елементите, ширината на всеки елемент и маржовете, които са дали след всеки елемент в моя CSS.

/ * За пиршество 1 * /

VAR c1_w = 92; / / пиршество Позиция Ширина

VAR c1_n = 10; / / общ брой на Сравнение пиршество позиции

Var c1_pp = 4 / / Брой на елементите пиршество perpage Сравнение

VAR c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp / / SSS = размер на слайд стъпка

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / НЧ = брой на слайдове

c1_sss + = c1_marginFactor; / / SSS = пързалка стъпка, размер, 51 за маржовете

Изисквания: MooTools 1.2

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1992 пъти)