Išreikšdami IT

Vakar, kaip ir kiekvienas kitas "Ground Hog diena, aš dirbau keletą CSS / Tableless maketai. Viskas buvo gerai IE 7, FF 3 ir Chrome, kol staiga pamačiau kai kurių JT ignorable maržos matomos tik Google Chrome ". Nors ir labai keista ir worring Tai buvo, kad aš Natknąć keletą naujų klaidų / klausimas buvo pagaliau kai mano žemiškas darbo prieskonis. Liūdnas (bet gražus) jis gavo nustatomas zondo per kelias minutes ...

Iš esmės, tai atrodė kaip "Google Chrome" ignoravo mano CSS Atstato (margin: 0px). Ji iš tikrųjų sukėlė user-agent stilių (-WebKit-padding-pradžia: 40px). Taigi sprendimas buvo iš naujo nustatyti šio stiliaus nustatymo padding: 0 netinkamas elgesys elementai.
Geras būdas išvengti šios problemos vyksta bet koks elementas yra pasaulinio CSS Poilsio taip

* {Margin: 0; padding: 0;}

Kas yra User Agent Style Sheets (specifikacija)?
Ši ištrauka yra paimta iš http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , sekite nuorodą skaityti daugiau User Agent Style Sheets

1 CSS pristato mintį pareikšdamas, kad kiekvienas User Agent (UA, dažnai "interneto naršyklė" ar "interneto klientas"), turės numatytąjį stilių lape pateikia dokumentais pagrįstą, tačiau, be abejonės, kasdieniškas - būdu. CSS 2 sako, kad atitinkantis vartotojo agentai turi taikyti numatytąjį stilių lapo (arba elgtis taip, tarsi jie padarė) ir, kad vartotojo agentas savo numatytąjį stilių lape turėtų pateikti dokumentą kalbos elementus taip, kad atitikti bendrą pristatymą lūkesčius dokumento kalba; CSS 3 gali būti to paties proto.

Kadangi CSS specifikacijos palikti jį iki realizacijos, ar naudoti "realiame" stiliaus lapo nutylėjimą rodyti, ar ne, tai ne stebina, kad nerandate numatytasis stilius lapo kiekvienos naršyklės diegimo aplanke. Skirtingai nei Microsoft Internet Explorer, taip pat Opera, pavyzdžiui (ir kiek aš žinau,), Gecko naršyklės, pvz Firefox ir Netscape Navigator ("html.css"), bet taip pat Konqueror kad ji gana paprasta suprasti jų numatytasis stilius.

Šis tuos senosios mokyklos, tačiau, kaip įprasta, ji yra mano atminties papildyti ...
Taigi yra išjungtas = "true" ir neįgaliųjų = "false"?
... Netikiu, gerai! Thats būdu ... čia yra keletas greitų paaiškinimą ...
"Išjungta" - tai bet kokios formos elementas / lauko atributas ir todėl gali priimti bet kokius pagal savo pobūdį vertė.

Tol, kol šis atributas, elementas bus išjungtas, nepaisant jo vertės. pvz.
<input type="text" value="To disabled" disabled>
<input type="text" value="To disabled" disabled="disabled">
<input type="text" value="To disabled" disabled="true">
<input type="text" value="To disabled" disabled="false">

Visi, kas išdėstyta pirmiau, šią formą srityje "išjungta".

Tiesiog nėra atributą "disabled" išlaiko lauko "ABLED" ... kaip žemiau

<input type="text" value="To nėra disabled" />

Prisiminti "atributo neįgaliesiems bet kokio vertės (arba jokios vertės), naršyklė kad ji išjungta". Norėdami, kad viskas būtų aišku mūsų protus W3C rekomenduoja, kad mes naudojame neįgaliesiems = "išjungta" šiose situacijose .

Tai yra skirtumas nors, kai mes naudojame šį atributą JavaScript ...

document.form.element.disabled = true; / / elementas bus išjungtas
document.form.element.disabled = false / / elementas bus įjungta

Pirmiau išdėstyti argumentai taip pat pasakytina apie šių atributų ir elementai:

• patikrinti (mygtuką ir langelius)
• pasirinkti (pasirinktinai)
• nowrap (TD)

