Udtrykke det

I går, ligesom alle andre "Ground Hog Day", arbejdede jeg på nogle CSS / tableless layouts. Alt gik godt i IE 7, FF 3 og Chrome, indtil pludselig, så jeg nogle un-ignorable margener kun ses i Google Chrome. Selvom meget mærkeligt og worring, det var nogle nye fejl / spørgsmål, som jeg var kommet accross, var der endelig lidt krydderi i mit verdslige arbejde. Trist (men dejlig) det fik fastsættes inden for få minutter af sonden ...

Dybest set, Det lignede Google Chrome ignorerede min CSS Nulstiller (margin: 0px). Det faktisk var forårsaget af brugeren agent stylesheet (-webkit-padding-start: 40px). Så løsningen var at nulstille denne stil ved at sætte padding: 0 de opfører sig elementer.
En god måde at undgå dette problem sker for ethvert element er at bruge en global CSS Rest som følger

* {Margin: 0; padding: 0;}

Hvad er User agent Style Sheets (specifikation)?
Følgende uddrag er taget fra http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , fulgt linket for at læse mere om User agent Style Sheets

CSS 1 introducerer ideen med, at hver bruger Agent (UA, ofte en "web browser 'eller' web-klient") vil have en standard style sheet der præsenterer dokumenter inden for en rimelig - men nok banalt - måde. CSS 2 siger, at der opfylder brugerens agenter skal anvende en standard style sheet (eller opfører sig som om de gjorde), og at en brugers agent standard-stylesheet skal præsentere elementerne i dokumentet sproget på måder, der opfylder de generelle præsentation forventninger til det dokument, sprog; CSS 3 er sandsynligvis af samme mening.

Da CSS specifikationerne lade det være op til implementeringer, om at bruge en "rigtig" style sheet til standard display eller ej, er det ikke forbavsende, at du ikke kan finde en standard style sheet i alle browsers installationsmappe. I modsætning til Microsoft Internet Explorer såvel som Opera, (og så vidt jeg ved) for eksempel gøre Gecko browsere som Firefox og Netscape Navigator (se efter "html.css"), men også Konqueror det temmelig nemt at forstå deres standard styling.

Dette dem gamle skole, men som sædvanlig det er min hukommelse supplement ...
Så er deaktiveret = "true" og deaktiveret = "falsk" samme? Ja
... Tro ikke, vel! thats den måde er det ... her er nogle hurtig forklaring ...
"Deaktiveret" er en egenskab af enhver form element / feltet, og dermed kan acceptere nogen værdi af sin natur.

Så længe denne egenskab er til stede, vil elementet deaktiveres uafhængigt af dens værdi. til f.eks.
<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 ovenstående vil gøre denne formular feltet "deaktiveret".

Simpelthen ikke give attributten "Disabled" holder Field "ABLED" ... som nedenfor

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

Husk "Enhver værdi (eller ingen værdi overhovedet) af handicappede attribut, vil browseren gøre det deaktiveret". For at holde tingene klart i vores sind W3C anbefaler, at vi bruger deaktiveret = "handicappede" i disse situationer.

Dette er forskel men når vi bruger denne attribut javascript ...

document.form.element.disabled = true; / / det element vil blive deaktiveret
document.form.element.disabled = false; / / det element vil blive aktiveret

Ovenstående argumenter er også gælder for disse attributter og elementer:

• kontrolleres (alternativknappen og afkrydsningsfelt)
• valgt (option)
• nowrap (td)

Google starter en bevægelse tilskynde folk til at dumpe IE6 ... Ved aflytning IE6-brugere med en POPUP på side belastning ... måske ikke en meget god ide ... men er en UI udvikler, jeg er nødt til at slutte dette band vogn ... en mindre browser for mig bekymre sig om ... Beklager egoistisk er det! men jeg har medtage denne javascript ... (TRY DENNE SIDE i IE6) ...
Hey! og på den lysere note ... Se det er en visning af POWER af JavaScript .... Det kan endda nedlægge en kæmpe (eller når det var)

SÅ ... Hjælp befri verden for IE6 med en linje af javascript!

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

Med en anden browser til at tage sig fra i morgen! (IE8 kommer ud af sin Beta stat i morgen) ... Dens virkelig på høje tid, IE6 får sin længe på grund Mercy Død ... FN vi står for fald IE6

