Uttrykke IT

I går, som alle andre "Groundhog Day", ble jeg jobber med noen CSS / tableless layouter. Alt gikk bra i 7 IE, FF 3 og Chrome, inntill Plutselig så jeg noen un-ignorable marginer sett bare i Google Chrome. Selv om veldig merkelig og worring, var det noen nye bug / problem som jeg hadde risikere å møte, var det endelig litt krydder i mitt verdslig arbeid. Trist (men fin) det ble fikset i løpet av noen få minutter av sonden ...

I utgangspunktet så det ut som Google Chrome ignorert min CSS Tilbakestiller (margin: 0px). Det faktisk ble forårsaket av user agent stilarket (-WebKit-padding-start: 40px). Så løsningen var å nullstille denne stilen ved å sette padding: 0 de misbehaving elementene.
En god måte å unngå dette problemet skjer til enhver element er å bruke en global CSS Rest som følger

* {Margin: 0; padding: 0;}

Hva er User Agent Style Sheets (spesifikasjon)?
Følgende utdrag er hentet fra http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , følg linken for å lese mer om User Agent Style Sheets

CSS 1 introduserer ideen ved å si at hver User Agent (UA, ofte en "nettleser" eller "web klient ') vil ha en standard stilark som presenterer dokumenter i en rimelig - men uten tvil verdslig - måte. CSS 2 sier at i samsvar nettlesarar må bruke en standard stilark (eller oppføre seg som om de gjorde) og at en bruker agent standard stilark bør presentere elementene i dokumentet språket på en måte som tilfredsstiller generelle presentasjon forventninger til dokumentet språk; CSS 3 er trolig det samme sinn.

Siden CSS spesifikasjonene la det opp til implementeringer om å bruke en "ekte" style sheet til standard visning eller ikke, er det ikke forbausende at du ikke finner en standard stilark i hvert nettleserens installasjonsmappen. I motsetning til Microsofts Internet Explorer, samt Opera, for eksempel (og så vidt jeg vet), Gecko nettlesere som Firefox og Netscape Navigator (se etter "html.css"), men også Konqueror gjør det ganske enkelt å forstå deres standard styling.

Denne de gamle skolen, men som vanlig er det min hukommelse supplement ...
Så er deaktivert = "true" og funksjonshemmede = "false" samme? Ja
... Ikke tro, vel! dvs slik det er ... her er litt rask forklaring ...
"Funksjonshemmet" er en egenskap av enhver form element / felt, og dermed kan akseptere enhver verdi av natur.

Så lenge dette attributtet er til stede, vil elementet bli deaktivert uavhengig av sin verdi. for eksempel.
<input type="text" value="This er disabled" disabled>
<input type="text" value="This er disabled" disabled="disabled">
<input type="text" value="This er disabled" disabled="true">
<input type="text" value="This er disabled" disabled="false">

Alle de ovennevnte vil gjøre dette skjemafeltet "funksjonshemmede".

Bare ikke gi attributtet "funksjonshemmede" holder feltet "sjonshemmet" ... som under

<input type="text" value="This er ikke disabled" />

Husk "Enhver verdi (eller ingen verdi i det hele tatt) av funksjonshemmede attributtet, vil nettleseren gjøre det deaktivert". For å holde ting klart i våre sinn W3C anbefaler at vi bruker deaktivert = "funksjonshemmet" i disse situasjonene.

Dette er forskjellen om når vi bruker denne egenskapen i javascript ...

document.form.element.disabled = true; / / elementet vil bli deaktivert
document.form.element.disabled = false; / / elementet vil bli aktivert

Ovennevnte argumenter er også sant for disse attributtene og elementer:

• kontrolleres (radioknappen og avmerkingsboks)
• valgt (opsjon)
• nowrap (td)

Google starter en bevegelse ber folk å dumpe IE6 ... Av plage IE6-brukere med en popup på side belastning ... kanskje ikke en veldig god ide ... men å være en UI utvikler, må jeg bli med dette bandet vogn ... en mindre nettleser for meg bekymre ... Beklager egoistisk det er! men jeg har også denne javascript ... (TRY DENNE SIDEN i IE6) ...
Hei! og på lysere notatet ... Se det er en visning av POWER av JavaScript .... det kan også ta ned en gigantisk (eller når det var)

SO ... Hjelp fri verden fra IE6 med en linje av javascript!

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

Med en annen nettleser for å ta vare fra morgen! (IE8 kommer ut av sin Beta State i morgen) ... Dens virkelig på høy tid IE6 er gitt sin lange grunn Mercy Død ... forente vi står for fall IE6

"IE6 er den nye Netscape 4. Journalistene som trengs for å støtte IE6 blir stadig sett på som overflødig frakt. Som Netscape 4 i 2000, er IE6 oppfattes til å holde tilbake på nettet. "

Jeff Zeldman, standarder guru

Og i mellomtiden for dem som meg som vil bli oversvømt med samtaler om å bryte CSS-layouter i IE8, er her den gamle arbeid rundt / fikse ved hjelp av metakoder (meta http-ekv = "X-UA-kompatible") du kan forsøke ...

Mis-oppfører IE8: CSS Layout brekkasje (Targeting en nettleserversjon ved hjelp av metakoder i IE8)

Her er et annet lite peice av Javascript lureri at jeg måtte grave rundt fordi situasjonen commaned det. I en av mine nettsider, hadde jeg denne situasjonen hvor jeg måtte implementere "windows.onload" to ganger. Det første som ville kom til en uerfaren sjel som min (jeg må ærlig si at siden jeg har brukt javascript Rammeverk og biblioteker, forgotton jeg har å gjøre enkle ting på min egen ... trist men sant), er følgende metode ...

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

Beklager å si, men wont dette fungere ... ikke ønsker å drøfte gjennomføringen vitenskapen Javascript mye ... men ifølge min siste erfaring, bare den siste funksjonen (onloadfn3) vil syk faktisk bli henrettet.

I normale situasjoner, i motsetning til min (som jeg skal snakke om litt senere) ... du kan gjøre ett av følgende for å utføre utover flere onload funksjoner ....

Eller noe som dette

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

For min nåværende situasjon, kan jeg ikke bruke noen av de ovennevnte ...
Hvorfor gjorde jeg må ringe windows.onload to ganger, snarere at du ringer to funksjoner i ett enkelt onload funksjon? Her er rask titt på mitt problem uttalelse ...

"Mitt område sider er strukturert som WordPress tema .... dvs. det er en vanlig header.php og Footer.php som blir inkludert i alle webområdesidene. Det er en onload funksjon implementaion i Footer.php å gjøre noen vanlige onload funksjoner. Og det er få sider som må noe av sin egen OnLoad, bortsett fra de som gjøres av felles onload-funksjonen. Hvis jeg tildele tilbakering funksjon direkte til window.onload behandlingsprogram, vil den overstyre tidligere tildelte tilbakeanrop i Footer.php "

.... Er mitt problem forstått ?

Vel! det er få løsninger som jeg fant. De er svært like og i hovedsak implementions av en løsning gitt ved Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Løsning:

Bare legg denne javascript-koden på siden ...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } funksjon addLoadEvent (funk) {var oldonload = window.onload, hvis (typeof window.onload = 'funksjon'!) {window.onload = funk} else {window.onload = funksjon () {if (oldonload) {oldonload () } funk ()}}} 

