Ki ga izraža

Včeraj, tako kot vsak drug "Ground Hog Day", sem delal na nekaterih postavitvah CSS / tableless. Vse je bilo dobro gredo v IE 7, FF 3 in Chrome, do leta naenkrat, sem videl nekaj un-ignorable marže viden le v brskalniku Google Chrome. Čeprav je zelo nenavadno in worring, je bilo nekaj novega napako / problem, da sem prišel naletela, je bilo končno nekaj začimb v moji mukotrpnega dela. Sad (vendar lepo), dobil je določena v nekaj minutah po sondi ...

V bistvu, je videti, kot Google Chrome ne upošteva moje Resetira CSS (margin: 0px). To je bila dejansko posledica slogovne uporabniškega agenta (-WebKit-padding-start: 40px). Tako rešitev je, da ponastavite ta slog z določanjem padding: 0 povzročal težave elemente.
Dober način za preprečevanje tega problema ne bi zgodilo, da je vsak element uporabljati globalno dlani CSS takole

* {Margin: 0; padding: 0;}

Kaj je User Agent Style Sheets (specifikacija)?
Naslednji odlomek je vzet iz http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj , sledite povezavo in preberite več o uporabniških Style Sheets Agent

CSS 1 uvaja idejo, z navedbo, da bo vsak Uporabniški vmesnik (UA, pogosto "Spletni brskalnik" ali "spletni stranka"), imajo list privzeti slog, ki predstavlja dokumente v razumno - pa verjetno vsakdanjega - način. CSS 2 pravi, da ustrezajo agentom za uporabo mora uporabiti list privzeti slog (ali se obnašajo kot da so to storili) in da bi uporabniškega agenta privzeti slog stanja predstaviti elemente iz dokumenta o jeziku na način, ki izpolnjujejo splošne pričakovanja za predstavitev dokumentov jeziku; CSS 3 je verjetno, da bo istega uma.

Ker CSS specifikacije pustite do izvedbe, ali želite uporabljati "prave" slog stanja za prikaz privzeto ali ne, to ni presenetljivo, da ne boste našli list privzeti slog v namestitev vsakega brskalnika mapo. Za razliko od Internet Explorerja, Microsoft, kot tudi opere, na primer (in kolikor vem), Gecko brskalniki, kot so Firefox in Netscape Navigator (poglej za "html.css"), ampak tudi Konqueror bi bilo bolj enostavno, da bi razumeli njihov privzeti stil.

To tisti, stara šola, ampak kot ponavadi je moj spomin dodatek ...
Tako je onemogočena = "true" in onemogočil = "false" isto? Da
... Ne verjamem, no! thats načinu, kako je ... tukaj je nekaj hitro pojasnilo ...
"Onemogočeno" je lastnost vseh oblik elementa / poljska in zato lahko sprejme nobene vrednosti po svoji naravi.

Dokler je ta atribut prisoten, bo element, ne glede onemogočil njegove vrednosti. za npr.
<input type="text" value="This je disabled" disabled>
<input type="text" value="This je disabled" disabled="disabled">
<input type="text" value="This je disabled" disabled="true">
<input type="text" value="This je disabled" disabled="false">

Vse navedeno bo polje ta oblika "Onemogočeno".

Preprosto ne zagotavlja atribut "Onemogočeno" ohranja Field "ABLED" ... kot je spodaj

<input type="text" value="This ni disabled" />

Ne pozabite, "nobene vrednosti (vrednost ali ne sploh) za invalide atributa, bo brskalnik postal je onemogočeno". Če želite, da se stvari jasne misli v našem W3C priporoča, da jih uporabljamo invalidi = "invalidi" v teh situacijah.

To je razlika, čeprav, ko smo uporabijo ta atribut javascript ...

document.form.element.disabled = true; / bodo / element invalide
document.form.element.disabled = false; / bodo / element omogočen

Zgoraj navedeni argumenti so tudi za te lastnosti in elementov:

• preveriti (radio gumb in polje)
• izbrana (opcija)
• nowrap (td)

Google se začne gibanju takojšnje ljudi, da smetišče IE6 ... Z bugging IE6 uporabnike POPUP od obremenitve strani ... naj ne bo lahko zelo dobra ideja ... ampak da razvijalec UI, moram pridružiti tej pasu vagon ... eno manj brskalnik zame skrbeti Žal mi je ... sebično je! vendar sem se vključi ta javascript ... (poskusite to stran v IE6) ...
Hej! in na svetlejšo noto ... Glej, da je prikaz moči JavaScript .... da lahko celo znižajo velikana (ali ko je bilo)

Torej ... Pomoč osvoboditi svet IE6 z eno vrstico javascript!

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

Z drugim brskalnikom skrbeti od jutri! (IE8 prihaja iz njegove Beta jutri državne) ... Njegova res skrajni čas, IE6 je dala Long Due Mercy Death ... Velika stojimo za padec IE6