"IE6 er den nye Netscape 4. De hacks er nødvendige for at understøtte IE6 bliver i stigende grad betragtet som overskydende fragt. Ligesom Netscape 4 i 2000, IE6 opfattes til at holde tilbage på nettet. "

Jeff Zeldman, standarder guru

Og i mellemtiden for dem, der ligesom mig, der vil blive oversvømmet med opfordringer til at bryde CSS-layouts i IE8, er her den gamle arbejde omkring / løse ved hjælp af meta tags (meta http-ækvivalent = "X-UA-Compatible") kan du prøve ...

Vildledende opfører IE8: CSS layout brud (Målretning af en browser version ved at bruge meta-tags i IE8)

Heres en anden lille peice af Javascript fup, at jeg var nødt til at grave rundt, fordi situationen commaned det. I en af ​​mine hjemmesider, havde jeg denne situation, hvor jeg var nødt til at gennemføre "windows.onload" to gange. Den første ting, der ville kom til en uerfaren sind som mit (jeg må ærligt sige, at siden jeg har brugt javascript rammer og biblioteker, har jeg forgotton til at gøre simple ting på min egen ... trist, men sandt), er følgende metode ...

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

Ked af at sige, men plejer dette arbejde ... ikke ønsker at diskutere udførelsen videnskab Javascript meget ... men efter min seneste erfaringer, (onloadfn3) kun den sidste funktion vil syge rent faktisk bliver udført.

I normale situationer ... i modsætning til mine (som jeg vil tale om lidt senere) kan du gøre et af følgende for at udføre mutliple onload funktioner ....

Eller noget som dette

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

For min nuværende situation, kan jeg ikke bruge nogen af ​​ovenstående ...
Hvorfor skal jeg kalde windows.onload to gange, i stedet at kalde to funktioner inden for en enkelt onload funktion? Her er hurtigt kig på min problemformulering ...

"Mit websted sider er opbygget som WordPress tema .... dvs der er en fælles header.php og Footer.php der bliver inkluderet i alle de websider. Der er en onload funktion gennemfoerelse sted i Footer.php til at gøre nogle almindelige onload funktioner. Og der er få sider, der skal noget af deres egen OnLoad, bortset fra dem, udført af den fælles onload funktion. Hvis jeg tildeler callback funktion direkte til window.onload handleren, vil det over-rider tidligere tildelt tilbagekald i Footer.php "

.... Er mit problem forstået ?

Nå! der er få løsninger, som jeg fandt. De er alle meget ens og hovedsagelig implementions en løsning givet ved Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Opløsning:

Du skal blot tilføje denne javascript kode til websted ...

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

Og kalder det i stedet for den sædvanlige "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Mere kode til at køre på side belastning *
 }); 

Fordele ved dette kodestykke ...
1. Primært, det kan du have flere windows.onload begivenheder, kaldes fra separate dele af din kode, uden at overridding den tidligere definition
2. Det er virkelig diskret. Det kan placeres i en fil med dine andre scripts eller i en separat fil.
3. Det virker selvom window.onload allerede er blevet indstillet.

En anden hurtig Tut. Her er noget enkelt og rart at bruge magt CSS ... men det var vanskeligt concieve (og det sikkert var ikke mig), til at begynde med. Tilføjelse Dropshadow, kan være en peice kage for mange af os, at bruge nogle billedredigeringsprogram værktøjer som Photoshop ANF Fireworks mv
Grunden til, jeg valgte drop shadow med CSS er, at normalt samtidig skabe en side, design / html af en ansøgning, de krav, der holder iteration. Hvad jeg mener er, I et eksisterende web site med mange billeder, som dem, viser freinds liste eller et billede galleri, vil det være vanskeligt at oparbejde den samlede belastning af billeder, der allerede var losset for at tilføje eller fjerne skygger, for at stof.
Så hvis du har gjort lidt fremadrettet, samtidig med at skabe de HTMLS at tilføje disse ekstra divisioner eller normalt er situationen, at du har en løkke Logic generere disse ikoner / thumbnails i XSL, PHP. JAVA eller anden programmering / scripting sprog, kan du tilføje den når som helst, så er bare spørgsmålet om showet og skjule disse skygger ved hjælp af CSS Display ejendom, som pr kunder stadigt skiftende krav ... Jeg havn't gjort denne form for fremadrettet tænkning før dette ... men ahev i gang nu!