Og kaller det i stedet for den vanlige "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (funksjon () {
 / * Mer kode kjøres på side belastning *
 }); 

Fordelene ved denne kodebit ...
1. Primært, lar det du har flere windows.onload hendelser, heter fra separate deler av koden din, uten overridding den tidligere definisjonen
2. Det er virkelig påtrengende. Det kan plasseres i en fil med dine andre skript eller i en separat fil.
3. Det fungerer selv om window.onload allerede er satt.

En annen rask Tut. Her er noe enkelt og fint ved hjelp av kraften CSS ... men var vanskelig concieve (og det sikkert ikke var meg) til å begynne med. Legge Dropshadow, kan være en peice kake for mange av oss, ved hjelp av noen bilderedigeringsprogram verktøy som Photoshop ANF Fyrverkeri etc.
Grunnen, valgte jeg for slagskygge ved bruk av CSS er at vanligvis mens du oppretter en side design / html av en søknad, krav holde gjentar. Hva jeg mener er, i en eksisterende nettside med mange bilder, som de viser freinds liste eller en bildegalleri, vil det være vanskelig å reprosessere hele belastningen av bilder som hadde blitt alt losset å legge til eller fjerne skyggene, for at saken.
Så hvis du har gjort litt fremover tenkning, mens skape HTMLS å legge disse ekstra divisjoner eller vanligvis situasjonen er at du har en Loop Logic genererer disse ikonene / miniatyrer i XSL, PHP. JAVA eller andre programmeringsspråk / skriptspråk, kan du legge det når som helst, da er bare spørsmål om showet og skjule disse skygger ved hjelp av CSS display eiendommen, i henhold til de klientene stadig skiftende krav ... jeg havn't gjort slike fremtidsrettede før dette ... men ahev gang nå!