"Google" pradeda judėjimo eilutę žmonės iškelties IE6 ... bugging IE6 vartotojai puslapyje apkrovos POPUP ... gali būti ne labai gera mintis ... bet yra vartotojo sąsaja kūrėjas, aš prisijungti prie šios grupės vagonas ... mažiau naršyklės man nerimauti ... Atsiprašome savanaudis jis yra! bet aš turiu įtraukti šį "JavaScript" ... (TRY Šiame puslapyje IE6) ...
Hey! ir apie šviesesnę dėmesį ... Žr JavaScript galia kalbomis .... jis gali net sumažinti milžinas (arba kai jis buvo)

Taigi ... Pagalba atsikratyti IE6 pasaulyje su viena linija JavaScript!

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

Su kitos naršyklės, rūpintis nuo rytojaus! (IE8 išeina savo Beta narė rytoj) ... Jo tikrai didelis laiko IE6 ilgai dėl Gailestingumo Mirtis ... Jungtinė mes pasisakome už IE6 rudenį

"IE6 yra naujų Netscape 4. Hacks, reikia remti IE6 dažniau žiūrima kaip perteklius krovinių. Kaip ir 2000 m. 4 "Netscape IE6 yra suvokiama stabdo internete."

Jeff Zeldman, standartų guru

Ir tuo tarpu, kaip man, kurie bus užtvindytos kviečia trūkimo CSS išdėstymai IE8, čia yra senas darbo aplink / nustatyti naudodami meta (meta http-equiv = "X-UA-Suderinamumas"), galite pabandyti ...

Netinkamo elgesio IE8: CSS išdėstymo bijau (Taikymas naršyklės versija, meta žymeles, IE8 )

Heres kitą dalelę Javascript, gudrybė, kad man teko kasti aplink, nes situacija commaned. Vienas iš mano interneto svetainėse, turėjau šią situaciją, kai aš turėjo įgyvendinti "windows.onload" du kartus. Pirmas dalykas, kuris atėjo nepatyrę mano protas, kaip (turiu sąžiningai pasakyti, kad, nes aš buvo, naudojant javascript, Karkasai ir bibliotekose, turiu forgotton daryti paprastų dalykų apie savo ... liūdna, bet tiesa), šis metodas ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 ir tt ..

Atsiprašome pasakyti, bet tai įpratęs dirbti ... dont wanna aptarti vykdymo mokslo Javascript, daug ... bet pagal mano neseniai patirtimi, tik paskutinė funkcija (onloadfn3) serga faktiškai gauti įvykdytas.

Normaliomis aplinkybėmis, priešingai nei mano (aš kalbėti apie šiek tiek vėliau) ... galite atlikite vieną iš šių vykdyti mutliple įkėlimo funkcijas ....

Arba kažką panašaus į tai

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

Mano dabartinę padėtį, aš negali naudoti arba į tai, kas išdėstyta pirmiau ...
Kodėl aš iš viso turiu skambinti windows.onload du kartus, o kad paskambinus dvi funkcijas per vieną įkėlimo funkcija? Čia yra greitai ieškoti ne mano problema pareiškimą ...

"Mano svetainės puslapių struktūra yra kaip WordPress tema .... ty bendrą Header.php ir footer.php, kuris įtraukiamas į visus svetainės puslapius. Yra įkėlimo funkcija implementaion footer.php ką nors bendro įkėlimo funkcijos. Ir yra keletas puslapių, kad reikia ką nors iš savo onload, išskyrus tas, kurios padaryti bendrą įkėlimo funkcija. Jei aš priskirti atgalinio ryšio funkcija tiesiogiai window.onload prižiūrėtojas, jis bus per daug važinėti, anksčiau priskirtas iššūkius footer.php "

.... Ar mano problemą suprato ?

Gerai! yra keletas sprendimų, kad aš rasti. Jie visi yra labai panašios ir daugiausia implementions pateikė Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) sprendimas ...

Sprendimas:

Tiesiog pridėkite šią JavaScript kodą į svetainę ...

 funkcija addLoadEvent (funkcijų) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'funkcija') {
        window.onload = funkcija
     } Else {
        window.onload = function () {
            , jei (oldonload) {
                   oldonload ()
           }
           funkcija ()
        }
    }
 }

Ir skambinti, o ne įprasta "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Kodui veikti dėl puslapio užkrovimo *
 }); 

