Выражая IT

Сегодня, как и любой другой "День свиньи Ground", я работал над некоторыми CSS / бестабличные макетов. Все шло хорошо в IE 7, FF 3 и Chrome, ДО вдруг, я видел некоторые не-игнорируемые поля увидеть только в Google Chrome. Хотя очень странно и worring, было несколько новых ошибка / проблема, что я пришел accross, был, наконец, некоторые специи в моей земной работы. Сад (но хороший) она была исправлена ​​в течение нескольких минут зонда ...

В принципе, он похож Google Chrome игнорировал мои CSS Сброс (маржа: 0px). Это на самом деле был вызван стилей агента пользователя (-WebKit-обивка-старт: 40px). Таким образом, решение было сбросить этот стиль, установив отступы: 0 неправильно элементов.
Хороший способ предотвратить возникновение этой проблемы для любого элемента является использование глобальной Отдых CSS следующим

* {Маржа: 0; обивка: 0;}

Что такое User Agent Style Sheets (спецификации)?
Ниже приводятся выдержки из http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , последующие ссылки, чтобы узнать больше о пользователе листы агента стиль

CSS 1 представляет идею о том, что каждый User Agent (UA, часто "браузер" или "Веб-клиент») будет иметь таблицу стилей по умолчанию, которая представляет документы в разумный - но, возможно, мирской - образом. CSS 2 сказано, что соответствующие ПА должны применяться стилей по умолчанию (или вести себя, как если бы они и сделали), а стиль по умолчанию агента пользователя листе должны представлять элементы языка документа таким образом, чтобы удовлетворять общим ожиданиям презентации язык документа, CSS 3, вероятно, того же мнения.

Поскольку спецификации CSS оставить его до реализации, следует ли использовать "реальные" стилей для отображения по умолчанию или нет, это не удивительно, что вы не можете найти таблицу стилей по умолчанию в папке установки каждого браузера. В отличие от Internet Explorer от Microsoft, а также оперы, например, (и, насколько я знаю), Gecko браузеров, как Firefox и Netscape Navigator (искать "html.css"), но и Konqueror сделать это довольно просто понять их по умолчанию стиль.

Это те, старые школы, но, как обычно, это моя память дополнения ...
Так отключено = "истина" и инвалидам = "ложных" то же самое? Да
... Не верю, хорошо! Thats, так оно и есть ... вот некоторые быстрые объяснение ...
"Отключено" является атрибутом любого элемента формы / поля и, следовательно, может принимать любые значения по своей природе.

Пока этот атрибут присутствует, элемент будет отключен независимо от его стоимости. например, для.
<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">

Все вышеперечисленное сделает это поле формы "Отключено".

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

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

Помните, "любое значение (или значение не во всех) людей с ограниченными возможностями атрибут, браузер сделает его отключить». Для простоты в наших умах W3C рекомендует, что мы используем отключены = "инвалидов" в таких ситуациях.

Это различие, хотя, когда мы использовать этот атрибут в JavaScript ...

document.form.element.disabled = true; / / элемент будет отключена
document.form.element.disabled = False / / элемент будет включен

Приведенные выше рассуждения верны и для этих атрибутов и элементов:

• проверить (переключатель и флажок)
• выбран (опция)
• NoWrap (TD)

Google начинает движение, побуждающих людей сбросить IE6 ... По прослушивание IE6 пользователей POPUP при загрузке страницы ... может быть не очень хорошая идея ... но, будучи разработчиком интерфейса, я должен присоединиться к этой группе универсал ... один меньше браузер для меня беспокоиться о Извините ... это эгоистично! но я включить этот JavaScript ... (TRY к данной странице В IE6) ...
Эй! и ярче записку ... Посмотри это проявление силы JAVASCRIPT .... он может даже снизить гигантские (или один раз это было)

SO ... Помощь избавить мир от IE6 с одной строки JavaScript!

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

С другой браузер, чтобы заботиться с завтрашнего дня! (IE8 выходит из бета-завтра государство) ... Его действительно пора IE6, учитывая его долго из-за смерти милосердия ... Вместе мы выступаем за падения IE6

«IE6 это новый 4 Netscape. Хаки, необходимые для поддержки IE6 все чаще рассматривается как избыток перевозки. Как и Netscape 4 в 2000 году, IE6 воспринимается, сдерживает в Интернете. "

Джефф Зельдман, стандарты гуру

А между тем для тех, кто вроде меня, которые будут затоплены со звонками в нарушении CSS макеты в IE8, вот старые работы вокруг / исправить использованием мета-теги (META HTTP-EQUIV = "X-UA-Compatible»), вы можете попробовать ...

Неправильное поведение IE8: CSS Layout поломок (Ориентация версию браузера с помощью метатегов в IE8)

Херес еще один маленький peice обмана Javascript, что мне пришлось копаться, потому что ситуация commaned он. В одном из моих веб-сайтов, у меня была ситуация, когда я должен был осуществлять "windows.onload" в два раза. Первое, что бы пришли к неопытный ум, как у меня (у меня честно сказать, что, поскольку я использую JavaScript рамки и библиотеки, я forgotton делать простые вещи, на мой собственный ... Печально, но факт), является следующий метод ...

 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 на сайте ...

 Функция addLoadEvent (функции) {
     уаг oldonload = window.onload;
     если (TypeOf 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, Fireworks НФА и др.
Причина, почему я выбрала тени с помощью CSS является то, что, как правило, при создании дизайна страницы / HTML заявления, требования сохранить итерации. Я имею в виду, в существующий веб-сайт с большим количеством изображений, как те, отображающий Freinds списка или галереи изображений, трудно будет переработать весь груз изображений, которые уже были выгружены, чтобы добавить или удалить тени, для этого вопрос.
Так что если вы сделали немного вперед мышления при создании HTMLS добавить эти дополнительные подразделения или правило, ситуация такова, что у вас есть цикл логика создания этих икон / миниатюр в XSL, PHP. JAVA или любой другой программы / скриптовый язык, вы можете добавить его в любое время, то это просто вопрос о шоу и скрыть эти тени с помощью свойства CSS Display, в соответствии с клиентами постоянно меняющихся требований ... Я havn't сделать этот вид дальновидных до этого ... но ahev прямо сейчас!

В приведенном ниже примере, исходное изображение без теней и dropshadows применяются по мере необходимости! Кроме того, я пошел немного больше, используя приемы из моих предыдущих Тута (Well! это, вероятно, кратчайшие различные учебные материалы, так что оправдано только называя их "Тута" 'ы) об использовании CSS клип собственности на показать только

Исходное изображение

Результаты CSS DropShadow

Посмотреть демо | Скачать файлы исходного кода

Почему я хочу, чтобы это понимать?? Хамм ...!!

Большинство писателей CSS согласятся, что CSS клип собственности, вероятно, одним из самых неиспользованных свойств CSS. Это было так верно и для меня и был самый счастливый пренебрегать этим, пока я не начал изменения MooTools ДВА ручку (Pin) Slider Компонент (с Range Indicator) .

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

Ну! как трудно это может быть? Не так много на всех ... ДА и НЕТ. Синтаксис CSS собственности Клип довольно прямой, но смысл / usuage немного croocked. С памятью, как у меня, каждый раз, когда я сижу в переделку на мой Slider сценарий ... У меня есть tokeep возвращаясь к использованию этого клипа собственности, чтобы напомнить себе логику, которую я создал в мой сценарий .... Отсюда! думал пера его, в надежде вспомнить его будущем (а также в интересах тех, кто, кажется Поражает собственности клипа CSS)

Что такое CSS клип делать?

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

Используя свойство клипа CSS, вы можете создать вырезку помощью формы прямоугольника. Как и многие другие свойства CSS (например, маржа, отступы и т.д.), используя прямоугольник, необходимо четыре координаты Top, Right, Bottom, Left (TRBL). Croocked природа этого свойства отражает, когда вы внимательно посмотрите, как клип вычисляет область отсечения, используя эти четыре координаты (посылает мозг в жеребьевке на некоторое время). Теперь, чтобы сбить вас с толку нижней начинается сверху, а правая начинается с левой стороны. . Вы видите, что я сказал? .... Таким образом, этот пост ...

Эта небольшая путаница может легко исчезнуть, с этим визуальным объяснение CSS Clip / прямоугольник собственности, как показано ниже!!

Требования CSS клип

Задача, которую мы начали это клип на следующем изображении Миниатюра на квадратный искать изображения (а также широкоугольные изображения)

Оригинальный Thumbnal / Image	Клип Требования к Sqaure Thumbmail

Результаты CSS клип

Посмотреть демо | Скачать файлы исходного кода

Иногда, чтобы сохранить pageweight вниз ... мы разбили наши сценарии на фрагменты ... Эти фрагменты JavaScript может быть загружен как и в случае необходимости (по событию или по нажатию на ссылку или кнопку и т.д.).

Загрузка Javascripts динамично прост и довольно прямо вперед, как показано ниже ...

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

и вы можете по следующей ссылке вызова в любую точку тела, или вы можете иметь этот сценарий "OnLoad" самого документа ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A HREF = "javascript: loadNewScript ('myDynamicScript.js');"> Load Динамический сценарий </ 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" />

БОЛЬШЕ О ТИПЫ ДОКУМЕНТОВ:

Если вы еще не знакомы с подобного животного под названием "Doctype" ... вот некоторые быстро читать
Каковы ТИПЫ ДОКУМЕНТОВ? Что такое БРАУЗЕР причуды и строгий режим?
Установка DOCTYPE в XSL

Для более глубокого понимания ТИПЫ ДОКУМЕНТОВ, попробуйте посетить эти ссылки ...
A List Apart: Исправьте ваш сайт с правой DOCTYPE!
A List Apart: Beyond DOCTYPE: веб-стандартов, вперед совместимости и IE8

Примечание: Хотя многие из нас, HTML / CSS люди были без учета важности DOCTYPE decleration в наших документах, Установка правой DOCTYPE, как правило, ответ на самый крест вопросы обозревателя.

Благодаря разнообразию Карусели там много для Mootools, а также, я все же решил написать свой собственный класс Карусель, некоторые веские причины
1. Требуются подкачки функцию (чтобы иметь возможность перейти частности слайд / шаг в карусели).
2. Требуются свободы с размещением кнопок ВЛЕВО и ВПРАВО / связи, где бы я, пожалуйста.
3. Больше контроля над Слайд шаги.

Мне удалось создать новые карусели, с учетом вышеупомянутых особенностей ... ниже ... Не стесняйтесь предлагать любые изменения потребуют!

Мой пример выглядит следующим образом ... [ Посмотреть презентацию ]

Посмотреть демо | Скачать Mootools карусель с подкачкой версии 1.0 (Скачано 1994 раз)

1. Карусель пейджинга

Вы можете легко добавить подкачки к карусели, просто установив подкачки флаг, который является последним parater прошло при создании экземпляра MooCarousel к истинной (хочу подкачки) или ЛОЖЬ (выигрыш желающих подкачки).

уаг carousel1 = новый MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда) / / нс = количество слайдов, SSS = слайд шага

И конечно же вы можете изменить внешний вид-н-стиль этих подкачки achors как вам будет угодно, изменяя их CSS.

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

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

Ну! есть небольшая проблема, хотя, подкачки якоря если установлен, то он получит порожденных всегда после того, как карусель компонентов. Я хотел сделать его динамичным, как хорошо, но потом просто сохранить сценарий для выдува пропорции, я решил пропустить его.
Но вы знаете, немного Javascript, вы можете легко изменить код подкачки поколения в MooCarousel класса порадовать своих потребностей.

2. Настройка левый и правый иконки

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

уаг 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; float: left; курсора: указатель;}

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

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

3. Настройка слайд шаги

Что я имею в виду мой Настройка ШАГИ SLIDE?
Большинство Карусели скользить с полным видимого окна. Так говорят у вас было четыре элемента (как в моем примере выше), то будет скользить всеми четырьмя элементами. С этой карусели компонент, Вы передаете количество слайдов и размер шага по вашему выбору.

уаг carousel1 = новый MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);
c_ns = количество слайдов, c_sss = слайд шага

Кроме того, в моем example1 я calcuted размер слайда шаг, основанные на логике, где, я знаю, количество предметов, шириной по каждому пункту, и поля, которые дали после того, как каждый элемент в моем CSS.

/ * Для пирушки 1 * /

уаг c1_w = 92; / / пирушки товара Ширина

уаг c1_n = 10; / / Общее количество товаров Сравнение пирушки

уаг c1_pp = 4 / / Количество Сравнение perpage пирушки товаров

уаг c1_marginFactor = 51;

уаг c1_sss = c1_w * c1_pp / / SSS = слайд шага

уаг c1_ns = ParseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / нс = количество слайдов

c1_sss + = c1_marginFactor / / SSS = слайд шага, 51 полей

Требования: Mootools 1.2

Посмотреть демо | Скачать Mootools карусель с подкачкой версии 1.0 (Скачано 1994 раз)