Wyrażając

Wczoraj, jak każdy inny "Dzień Hog Ground", pracowałem w niektórych CSS / tableless układów. Wszystko szło dobrze w IE 7, FF 3 i Chrome, bez tytułu nagle, widziałem kilka nie-ignorable marże widziałem tylko w Google Chrome. Choć bardzo dziwne i worring, to był jakiś nowy błąd / problem, że przyjechałem accross, nie było w końcu trochę przypraw w moim doczesnym pracy. Sad (ale ładne) zrobiło ustalony w ciągu kilku minut od sondy ...

Zasadniczo, to wyglądało jak Google Chrome zignorowała moje CSS Przywraca (margines: 0px). To rzeczywiście został spowodowany przez stylów agenta użytkownika (-webkit-padding-start: 40px). Rozwiązaniem było zresetować ten styl poprzez ustawienie padding: 0 elementy niewłaściwie.
Dobrym sposobem na uniknięcie tego problemu dzieje się z każdym elementem jest wykorzystanie globalnej Rest CSS następująco

* {Margin: 0; padding: 0;}

Co to ​​jest Arkusze agenta użytkownika stylu (specyfikacja)?
Poniższy fragment pochodzi z http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj , link wykonać, aby przeczytać więcej na kartach agenta użytkownika stylu

CSS 1 wprowadza pojęcie, stwierdzając, że każdy User Agent (UA, często "przeglądarka internetowa" lub "klient webowy") będzie miał domyślny arkusz stylów, który przedstawia dokumenty wymagane - ale zapewne przyziemne - sposób. CSS 2 mówi, że zgodne klienckie muszą stosować domyślny arkusz stylów (lub zachowywać się tak, gdyby tak było) i agenta użytkownika na domyślny arkusz stylów powinien przedstawić elementy języka dokumentu w taki sposób, że spełniają ogólne oczekiwania prezentacji w języku dokumentu; CSS 3 może być tego samego umysłu.

Ponieważ specyfikacje CSS pozostawić go do implementacji, czy użyć "prawdziwej" arkusz stylów do wyświetlania domyślnego, czy nie, to nie jest zadziwiające, że nie można znaleźć domyślne arkusze stylów, w każdej przeglądarce w folderze instalacyjnym. W przeciwieństwie do Microsoft Internet Explorer oraz Opera, na przykład (i o ile wiem), przeglądarki Gecko, takich jak Firefox i Netscape Navigator (szukać "html.css"), ale także Konquerora sprawiają, że dość proste do zrozumienia ich styl domyślny.

To te, old school, ale jak zwykle to jest mój dodatek pamięć ...
Więc jest wyłączona = "true" i wyłączone = "false" samo? Tak
... Nie wierzę, dobrze! thats sposób, to jest ... tu jest trochę szybkie wyjaśnienie ...
"Wyłączone" jest atrybutem każdego elementu formularza / pola i stąd może przyjąć dowolną wartość ze swej natury.

Tak długo jak ten atrybut jest obecny element będzie wyłączony, niezależnie od jego wartości. na przykład.
<input type="text" value="To jest disabled" disabled>
<input type="text" value="To jest disabled" disabled="disabled">
<input type="text" value="To jest disabled" disabled="true">
<input type="text" value="To jest disabled" disabled="false">

Wszystkie powyższe będzie pole to forma "Disabled".

Po prostu nie dostarczając atrybut "Disabled" trzyma Pole "braku zezwolenia dla pracy" ... jak poniżej

<input type="text" value="To nie jest disabled" />

Pamiętaj "Any wartość (lub wartość nie w ogóle) atrybutu disabled, przeglądarka będzie świadczyć, że wyłączona". Aby zachować rzeczy jasne w naszym W3C umysły zaleca używamy disabled = "disabled" w takich sytuacjach.

To jest różnica choć gdy używamy tego atrybutu w javascript ...

document.form.element.disabled = true; / / element będzie wyłączony
document.form.element.disabled = false; / / element zostanie włączona

Powyższe argumenty są również prawdziwe w odniesieniu do tych cech i ich części:

• zaznaczone (przycisk radio i checkbox)
• wybrany (opcja)
• nowrap (TD)

Google rozpoczyna ruch zachęty ludzie zrzucić IE6 ... By podsłuchowych IE6 użytkowników POPUP na stronie obciążenia ... nie może być to bardzo dobry pomysł ... ale jako programista UI, mam dołączyć do tego zespołu ... jeden wóz mniej przeglądarka dla mnie martwić ... Przepraszam samolubny jest! ale ja to ten javascript ... (uruchom tą stronę w IE6) ...
Hej! i na jaśniejszym notatki ... Zobacz to wyświetlacz POWER JavaScriptu .... może nawet obniżyć olbrzym (lub kiedyś była)

SO ... Pomoc uwolnienia świata od IE6 z jednej linii javascript!

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

Z innej przeglądarki dbać od jutra! (IE8 wychodzi z wersji beta jutra państwa) ... Jej naprawdę wysoki IE6 czasu z uwagi na jego długi z powodu śmierci Mercy ... Wielka stoimy do upadku IE6

"IE6 to nowy 4 Netscape. W hacki potrzebne do wspierania IE6 są coraz bardziej postrzegane jako nadmiaru towarów. Jak Netscape 4 w 2000 roku, IE6 jest postrzegane jako powstrzymując w internecie. "

Jeff Zeldman, standardy guru

A tymczasem dla tych, którzy tak jak ja, którzy zostaną zalane połączeń łamania układów CSS w IE8, tutaj jest stary prace wokół / naprawić za pomocą znaczników meta (meta http-equiv = "X-UA-Compatible") można było spróbować ...

Mis-zachowujące IE8: pęknięć CSS rozmieszczenia (Kierowanie wersję przeglądarki za pomocą znaczników meta w IE8)

Heres kolejny mały peice oszustwa Javascript że musiałem grzebać, bo sytuacja commaned go. W jednej z moich stron internetowych, miałem taką sytuację, gdzie musiałem wdrożyć "windows.onload" dwa razy. Pierwszą rzeczą, która przyszła do niedoświadczonego umysłu jak mój (muszę szczerze powiedzieć, że od I zostały z wykorzystaniem środowisk JavaScript i biblioteki, mam forgotton robić proste rzeczy na własną rękę ... smutne ale prawdziwe), jest następująca metoda ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 itd. ..

Przykro powiedzieć, ale to przyzwyczajenie pracować ... nie chcesz, aby omówić nauki wykonanie kodu JavaScript dużo ... ale według moich ostatnich doświadczeń, tylko ostatnia funkcja (onloadfn3) będzie chory rzeczywiście zostanie wykonany.

W normalnych sytuacjach, w przeciwieństwie do moich ust co powiem nieco później) ... można zrobić jedną z następujących czynności do wykonania mutliple funkcje onload ....

Czy coś takiego

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Z mojej obecnej sytuacji, nie mogę skorzystać z jednej z wyżej ...
Dlaczego trzeba zadzwonić windows.onload dwa razy, a że nazywając dwie funkcje w jednej funkcji onload? Oto szybki rzut oka na moje oświadczenie problem ...

"Moje strony witryny są zorganizowane podobnie jak motyw WordPress .... tzn. istnieje wspólny header.php i footer.php, który jest włączone do wszystkich stron witryny. Istnieje implementaion funkcja onload w footer.php zrobić kilka typowych funkcji onload. I jest kilka stron, które muszą coś własnego OnLoad, oprócz tych, zrobić wspólną funkcji onload. Gdybym przypisanie funkcji zwrotnej bezpośrednio do obsługi window.onload, będzie to zbyt jeździć wcześniej przypisane zwrotnych w footer.php "

.... Jest mój problem rozumieć ?

Dobrze! istnieje kilka rozwiązań, które znalazłem. Wszystkie one są bardzo podobne, a przede wszystkim implementions roztworu podanego przez Simon Willison ust http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Rozwiązanie:

Wystarczy dodać ten kod javascript do witryny ...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } Funkcja addLoadEvent (func) {var oldonload = window.onload if (typeof window.onload = "funkcja") {window.onload = func} else {window.onload = function () {if (oldonload) {oldonload () } func ()}}} 

I nazywają to zamiast zwykłego "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Więcej kodu na * ładowania strony
 }); 

Zalety tego fragmentu kodu ...
1. Przede wszystkim, to pozwala mieć wiele zdarzeń windows.onload, wywoływany z oddzielnych części kodu, bez overridding poprzednią definicję
2. To jest naprawdę dyskretna. Można go umieścić w pliku ze swoimi innych skryptów lub w osobnym pliku.
3. To działa nawet jeśli window.onload został już ustawiony.

Kolejny szybki tut. Oto coś łatwa i przyjemna, wykorzystując moc CSS ... ale trudno było concieve (i na pewno nie ja), aby rozpocząć. Dodawanie Dropshadow, może być peice z masłem dla wielu z nas, za pomocą jakiegoś narzędzia do edycji zdjęć, jak Photoshop ANF Fireworks itp.
Dlatego, że zdecydował się na cień za pomocą CSS jest to, że zwykle podczas tworzenia projektu strony / html wniosku, wymogi utrzymania iteracji. Chodzi mi o to, W istniejącej strony internetowej z wielu obrazów, podobnych do wyświetlania listy freinds lub galerię zdjęć, trudno będzie powtórnie przetworzyć cały ładunek zdjęć, które zostały już rozładowane, aby dodać lub usunąć cienie, na które sprawa.
Tak Jeśli zrobiłeś trochę przyszłościowe myślenie podczas tworzenia HTMLS dodać te dodatkowe podziały i zazwyczaj sytuacja jest taka, że ​​masz Logic pętli generowanie tych ikon / miniatur w XSL, PHP. JAVA lub inny programowania / skryptowy język, można go dodać w każdej chwili, to jest tylko kwestia show i ukrywa te cienie, korzystając z właściwości wyświetlanych CSS, jak na klientów wciąż zmieniających się wymagań ... Ja havn't zrobić tego rodzaju przyszłościowe myślenie przed tym ... ale ahev już teraz!

W poniższym przykładzie, oryginalny obraz jest cień za darmo i dropshadows są stosowane zgodnie z wymaganiami! Również I już trochę więcej, za pomocą sztuczek moim wcześniejszym Tut w Well! te są prawdopodobnie najkrótsza wiele tutoriali, więc jest uzasadnione tylko nazywając je "Tut" 's) o Korzystanie obiekt Klip CSS dla popisać tylko

Obraz oryginalny

Wyniki CSS DropShadow

Zobacz demo | DLA Pobierz sourcefiles

Dlaczego chcę to zrozumieć?? Humm ...!!

Większość pisarzy CSS zgodzi się, że nieruchomość Klip CSS to chyba jedna z najbardziej nie-używanych właściwości CSS. To było tak prawdziwe dla mnie i był najbardziej szczęśliwy zaniedbywać go, dopóki nie zacząłem modyfikacji mootools DWA pokrętło (Pin) składnika Slider (ze wskaźnikiem odległości) .

Nie było dobra propozycja od jednego z użytkowników składowych do modyfikacji składnika Slider używając przycięte backgroud zdjęcia (przed podziałem zmiennej szerokości), aby wskazać zakres suwaka. Tak więc przyszedł mój czas, aby wejść do zabawy, ale nie-biegłego (dla mnie ofcourse) Wody własności CSS Clip.

Dobrze! jak trudne to może być? Nie bardzo w ogóle ... TAK i NIE. Składnia do dysponowania nieruchomością Klip CSS jest dość prosto, ale sens / usuage jest nieco croocked. Z pamięcią jak moja, za każdym razem siadam do przerobienie na mojego skryptu Slider ... Mam tokeep nawiązując do wykorzystania tej właściwości CLIP, aby przypomnieć sobie logikę, że stworzyłem w moim skrypcie .... Stąd! Uważa się, że pióro go, z nadzieją na jego zapamiętanie, przyszłość (a także dla dobra tych, którzy wydają przekraczały przez właściwość CSS FILMU)