Privalumai šio kodo fragmentą ...
1. Visų pirma, ji leidžia, turite keletą windows.onload renginių, paragino iš atskirų dalių savo kodą, be overridding ankstesnį apibrėžimą
2. Tai tikrai nekrenta į akis. Jis gali būti dedamas į failą su jūsų kitas scenarijus arba atskirame faile.
3. Jis veikia, net jei window.onload jau buvo nustatytas.

Kitas greitas tut. Čia yra kažkas, paprastas ir malonus naudojant CSS galia ... bet buvo sunku concieve (ir jis tikrai buvo ne man) prasideda. Įrašyta Dropshadow, gali būti, daugelis iš mūsų torto gabalas, naudojant šiek tiek vaizdo redagavimo įrankiai pavyzdžiui, Photoshop ANF Fejerverkai ir tt
Priežastis, kodėl aš pasirinko lašas šešėlis naudojant CSS, kad paprastai kuriant puslapio dizainas / html paraišką, reikalavimai nuolat Iteracja. , Ką turiu galvoje, egzistuojančią svetainę su daug vaizdų, kaip ir tuos, kuriuose rodomas freinds sąrašas Nuotraukų galerija, tai bus sunku perdirbti visą apkrovos vaizdus, ​​kurie jau buvo iškrauta krovinių į pridėti ar pašalinti šešėlius, kad klausimas.
Taigi, jei jūs turite padaryti šiek tiek pirmyn mąstymas kuriant HTMLS pridėti šiuos papildomus kvadratus arba paprastai situacija, kad turite kilpa Logic generavimo Šios piktogramos / XSL, PHP miniatiūras. Java arba bet kuri kita programavimo / skriptų kalba, galite pridėti jį bet kuriuo metu, tada tik rodo medžiagų ir slepiasi šešėliai naudojant CSS Rodyti turto, kaip už klientų nuolat kinta reikalavimai ... Aš havn't padaryti tokia perspektyvi prieš tai ... bet pradėjo dabar!

Toliau pateiktame pavyzdyje, originalaus atvaizdo šešėlis nemokamai, ir dropshadows yra taikomos taip, kaip reikalaujama! Be to, aš nuėjo šiek tiek daugiau apie naudojant CSS Clip Nekilnojamas turtas skirtas parodyti tik naudojant mano anksčiau Tut gudrybės (Well! tikriausiai yra trumpiausias įvairių Pamokos, todėl jis yra pateisinamas tik vadindamas juos "tut"-ai)

Pradinis vaizdas

CSS DropShadow rezultatai

Peržiūrėti Demo | Parsisiųsti sourcefiles

Kodėl aš noriu suprasti?? ... Humm!!

Dauguma CSS rašytojų sutiktų, kad CSS Clip turtas yra turbūt vienas labiausiai JT naudojamas CSS savybės. Tai buvo taip tiesa man per daug ir buvo labai laimingas, nepriežiūros, kol aš pradėjau keisti MooTools du rankenėlę (PIN) Slider komponentas (su klasės indikatorių ) .

Ten buvo geras pasiūlymas iš vieno komponento vartotojams keisti nukirpti backgroud vaizdų (su kintamo pločio skyriaus) nurodyti slankiklį diapazonas Slider komponento. Taigi atėjo mano laikas įvesti įdomus, bet JT-Chartered (man Žinoma) vandenyse CSS Clip nuosavybės.

Gerai! kaip sunku gali būti? Ne daug ne ... Taip ir ne. Sintaksė naudoti CSS Clip savybės yra gana stačiai, bet prasmė / usuage bitų croocked. Su atmintyje kaip mano, kiekvieną kartą aš sėdi pertvarkyti mano Slider scenarijų ... Turiu tokeep šio Clip turto naudojimo, priminti sau, logika, kad aš mano scenarijų sukūrė .... Taigi! Manoma, kad parkeris jį žemyn, viltis prisiminti ateityje (taip pat naudinga tiems, kurie atrodo boggled CSS Clip nuosavybės)

Ką CSS Clip daryti?

Klipas yra vizualiniai efektai modulis CSS 2.1. Paprasčiau tariant, jo darbas yra matomas lango viršuje objektą, kuris yra nukirpti, taigi karpymas vaizdus ir kurti miniatiūras be kurti papildomus failus (Aš jau geriau panaudoti šią funkciją Slider komponento )