"IE6 je nova Netscape 4. V hacks, potrebni za podporo IE6 se vse bolj obravnavajo kot odvečnega tovora. Kot Netscape 4 v letu 2000, je IE6 zazna, da se zadržujejo po spletu. "

Jeff Zeldman, standardi guru

Do takrat pa za tiste, kot sem jaz, ki bodo poplavljena s klici na zlom CSS postavitev v IE8, tukaj je stara okoli delo / popraviti z Meta Tags (meta http-ekv = "X-UA-Compatible") Lahko poskusite ...

Mis-IE8 vedel: CSS postavitev lome (usmerjenost na spletno različico z Meta Tags v IE8)

Tukaj še malo peice of zvijače Javascript, da sem moral kopati okoli, ker razmere to commaned. V eni od mojih spletnih strani, sem imel ta položaj, kjer sem moral izvajati "windows.onload" dvakrat. Prva stvar, ki bi prišel do neizkušenega mislih, kot je moja (moram iskreno reči, da zato, ker sem bil z uporabo javascript okvire in knjižnice, sem forgotton narediti preproste stvari na moje ... žalostno, ampak resnično), je naslednja metoda ...

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

Žal mi je povedati, vendar to navada delo ... dont želite, da bi razpravljali izvršitve znanost Javascript veliko ... ampak glede na moje zadnje izkušnje, le zadnja funkcija (onloadfn3) slabo dejansko dobili usmrčen.

V normalnih razmerah, za razliko od moje (kar bom govoril o malo kasneje) ..., da bi lahko naredite nekaj od tega za izvajanje funkcij mutliple onload ....

Ali kaj takega

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

Za moje trenutno stanje, ne morem niti uporaba zgoraj ...
Zakaj moram poklicati windows.onload dvakrat, ne pa da kliče dve funkciji v eni sami funkciji onload? Tukaj je hiter pogled na moj problem izjavo ...

»Moja mesta strani strukturirana podobno temo WordPress .... torej obstaja skupna Header.php in Footer.php, da postane vključeni v vse strani strani. Obstaja onload funkcijo, izvajajo v Footer.php narediti nekaj skupnih funkcij onload. In obstaja nekaj strani, ki jih je nekaj lastnega ONLOAD, razen tistih, ki ga je opravila skupno funkcijo onload. Če sem dodelite funkcijo povratni klic neposredno na window.onload trener, bo preveč vozi že dodeljene callbacks v Footer.php "

.... Je moj problem razumeti ?

No! obstaja nekaj rešitev, da sem našel. Vsi so si zelo podobne in predvsem implementions z rešitvijo, ki jo je Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Rešitev:

Preprosto dodajte to kodo javascript na spletni strani ...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } Funkcija addLoadEvent (funkcije) {var = oldonload window.onload; if (vrste uporabljene window.onload = "Funkcija"!) {window.onload = funkcije} else {window.onload = funkcija () {if (oldonload) {oldonload () } funkcije ()}}} 

In rečejo namesto običajnega "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (funkcija () {
 / * Več kode na strani obremenitve *
 }); 

Prednosti tega Emacsa ...
1. V prvi vrsti, je vam omogoča, da imate več dogodkov windows.onload, ki se imenuje iz ločenih delov kodo, ne da bi overridding prejšnji definiciji
2. To je res nevsiljiv. Lahko se namesti v datoteko z drugimi skripte ali v posebni datoteki.
3. Deluje tudi če je window.onload že določena.

Še en hiter tut. Tukaj je nekaj, kar preprosto in lepo, z uporabo moči CSS ... vendar je bilo težko concieve (in to prav gotovo nisem bil jaz), za začetek. Dodajanje Dropshadow lahko bilo peice pogače za mnoge od nas, z nekaj orodja, kot so urejanje slik Photoshop ANF ognjemet itd
Razlog, zakaj sem se odločil za senco padec z uporabo CSS je, da je običajno med ustvarjanjem strani oblikovanje / html vloge, zahteve vodijo iterating. Mislim, je v obstoječe spletne strani z veliko slikami, kot so tisti, ki prikazujejo freinds seznam ali slike galerijo, bo težko predelala celotna obremenitev slik, ki so bile že razložijo dodati ali odstraniti sence, za to zadeva.
Torej, če ste naredili malo naprej razmišljanja in ustvarili HTMLS da te dodatne delitve ali običajno stanje je, da imate Loop Logic, ki proizvaja te ikone oziroma sličice v XSL, PHP. JAVA ali kateri koli drugi programski / skriptni jezik, ga lahko dodate kadar koli, potem je samo stvar kažejo in se skrivajo te sence, ki uporabljajo nepremičnine Display CSS, kot na stranke, vedno spreminjajočih se zahtev ... sem havn't naredil te vrste naprej razmišljati pred tem ... ampak ahev začel zdaj!