Co Klip CSS zrobić?

Klip jest częścią wizualnego module efektów CSS 2.1. Po prostu, jej zadaniem jest umieszczenie widocznym oknie na górze obiektu, który jest przycięty, stąd obcinania zdjęć i tworzenie miniatur bez konieczności tworzenia dodatkowych plików (mam już umieścić tę funkcję do lepszego wykorzystania w składniku Slider )

Korzystanie z własności CSS Clip można utworzyć wycinek za pomocą kształt prawidłowy. Podobnie jak wiele innych właściwości CSS (jak marży itp padding), z wykorzystaniem rect wymaga cztery współrzędne Góra, Prawo, Dół, Lewo (TRBL). Croocked charakter tego majątku odzwierciedla kiedy przyjrzeć się bliżej, jak klip oblicza region przycinania, używając tych czterech (wysyła mózg do wrzucić na chwilę). Teraz mylić cię dół rozpoczyna się od góry, a prawo zaczyna się od lewej strony. . Widzisz to, co powiedziałem? .... Stąd ten post ...

To małe zamieszanie może łatwo zniknąć, z tego wizualnego wyjaśnienia Klip / rect CSS nieruchomości jak poniżej!!

Wymagania CSS Klips

Zadaniem zaczęliśmy jest klip następujące miniatury do kwadratowy obrazu w przyszłość (i również szerokokątny obraz)

Oryginalny Thumbnal / Grafika	Wymagania Klip do Sqaure Thumbmail

Wyniki CSS Klips

Zobacz demo | DLA Pobierz sourcefiles

Czasami, aby utrzymać pageweight dół ... mamy dzielić nasze skrypty na fragmenty ... Te fragmenty javascript mogą być ładowane w razie potrzeby (na razie lub przy kliknięciu łącza lub przycisku itp.).

Javascripts Ładowanie dynamiczne jest prosta i dość prosty jak poniżej ...

= “text/javascript” > <Script type = "text / javascript">
Funkcja loadNewScript (źródło) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', źródło);
document.body.appendChild (s);
}
</ Script>

i można mieć poniższy link połączeń w dowolnym miejscu ciała, lub możesz mieć ten skrypt "onLoad" samego dokumentu ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript (" myDynamicScript.js '); "> Load Dynamiczny Skrypt </ a>

lub

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

Jeśli jesteś osobą css, to wiadomo, ból w sprawie swoich układów pracy cross-browser. IE8 to kolejny klucz w pracach dla nas programistów. Anywaz! jeśli trafisz na ten problem, jak ja wczoraj, gdzie doskonale działa CSS w IE7 (i wcześniej), a Firefox nagle zaczął rzucać napady złości w IE8, spróbuj tego ... To ładnie wydawało się rozwiązać moje problemy w tej chwili ....

Korzystanie z deklaracją Meta, możemy określić silnik renderowania chcielibyśmy IE8 w użyciu. Tak, aby wymusić IE8 aby uczynić jak IE7 ... Wstaw następujący znacznik meta do głowy dokumentu: -

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

Domyślnie Meta IE będzie: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
które mogłyby uczynić IE8 renderowanie strony przy użyciu nowego trybie standardowym.

Jeśli to konieczne, to składnia mogłaby być używana do pomieścić do innych przeglądarek, jak poniżej:

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

WIĘCEJ O Deklaracje typu dokumentu:

JEŚLI jesteś jeszcze zaznajomiony z rodzaju zwierzęcia zwanego "Doctype" ... oto kilka szybkie czytać
Jakie są Deklaracje typu dokumentu? Jakie są dziwactwa PRZEGLĄDARKI i trybie ścisłym?
Ustawianie DOCTYPE w XSL

Dla bardziej w zrozumieniu głębokość około Deklaracje typu dokumentu, spróbuj odwiedzić te linki ...
List Apart: Fix witryny z prawego DOCTYPE!
List Apart: Beyond DOCTYPE: Standardy sieciowe, do przodu zgodności, a IE8

Uwaga: Choć wielu z nas HTML / CSS osoby zostały zaniedbując znaczenie DOCTYPE decleration w naszych dokumentach, Ustawienie odpowiedniego DOCTYPE, to zazwyczaj odpowiedź na najbardziej poprzecznych problemów z przeglądarką.

Z różnych karuzel tam, wiele do Mootools jak dobrze, nadal postanowił napisać własną klasę Carousel, na kilka dobrych powodów
1. Poszukujemy funkcję stronicowania (aby móc skakać konkretnego pokazu / krok w karuzeli).
2. Zainteresowanie wolność z umieszczania na lewy i prawy przycisk / linki, gdzie nigdy mi się podoba.
3. Większa kontrola nad Schodami slajdów.

I udało się stworzyć nową karuzeli z powyższych cech ... jak poniżej ... Zapraszam do sugerują żadnych zmian należy wymagać!

Mój przykład wygląda tak ... [ Demo Zobacz ]

Zobacz demo | DLA Pobierz mootools Carousel Z stronicowania w wersji 1.0 (pobrany 1991 razy)

1. Przywoływanie karuzela

Możesz łatwo dodać stronicowania do karuzeli, po prostu ustawiając flagę stronicowania, który jest ostatni parater przeszedł podczas tworzenia instancji MooCarousel na true (chcę stronicowania) lub false (dawca chce stronicowania).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true); / / ns = liczba slajdów, sss = wielkość kroku slajdów