Naudojant CSS Clip nuosavybės, galite sukurti karpymas naudojant rect formos. Kaip ir daugelis kitų CSS savybės (pvz., marža, išklojimui, ir tt), naudojant rect reikia keturių koordinačių viršų, Teisė, Apačia, Kairė (TRBL). Croocked šio turto pobūdį atspindi kai atidžiau pažvelgti, kaip klipas apskaičiuoja karpymas regione, naudojant šias keturias koordinates (siunčia į Toss, o smegenyse). Dabar jums supainioti apačioje prasideda nuo viršaus ir dešinėje prasideda iš kairės. . Tu matai, ką aš sakiau? .... Todėl šis pranešimas ...

Šis šiek tiek painiavos gali lengvai išnykti, šį vaizdinį paaiškinimą CSS CLIP / rect nuosavybė, kaip nurodyta toliau!!!

CSS Clip Reikalavimai

Užduotis, mes pradėjome Kvadratas ieškote vaizdo klipas Thumbnail image (o taip pat plataus kampo vaizdas)

Originalus Thumbnal / Nuotraukos	Klipas Reikalavimai Sqaure Thumbmail

CSS Clip rezultatai

Peržiūrėti Demo | Parsisiųsti sourcefiles

Kartais pageweight žemyn ... mes padalinti mūsų scenarijų į fragmentus ... Šie "JavaScript" fragmentai gali būti įkeltas kaip ir kada reikia (įvykis arba spustelėkite nuorodą arba mygtuką ir tt).

Pakrovimo JAVASCRIPTS dinamiškai yra paprasta ir gana važiuoti tiesiai į priekį, kaip nurodyta toliau ...