I eksemplet nedenfor, er det originale billede skygge fri og dropshadows anvendes efter behov! Desuden har jeg gået lidt ekstra, ved at bruge de tricks af min tidligere Tut (Well! disse formentlig er kortest række Tutorials, så det er kun berettiget at kalde dem "Tut" 's) om hjælp CSS Clip Ejendom for vise kun

Original billede

CSS DropShadow Resultater

Se demo | Hent sourcefiles

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

De fleste af CSS forfattere enige om, at CSS Clip ejendom er nok en af ​​de fleste ikke-anvendte CSS egenskaber. Det var så sandt for mig og var mest glad for at forsømme det, indtil jeg begyndte at ændre den Mootools TO Knob (Pin) Slider Komponent (med Range indikator) .

Der var et godt forslag fra en af ​​de komponenter brugere at ændre Slider Component ved hjælp af klippede baggrundsrapporten billeder (mod en variabel bredde division) for at indikere skyderen rækkevidde. Således kom min tid at komme ind i sjov, men FN-chartret (for mig selvfølgelig) farvande CSS Clip ejendom.

Nå! hvor svært det kan være? Ikke meget på alle ... ja og nej. Den syntaks at bruge CSS Clip ejendommen er temmelig oprejst men betydningen / usuage er en smule croocked. Med en hukommelse som mit, jeg hver gang sidder til omarbejde på min Slider Script ... Jeg har tokeep henviser tilbage til brugen af ​​denne CLIP ejendom, for at minde mig selv om den logik, som jeg har skabt i mit script .... DERMED! menes at pen det ned, med et håb om at huske det i fremtiden (og også til gavn for dem, der synes imponeret af CSS Clip Property)

Hvad betyder CSS Clip gøre?

Clip er en del af den visuelle effekter modulet af CSS 2,1. Simply put, dens opgave er at placere et synligt vindue oven på et objekt, der bliver klippet, og derfor klippe billeder og skabe thumbnails uden at skulle oprette flere filer (jeg har allerede sat denne funktion til bedre udnyttelse i Slider Component )

Brug af CSS Clip ejendom, kan du oprette en klipning ved hjælp af rekte form. Ligesom mange andre CSS egenskaber (såsom margin, padding osv.), ved hjælp af rect kræver fire koordinater Top, Højre, Bund, Venstre (TRBL). Den croocked karakteren af ​​denne ejendom afspejler, når du tager et nærmere kig på, hvordan klip beregner klipning regionen ved hjælp af disse fire koordinater (sender hjernen i et kast i et stykke tid). Nu at forvirre dig bunden starter fra toppen, og den højre starter fra venstre. . Du kan se hvad jeg sagde? .... Derfor dette indlæg ...

Dette lidt forvirring kan nemt forsvinde, med denne visuelle forklaring af CSS Klip / rect ejendom som nedenfor!!

CSS Clip Krav

Den opgave, vi er begyndt, er at klippe følgende miniaturebillede til et firkantede se billede (og også en vidvinkel billede)

Original Thumbnal / Billede	Clip Krav til Sqaure Thumbmail

CSS Clip Resultater

Se demo | Hent sourcefiles

Nogle gange for at holde pageweight nede ... vi har delt vores scripts i fragmenter ... Disse javascript fragmenter kan indlæses, når behovet opstår (på en begivenhed eller klik på et link eller en knap etc.).

Indlæser Javascripts dynamisk er enkel og smuk ligetil som nedenfor ...

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

og du kan have følgende opfordring linket overalt i kroppen, eller du kan få dette script "onLoad" af selve dokumentet ...

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

eller

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

Hvis du er css person, ville du vide smerten i at få dine layout arbejder cross-browser. IE8 er endnu en kæp i hjulet for os udviklere. Anywaz! hvis du rammer ved dette problem, ligesom jeg gjorde i går, hvor din perfekt arbejde CSS i IE7 (og tidligere) og Firefox har pludselig begyndte at kaste tantrums i IE8, så prøv denne ... det pænt syntes at løse mine problemer i øjeblikket ....

Ved hjælp af Meta erklæring, kan vi specificere rendering engine vi gerne IE8 til at bruge. Så for at tvinge IE8 at gøre som IE7 ... Indsæt følgende metatag i hovedet af dit dokument: -

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

Som standard IE Meta ville være: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
som vil gøre IE8 gøre siden ved hjælp af nye standarder mode.

Hvis det er nødvendigt, kunne denne syntaks bruges til at rumme for andre browsere som nedenfor:

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

MERE Om DOCTYPES:

Hvis du endnu ikke kender til den slags dyr kaldes "doctype" ... her er nogle hurtig læst
Hvad er DOCTYPES? Hvad er BROWSER Quirks & Streng tilstand?
Indstilling af DOCTYPE i XSL

For en mere dybtgående forståelse DOCTYPES, kan du besøge disse links ...
A List Apart: Fix dit websted med højre DOCTYPE!
A List Apart: Beyond DOCTYPE: webstandarder, Fremad kompatibilitet og IE8

Bemærk: Selvom mange af os, HTML / CSS mennesker er blevet negligerer vigtigheden af ​​DOCTYPE decleration i vores dokumenter, Indstilling af højre DOCTYPE, er normalt svaret på de fleste cross browser spørgsmål.

Med en bred vifte af Karruseller derude, mange for Mootools så godt, alligevel besluttede jeg at skrive min egen Carousel klasse, for nogle gode grunde
1. Ønskede et paging funktion (for at kunne springe en bestemt lysbillede / trin i karrusellen).
2. Wanted frihed med placering af Knapperne Venstre og Højre / links, hvor nogensinde jeg venligst.
3. Mere kontrol over Slide Steps.

Det lykkedes mig at oprette en ny Karrusel, med de ovenstående funktioner ... som nedenfor ... Du er velkommen til at foreslå eventuelle ændringer du ville kræve!

Mit eksempel ser sådan her ud ... [ View Demo ]

Se demo | Hent Mootools Karrusel med Paging Version 1.0 (Downloaded 1998 gange)

1. Carousel Paging

Du kan nemt tilføje paging til din karrusel, blot ved at sætte personsøgning flag, som er sidste parater passerede samtidig skabe forekomst af MooCarousel til sand (ønsker paging) eller falsk (donot ønsker paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antallet af dias, SSS = slide skridt størrelse

Og selvfølgelig kan du ændre udseende-n-feel af disse paging achors som du ønsker ved at ændre deres CSS.

. Carousel_paging {text-align: højre, margin: 5px 10px 0 0;}
. Carousel_paging strøm, carousel_paging side {omrids: none; bredde:... 15px; højde: 15px; line-height: 15px; tekst-align: center; display: block; float: left; baggrund: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging nuværende {background: # 4D4D9B; color: # ffffff;}..

Nå! Der er et lille problem dog, at personsøgning ankre hvis indstillet, så det vil blive genereret altid efter Carousel komponent. Jeg ønskede at gøre det dynamisk så godt, men så bare at holde Script til at blæse ud af proportioner, besluttede jeg mig for at springe den over.
Men du kender en lille Javascript, kan du nemt ændre paging generation koden i MooCarousel klassen at behage dine behov.

2. Tilpasning af venstre og højre Ikoner

Du kan ændre placeringen, billeder eller enhver displat ejet af de Knapperne Venstre og Højre simpelthen ved at spille rundt med CSS. at være i stand til at ændre placeringer af venstre og højre knapper nede var den egentlige årsag for mig at rette mit vores Carousel klasse.
Da dette MooCarousel klasse, accepterer id er af disse knapper, kan du faktisk placere disse knapper overalt på siden, hvis du har lyst ... det behøver ikke at være i elementet hierarki, som i mit eksempel.

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; bredde: 23px; højde: 20px; float: left; markøren: pointer;}

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

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

3. Tilpasning Slide Steps

Hvad mener jeg MINE Tilpasning SLIDE Steps?
De fleste Karruseller skub fulde med af det synlige vindue. Så siger du havde fire elementer (som i min eksemplet ovenfor), vil den glide alle de fire elementer. Med denne Carousel Komponent, passerer du antallet af dias og trinstørrelsen efter eget valg.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antallet af dias, c_sss = slide skridt størrelse

Også i min Eksempel1 jeg har calcuted slide skridt størrelse, baseret på logik, hvor jeg kender antallet af elementer, bredde på hvert punkt, og de marginer, der har givet efter hvert emne i min CSS.

/ * For Carousal 1 * /

var c1_w = 92; / / Carousal Item Bredde

var c1_n = 10; / / Antal af Sammenligningscykel Carousal varer

var c1_pp = 4 / / Antal Sammenligningscykel Carousal elementer perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide skridt størrelse

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = antallet af dias

c1_sss + = c1_marginFactor; / / sss = slide skridt størrelse 51 for margener

Krav: Mootools 1.2

Se demo | Hent Mootools Karrusel med Paging Version 1.0 (Downloaded 1998 gange)