I eksempelet nedenfor er det opprinnelige bildet skygge gratis og dropshadows brukes som kreves! Også har jeg gått litt ekstra, ved hjelp av triksene av mine tidligere Tut (Well! disse antagelig er kortest rekke veiledninger, så det er bare rettferdiggjøres å kalle dem "Tut" 's) om hjelp CSS Clip Eiendom for briljere bare

Original bilde

CSS DropShadow Resultater

Se demo | Last ned sourcefiles

Hvorfor ønsker jeg å forstå dette?? Humm ...!!

De fleste av CSS forfattere vil være enige om at CSS Clip eiendom er trolig en av de un-brukte CSS egenskaper. Det var så sant for meg også, og var mest glad for å overse det, før jeg begynte å endre MooTools TO Knob (Pin) Slider Komponent (med Range Indicator) .

Det var et godt forslag fra en av komponenten brukerne til å endre Slider Component hjelp klippede backgroud bilder (mot en variabel bredde divisjon) for å indikere glideren serien. Dermed kom min tid til å gå inn i moroa, men FN-chartret (for meg selvsagt) farvann av CSS Clip eiendommen.

Vel! hvor vanskelig det kan være? Ikke mye i det hele tatt ... ja og nei. Syntaksen for å bruke CSS Clip eiendommen er ganske oppreist, men meningen / usuage er litt croocked. Med et minne som min, hver gang jeg sitter å omarbeide på min Slider Script ... har jeg tokeep henvise tilbake til bruken av dette klippet eiendom, for å minne meg selv den logikken som jeg har skapt i manuset mitt .... Derfor! tenkte å pennen ned, med et håp om å huske det i fremtiden (og også til fordel for dem som synes boggled av CSS Clip Eiendom)

Hva gjør CSS Clip?

Clip er en del av den visuelle effekter modulen av CSS 2.1. Enkelt sagt, er dens jobb å plassere et synlig vindu på toppen av et objekt som blir klippet, derav klipping bilder og lage miniatyrbilder uten å måtte opprette flere filer (jeg har allerede lagt denne funksjonen til bedre bruk i Slider Component )

Bruke CSS Clip eiendommen, kan du opprette en klipping med rect form. Som mange andre CSS-egenskaper (som margin, padding etc), ved hjelp rect krever fire koordinater Topp, Høyre, Bunn, Venstre (FEIL). Den croocked natur denne eiendommen reflekterer når du tar en nærmere titt på hvordan klippet beregner klipping regionen, ved hjelp av disse fire koordinater (sender hjernen til en kaste for en stund). Nå å forvirre deg bunnen starter fra toppen, og retten starter fra venstre. . Du ser hva jeg sa? .... Derfor dette innlegget ...

Denne lille forvirring kan lett forsvinne, med denne visuelle forklaring av CSS Clip / rect eiendom som under!!

CSS Clip Krav

Oppgaven vi har begynt å klippe følgende miniatyrbilde til et rettvinklet ser bilde (og også en vidvinkel bilde)

Original Thumbnal / Bilde	Clip Krav til sqaure Thumbmail

CSS Clip Resultater

Se demo | Last ned sourcefiles

Noen ganger for å holde pageweight ned ... vi har delt våre scripts i fragmenter ... Disse javascript fragmenter kan lastes ved behov (på en hendelse eller klikk på en lenke eller knapp osv.).

Laster Javascripts er dynamisk enkel og ganske rett frem som under ...

= “text/javascript” > <Script type = "text / javascript">
funksjon loadNewScript (kilde) {
Var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', kilde);
document.body.appendChild (s);
}
</ Script>

og du kan ha følgende samtale koblingen hvor som helst i kroppen, eller du kan få dette skriptet "onLoad" av selve dokumentet ...

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

eller

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

Hvis du er css person, ville du kjenner smerte i å få layoutene arbeider cross-browser. IE8 er enda en skiftenøkkel i verk for oss utviklere. Anywaz! hvis du treffer på dette problemet, som jeg gjorde i går, der perfekt å jobbe CSS i IE7 (og tidligere) og Firefox har plutselig begynt å kaste tantrums i IE8, prøv dette ... det pent syntes å fikse problemene mine for øyeblikket ....

Bruk Meta-erklæringen, kan vi spesifisere rendering motoren vi ønsker IE8 å bruke. Så for å tvinge IE8 til å gjengi som IE7 ... Sett inn følgende Metakode i hodet av dokumentet: -

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

Som standard IE Meta vil være: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
som ville gjøre IE8 gjengi siden ved hjelp av nye standarder modus.

Om nødvendig, kan denne syntaksen brukes til å kompensere for andre nettlesere som følger:

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

MER Om Doctyper:

HVIS du er ennå ukjent med den slags dyr kalt "Doctype" ... her er noen raske lese
Hva er Doctyper? Hva omfatter surfing quirks og STRENGT modus?
Stille DOCTYPE i XSL

For en mer inngående forståelse om Doctyper, prøve å besøke disse linkene ...
A List Apart: Fix Your Site Med riktig DOCTYPE!
A List Apart: Beyond DOCTYPE: webstandarder, Forward kompatibilitet, og IE8

Merk: Selv om mange av oss HTML / CSS folk har vært å neglisjere betydningen av DOCTYPE decleration i våre dokumenter, Stille rett DOCTYPE, er vanligvis svaret til de fleste kryss problemer med nettleseren.

Med en rekke Karuseller der ute, mange for MooTools også, jeg fortsatt besluttet å skrive min egen Carousel klasse, for noen gode grunner
1. Ønsket en personsøker funksjon (for å kunne hoppe et bestemt lysbilde / trinn i karusellen).
2. Ønsket frihet med plassering av Venstre og Høyre / linker, der jeg noen gang vil.
3. Mer kontroll over Slide trinn.

Jeg klarte å lage en ny Carousel, med de ovennevnte funksjoner ... som under ... gjerne foreslå noen endringer du måtte trenge!

Mitt eksempel ser slik ut ... [ Se demo ]

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1990 ganger)