= “text/javascript” > <Scenarijų type = "text / javascript">
funkcija loadNewScript (šaltinis) {
var s = document.createElement ("script");
s.setAttribute ("tipas", "text / javascript ');
s.setAttribute ("src", šaltinis);
document.body.appendChild (-ai);
}
</ Script>

ir šių skambučių nuorodą galite bet kurioje kūno vietoje, arba galite turėti šį scenarijų "įkėlimo" pačiame dokumente ...

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

arba

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

Jei CSS asmuo, turėtumėte žinoti, gauti jūsų maketus darbo kryžminio naršyklės skausmas. IE8 yra dar vienas veržliarakčių mus kūrėjų darbai. Anywaz! jei paspausite ant šio klausimo, Kaip aš padariau vakar, kur yra jūsų puikiai dirba CSS IE7 (ir anksčiau) ir "Firefox" staiga pradėjo mėtyti tantrums, IE8, pabandykite ... Jis gražiai atrodė išspręsti mano problemos šiuo metu ....

Naudojant meta deklaraciją, galime nurodyti, atvaizdavimo variklį, mes norėtume IE8 į. Taigi, norint priversti IE8 padaryti kaip IE7 ... Įdėkite toliau meta žymeles į savo dokumentą galvą: -

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

Pagal numatytuosius parametrus, IE meta būtų: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
IE8 tampa puslapį naudojant naujus standartus režimas.

Jei reikia, ši sintaksė gali būti naudojamos prisitaikyti prie kitų naršyklių, kaip nurodyta toliau:

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

DAUGIAU Apie DOCTYPES:

Jei dar nėra susipažinę su gyvūnų Rūšiuoti vadinamas "DOCTYPE" ... čia yra keletas greitai skaityti
Kas yra DOCTYPES? Kas yra naršyklės Photoshop & GRIEŽTA režimas?
DOCTYPE, XSL

Daugiau už išsamų supratimą apie DOCTYPES, pabandykite aplankyti šias nuorodas ...
A List Apart svetainėje: Teisė DOCTYPE nustatyti savo svetainę!
A List Apart svetainėje: Beyond DOCTYPE: Web Standards, nusiųsti Suderinamumo ir IE8

Pastaba: Nors daugelis mūsų HTML / CSS žmonės buvo nepaisoma DOCTYPE decleration mūsų dokumentų svarbą, nustatant teisę DOCTYPE, paprastai atsakyti į labiausiai kryžminio naršyklės klausimais.

MooTools taip pat su įvairių karuselių ten daug, aš vis tiek nusprendė parašyti savo Karuselė klasės, gerų priežasčių
1. Norėjo ieškos funkcija (gali peršokti ypač skaidrės / karuselės žingsnis).
2. Norėjo laisvės apgyvendinimas kairę ir į dešinę mygtukai / nuorodos, kur aš kada nors prašome.
3. Pristatymas žingsniai labiau kontroliuoti.

Aš pavyko sukurti naują Karuselė su pirmiau minėtus požymius ..., kaip nurodyta toliau ... Jauskitės laisvai siūlyti bet kokius pakeitimus, jums reikės!!

Mano pavyzdys atrodo šitaip ... [ Žiūrėti demonstracija ]

Peržiūrėti Demo | Parsisiųsti MooTools Karuselė Su Puslapiuoti Versija 1.0 (Siuntėsi 1888 kartus)

1. Karuselė Puslapiuoti

Jūs galite lengvai pridėti ieškos savo karuselė, tiesiog ieškai vėliava, kuri yra paskutinė parater praėjo kuriant MooCarousel pavyzdžiui true (nori ieškai) arba FALSE (donot nori ieškai).

var carousel1 = nauji MooCarousel (carousel1_wrapper "," carousel1_items_container '"carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa) / / ns = skaidrių, SSS = skaidrių žingsnio dydis

Žinoma jūs galite pakeisti išvaizdą N pajusti šių ieškos achors kaip galėtumėte juos CSS.

Carousel_paging {text-align: teisė; skirtumas: 5px 10px 0 0;}
........ Carousel_paging srovė, carousel_paging {kontūro: nėra; plotis: 15px; aukštis: 15px; line-height: 15px; text-align: centras; kalbomis: block; flotacinio: kairėje, fonas: # D8D8EB; pelnas: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging dabartinės {background: # 4D4D9B; spalva: # FFFFFF;}.

Gerai! yra maža problema, nors, jei nustatyta ieškai inkarai, tada jis bus generuojami visada po "karuselinio" komponentas. Norėjau, kad tai dinamiškas taip pat, bet tada tiesiog išlaikyti Script užpučia proporcijų, aš nusprendė praleisti.
, Bet jūs žinote, mažai Javascript, galite lengvai keisti ieškos kartos kodas MooCarousel klasės prašome jūsų poreikius.

2. Pritaikyti kairės ir dešinės piktogramų

Galite pakeisti vietą, nuotraukas ar bet displat nuosavybės kairę ir į dešinę mygtukus tiesiog žaisti aplink su CSS. galės pakeisti į kairę ir į dešinę buttoms vietas buvo faktinė priežastis mane dešinėje mano mūsų "karuselinio" klasės.
Kadangi šis MooCarousel klasės, priima ID iš šių mygtukų, galite realiai šiuos mygtukus bet kurioje puslapio vietoje, jei galite ... ji neturi būti elementų hierarchijoje, kaip mano pavyzdyje.

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

CSS
Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; pozicija: giminaitį; plotis: 23px; aukštis: 20px; Float: kairėje; cursor: pointer;}

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

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

3. Pritaikyti Pristatymas veiksmus,

KĄ reiškia MANO ŽINGSNIAI tinkinimas SLIDE?
Dauguma karuselės skaidrių visiškai matomas lange. Taigi sakau jums turėjo keturis elementus (kaip mano anksčiau pateiktame pavyzdyje), skaidrių visų keturių punktų. Su šiuo "karuselinio" komponentas, išlaikyti savo pasirinkimą skaidrių numerį ir žingsnio dydis.

var carousel1 = nauji MooCarousel (carousel1_wrapper "," carousel1_items_container '"carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa);
c_ns = skaidrių c_sss = skaidrių žingsnio dydis

Be to, mano example1 turi calcuted skaidrių žingsnio dydis, pagrįstas logika, jei aš žinau, elementų skaičius, kiekvieno elemento plotį ir paraštes, kad po kiekvieno mano CSS elemento.

/ * Dėl Bachanalia 1 * /

var c1_w = 92 / / Bachanalia punktas Plotis

c1_n var = 10 / / Viso palyginimas Bachanalia Elementai

Var c1_pp = 4 / / Numeris palyginimas Bachanalia daiktai perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = skaidrių žingsnio dydis

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = skaidres

c1_sss + = c1_marginFactor; / / sss = skaidrių žingsnio dydis, 51 maržos

Reikalavimai: MooTools 1,2

Peržiūrėti Demo | Parsisiųsti MooTools Karuselė Su Puslapiuoti Versija 1.0 (Siuntėsi 1888 kartus)