V spodnjem primeru prvotna podoba je senca brezplačno in dropshadows se uporabljajo kot obvezna! TUDI, sem šel malo več, z uporabo trikov mojega prejšnjega Tut (Well! ti verjetno so najkrajša različnih vaj, zato je upravičena le, kliče jih "Tut" "-ov) o uporabi CSS Clip lastnino za pokazati samo

Original slike

CSS DropShadow Rezultati

Poglej Demo plinov v sourcefiles Download

Zakaj bi rad razumel to?? Humm ...!!

Večina piscev CSS bi se strinjala, da CSS Clip lastnina je verjetno ena izmed najbolj razširjenih lastnosti un CSS. Bilo je tako res, zame preveč in je bil najbolj srečen, da ga zanemarjajo, dokler nisem začel spreminjanje MOOTOOLS DVA gumb (Pin) drsnik komponento (z indikatorjem razdalje) .

Tam je bil dober predlog enega od sestavnih uporabnikov spremeniti drsnik komponento z odsekanih backgroud slike (proti delitvi spremenljivo širino), ki označuje vrsto drsnik. Tako je prišel moj čas za vstop na zabavo, ampak un pooblaščenega (zame Ekvatorja) vode premoženja Clip CSS.

No! kako težko je lahko? Ni veliko sploh ... Ja in ne. Sintakso za uporabo v lasti Clip CSS je precej pokonci, vendar je pomen / usuage je malo croocked. S pomnilnikom, kot je moj, vsakič sem sedel s predela na mojem Slider Script ... imam tokeep se obrača na uporabo tega CLIP premoženja, opozoriti sam logiko, ki sem jih ustvaril v svoji pisavi .... Zato! misel nanjo pero navzdol, z upanjem, da se spomnimo, da je prihodnost (in tudi v korist tistih, ki se zdi boggled z lastnino Clip CSS)

Kaj CSS Clip storiti?

Posnetek je del vizualnih učinkov modula za CSS 2.1. Preprosto povedano, njegova naloga je, da se vidno okno na vrhu objekta, ki se pripnete, zato izrezovanje slik in ustvarjanje sličic, ne da ustvariti dodatne datoteke (sem že dal to možnost, da bolje uporabi v Slider komponento )

Uporaba premoženja Clip CSS, lahko ustvarite izrezek z obliko rect. Kot veliko drugih lastnosti CSS (kot so marže, itd oblazinjenje), z uporabo popravite zahteva štiri koordinate vrh, desno, spodaj, levo (TRBL). Croocked narava tega premoženja odraža, ko se natančneje pregleda, kako posnetek izračuna clipping regijo, z uporabo te štiri koordinate (pošlje možgane na kretnjo za nekaj časa). Zdaj vas zmedlo dno začne z vrha, in prav začne z leve. . Vidiš, kaj sem rekel? .... Zato to delovno mesto ...

Ta mali zmeda lahko preprosto izgine, s tem vizualno razlago CSS lastnine Clip / popravite spodaj!!

CSS Clip Zahteve

Naloga, ki smo jih začeli, da je posnetek naslednjo sliko sličic v squarer videti slike (in prav tako širokokotni slika)

Original Thumbnal / slike	Posnetek Zahteve za Sqaure Thumbmail

CSS Clip Rezultati

Poglej Demo plinov v sourcefiles Download

Včasih, da pageweight dol ... smo po delih naše skripte na koščke ... Ti javascript delci lahko naložite kot in kadar je to potrebno (na dogodek ali klikom na povezavo ali gumb itd.)

Nalaganje Javascripts dinamično je preprosta in lepo naravnost naprej, kot je spodaj ...

= “text/javascript” > <Script type = "text / javascript">
Funkcija loadNewScript (vir) {
var s = document.createElement ('script');
s.setAttribute ("tip", "text / javascript");
s.setAttribute ('src', vir);
document.body.appendChild (i);
}
</ Script>

in lahko imajo naslednjo povezavo klic kjerkoli v telesu, lahko pa da je to scenarij "onLoad" v samem dokumentu ...

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

ali

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

Če ste oseba, css, pa ti veš, bolečine v pridobivanje vaš postavitev delovne navzkrižno brskalnik. IE8 je še en ključ v del za nas razvijalce. Anywaz! Če ste zadeli na to vprašanje, kot sem storil včeraj, kjer je vaš popolnoma deluje CSS v IE7 (in prej) in Firefox nenadoma začeli metati tantrums v IE8, poskusite to ... To lepo zdelo, da se določi moje težave za zdaj ....

Uporaba izjava Meta, lahko določite upodabljanja motor, mi bi radi IE8 za uporabo. Tako prisiliti, da postane IE8 v IE7 ... vstavite naslednjo oznako Meta v glavi dokumenta: -

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

Privzeto bi IE Meta je: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ki bi IE8 zagotavljajo, da je stran z uporabo nove standarde način.

Če je potrebno, bi se to sintaksa se uporablja za namestitev v drugih brskalnikih, kot spodaj:

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

VEČ O DOCTYPES:

Če ste še ne poznajo neke vrste žival, imenovano "DOCTYPE" ... tukaj je nekaj hitro branje
Kaj so DOCTYPES? Kaj so BROWSER quirks in strogem načinu?
Nastavitev DOCTYPE v XSL

Za bolj poglobljeno razumevanje o DOCTYPES, poskusite obiskom te povezave ...
Seznam Apart: Fix vaše spletne strani z desno DOCTYPE!
Seznam Apart: Beyond DOCTYPE: Spletni standardi, Forward združljivost in IE8

Opomba: Čeprav mnogi od nas HTML / CSS ljudje so zanemarili pomen VrstaDok decleration v naših dokumentih, v katerem pravi DOCTYPE, je običajno odgovor na večino vprašanj, navzkrižno brskalnika.

Z različnimi vrtiljaki tam, veliko za Mootools tudi, jaz še vedno se odločil napisati svoj razred vrtiljak, nekaj dobrih razlogov
1. Želeli ostranjevalne funkcijo (da bi lahko skočil določen diapozitiv / korak v vrtiljaku).
2. Želel svobodo s postavitvijo na levi in desni gumb / povezavami, kjer sem kdaj prosim.
3. Večji nadzor nad Slide korakih.

Nisem uspel ustvariti nov vrtiljak, z zgoraj navedenimi značilnostmi, kot spodaj ... ... Prosto za nasvet za spremembe, ki bi jih potrebujejo!

Moja Primer izgleda takole ... [ View Demo ]

Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1995 krat)