1. Carousel Personsøker

Du kan enkelt legge til personsøker til karusellen din, ganske enkelt ved å sette paging flagg, som er siste parater passerte mens du oppretter forekomsten av MooCarousel til sann (ønske paging) eller falsk (donot ønsker paging).

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antall lysbilder, sss = lysbilde steg størrelse

Og selvsagt kan du endre utseende-n-følelse av disse personsøk achors som du vil ved å endre deres CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging gjeldende, carousel_paging side {skisse: none; bredde:... 15px; høyde: 15px; linje-høyde: 15px; text-align: center; display: block; float: left; bakgrunn: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging nåværende {background: # 4D4D9B; color: # FFFFFF;}..

Vel! det er en liten sak om, sidevekslingen ankere hvis sett, så vil det bli generert alltid etter Carousel komponenten. Jeg ønsket å gjøre det dynamisk også, men da bare for å holde Script for å blåse ut av proporsjoner, bestemte jeg meg for å hoppe over det.
Men du vet litt Javascript, kan du lett endre sidevekslingsfilen generasjon koden i MooCarousel klassen å behage dine behov.

2. Tilpasse Venstre & Høyre Ikoner

Du kan endre plasseringen, bilder eller noen displat eiendom på venstre og høyre knapp bare ved å spille rundt med CSS. å kunne endre plasseringer av Venstre og Høyre buttoms var selve grunnen for meg til høyre for meg vår Carousel Class.
Siden dette MooCarousel klasse, aksepterer id er av disse knappene, kan du faktisk plassere disse knappene hvor som helst på siden, hvis du ber ... det trenger ikke å være i element hierarkiet, som i mitt eksempel.

Var carousel1 = ny 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; stilling: relative; bredde: 23px; høyde: 20px; float: left; markøren: pekeren;}

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

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

3. Tilpasse Slide Steps

Hva mener jeg Brukerdefinere SLIDE trinn?
De fleste Karuseller skyv fulle med av det synlige vinduet. Så sier du hadde fire elementer (som i mitt eksempelet ovenfor), vil den skyve alle de fire elementene. Med denne Carousel Component, passerer du antall lysbilder og steg størrelsen du ønsker.

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antall lysbilder, c_sss = lysbilde steg størrelse

Også i mittnavn1 min har jeg calcuted raset trinnet størrelse, basert på logikk der, vet jeg antall elementer, bredde på hvert element, og marginene som har gitt etter hvert element i CSS min.

/ * For Carousal 1 * /

Var c1_w = 92; / / Carousal element Bredde

Var c1_n = 10; / / Antall sammenligning Carousal Elementer

Var c1_pp = 4 / / Antall sammenligning Carousal Elementer perpage

Var c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp; / / sss = lysbilde steg størrelse

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / NS = antall lysbilder

c1_sss + = c1_marginFactor; / / sss = lysbilde skritt størrelse, 51 for marginer

Krav: MooTools 1.2

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1990 ganger)