I oczywiście możesz zmienić wygląd-n-styl tych achors stronicowania jak należy modyfikując CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging prąd, carousel_paging strona {outline: none; szerokość:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging aktualny {background: # 4D4D9B; color: # FFFFFF;}..

Dobrze! jest mały problem choć Kotwy stronicowania jeśli ustawione, to zostanie on generowany zawsze po Carousel komponentu. Chciałem zrobić to dynamiczny, jak również, ale potem po prostu zachować scenariusz do wydmuchiwania proporcjach, postanowiłem go pominąć.
Ale wiesz, trochę Javascript, można łatwo zmodyfikować kod generacji stronicowania w MooCarousel klasy zadowolić swoich potrzeb.

2. Dostosowywanie Lewa i prawa ikony

Możesz zmienić położenie, obrazy lub jakikolwiek displat mienia z przycisków lewego i prawego po prostu zabawy z CSS. aby móc zmieniać miejsca docelowe o buttoms lewego i prawego był rzeczywisty powód, dla mnie do prawej mojej naszej Carousel klasy.
Ponieważ ten MooCarousel Class, przyjmuje id jest z tych przycisków, można rzeczywiście umieścić te przyciski dowolnym miejscu na stronie, proszę ... nie muszą być w hierarchii elementów, jak w moim przykładzie.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Dostosowywanie kroki slajdów

Co mam na myśli MOICH Dostosowywanie KROKI slajdów?
Większość Karuzele przesuń wypełniona z widocznym oknem. Więc mówisz, że miał cztery elementy (jak w mojej próbce powyżej), to przesunąć wszystkie cztery elementy. Z tego Carousel, możecie przekazać liczbę slajdów i wielkość kroku wybór.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true);
c_ns = liczba slajdów, c_sss = wielkość kroku slajdów

Także w moim example1 mam calcuted wielkość kroku slajdów, oparty na logice gdzie, wiem liczbę elementów, szerokość na każdej pozycji i marże, które złożyły po każdej pozycji w moim CSS.

/ * Dla hulanka 1 * /

var c1_w = 92 / / hulanka Szerokość produktu

var c1_n = 10 / / Całkowita liczba pozycji hulanka Porównanie

var c1_pp = 4 / / Liczba pozycji hulanka Porównanie perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = wielkość kroku slajdów

var c1_ns znaku = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = liczba slajdów

c1_sss + = c1_marginFactor / / sss slide = wielkość kroku, 51 na marginesie

Wymagania: Mootools 1.2

Zobacz demo | DLA Pobierz mootools Carousel Z stronicowania w wersji 1.0 (pobrany 1991 razy)