1. Vrtiljak Paging

Z lahkoto lahko dodate ostranjevanje na vaš vrtiljaku, enostavno z nastavitvijo ostranjevalne zastavo, ki je zadnja parater opravil pri ustvarjanju primerek MooCarousel v res želimo (paging) ali napačne (donot želijo paging).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true); / / ns = število diapozitivov, sss = slide korak Velikost

Seveda pa lahko spreminjate videz-n-občutek teh osebnega klica achors, kot ste si ga spremenila njihovo CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging tok, carousel_paging stran {oris: none; širina:... 15px; višina: 15px; line-višina: 15px; text-align: center; zaslon: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

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

No! je majhen problem, čeprav, ostranjevalne sidra Če nastavljeno, bo potem dobil vedno ustvari po Carousel komponente. Hotela sem, da bi bilo dinamično, kot tudi, potem pa samo, da scenarij za pihanje iz deležev, sem se odločil, da ga preskočite.
Ampak veste, malo Javascript, bi lahko zlahka spremeniti kodo ostranjevalne generacije v MooCarousel razredu prosim vaše potrebe.

2. Prilagajanje na levo in desno ikona

Spremenite lahko postavitev, slike ali katero koli displat lastnino o levi in ​​desni gumb preprosto igranje okrog s CSS. da bi lahko spremenili umestitve na levi in ​​desno buttoms je dejanski razlog za mene, da mi pravi naš Carousel razreda.
Ker je to MooCarousel razred, sprejme id je od teh gumbov, lahko dejansko dati te gumbe, kjerkoli na strani, prosim ... da ni treba biti v elementu hierarhije, kot v mojem primeru.

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; lega: relativna, širina: 23px; višina: 20px; float: left; kazalec: kazalec;}

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

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

3. Prilagajanje Slide koraki

Kaj imam v mislih MOJE Prilagajanje KORAKE SLIDE?
Večina vrtiljakov potisnite poln vidnega okna. Torej, da ste imeli štiri predmete (kot v mojem vzorcu zgoraj), bo potisnite vse štiri elemente. S tem Carousel komponente, boste mimo številnih diapozitivov in korak velikost po vaši izbiri.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true);
c_ns = število diapozitivov, c_sss = slide korak Velikost

Tudi v mojem example1 sem calcuted velikost zaporedja korakov, ki temelji na logiki, kjer je, vem, da število elementov, širino za vsako postavko in robove, ki so podane po posameznih postavkah v mojem CSS.

/ * Za Bančenje 1 * /

var c1_w = 92; / / Bančenje točka Širina

var c1_n = 10 / / Skupno število postavk komparaciji Bančenje

var c1_pp = 4 / / Število primerjavo so perpage Bančenje Items

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide korak Velikost

c1_ns var = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = število diapozitivov

c1_sss + = c1_marginFactor; / / sss = slide korak velikost, 51 za marže

Zahteve: Mootools 1.2

Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1995 krat)