Uttrycka det

Igår, precis som alla andra "Ground Hog Day", arbetade jag på några CSS / tableless layouter. Allt gick bra i IE 7, FF 3 och Chrome, tills plötsligt såg jag några icke-försumbart marginaler bara sett i Google Chrome. Även mycket konstigt och worring, var det någon ny bugg / fråga som jag hade kommit tvärs fanns äntligen lite krydda i mitt vardagliga arbete. Sad (men trevligt) fick det fastställas inom några minuter av sonden ...

I grund och botten, såg det ut Google Chrome ignoreras min CSS Återställer (marginal: 0px). Det faktiskt orsakades av User Agent stylesheet (-webkit-padding-start: 40px). Så lösningen var att återställa denna stil genom att padding: 0 de missköter sig elementen.
Ett bra sätt att förhindra detta problem händer alla element är att använda en global CSS Rest enligt följande

* {Margin: 0; padding: 0;}

Vad är Användarstatistik Agent Style Sheets (specifikation)?
Följande utdrag är hämtat från http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , följ länken för att läsa mer om Style Användare Agent Sheets

CSS 1 introducerar idén med att konstatera att varje User Agent (UA, ofta en "webbläsare" eller "webbklient") kommer att ha en plåt standard format som presenterar dokument i ett rimligt - men utan tvekan vardagliga - sätt. CSS 2 säger att som uppfyller användaragenter skall tillämpa ett ark standard format (eller beter sig som om de gjorde) och att en user agent förvalda formatmall bör presentera de delar av dokumentet språket på ett sätt som uppfyller allmänna presentation förväntningarna för dokumentet språket, CSS 3 är sannolikt att vara av samma åsikt.

Eftersom CSS specifikationerna lämnar det upp till implementationer om du vill använda en "riktig" stilmall för standard visning eller inte, det är inte förvånande att du inte hittar ett ark standard stil i alla webbläsare installationsmapp. Till skillnad från Microsofts Internet Explorer samt Opera, till exempel (och så vitt jag vet), Gecko webbläsare som Firefox och Netscape Navigator (leta efter "html.css"), men också Konqueror att göra det ganska enkelt att förstå deras standard styling.

Detta sådana gamla skolan, men som vanligt är det mitt minne komplement ...
Så är avaktiverat = "true" och inaktiverade = "false" same? Ja
... Tro inte, bra! Thats hur det är ... här är några snabba förklaring ...
"Inaktiverad" är ett attribut av någon form inslag / område och därmed kan acceptera något värde genom sin natur.

Så länge detta attribut finns, kommer elementet inaktiveras oberoende av dess värde. för t.ex..
<input type="text" value="This är disabled" disabled>
<input type="text" value="This är disabled" disabled="disabled">
<input type="text" value="This är disabled" disabled="true">
<input type="text" value="This är disabled" disabled="false">

Alla ovanstående kommer att göra detta formulär fältet "funktionshindrad".

Helt enkelt inte ge attributet "Disabled" håller Field "nedsatt arbetsförmåga" ... som nedan

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

Kom ihåg "Varje värde (eller inget värde alls) av de funktionshindrade attribut kommer webbläsaren att göra den funktionshindrad". För att hålla saker och ting klart för oss W3C rekommenderar att vi använder inaktiverat = "funktionshinder" i dessa situationer.

Det är skillnad men när vi använder detta attribut i JavaScript ...

document.form.element.disabled = true; / / elementet inaktiveras
document.form.element.disabled = false; / / elementet aktiveras

De ovan anförda argumenten gäller även för dessa attribut och element:

• kontrolleras (radio knappen och rutan)
• vald (tillval)
• nowrap (TD)

Google startar en rörelse sporrar folk att dumpa IE6 ... Av avlyssning IE6 användare med en POPUP när sidan laddas ... kan inte vara en bra idé ... men att vara en UI utvecklare måste jag gå här bandet vagn ... en mindre webbläsare för mig oroa ... Tyvärr själviskt det är! men jag har inkludera denna javascript ... (TRY Denna sida på IE6) ...
Hey! och på ljusare not ... Se det är en visning av POWER av JavaScript .... det kan även få ner en jättestor (eller när det var)

SO ... Hjälp befria världen från IE6 med en rad javascript!

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

Med en annan webbläsare för att ta hand från och med imorgon! (IE8 kommer ut sitt Beta staten imorgon) ... är dess verkligen hög tid IE6 gett sitt länge på grund Mercy Death ... Enade vi stå för hösten IE6

"IE6 är den nya Netscape 4. De hacka krävs för att stödja IE6 alltmer ses som överstiger frakt. Liksom Netscape 4 år 2000, IE6 uppfattas att hålla tillbaka nätet. "

Jeff Zeldman, standarder guru

Och tiden för dem som mig som kommer att översvämmas med samtal att bryta CSS layouter i IE8, här är det gamla arbetet kring / fixa med metataggar (meta http-motsv = "X-UA-Compatible") som du kan prova ...

Vilseledande beter IE8: CSS-layout brott (Inriktning en webbläsarversion med metataggar i IE8)

Heres en annan liten lappa av Javascript knep som jag var tvungen att gräva runt eftersom situationen commaned det. I en av mina webbplatser, hade jag denna situation där jag var tvungen att genomföra "windows.onload" två gånger. Det första som skulle kom till en oerfaren sinne som mitt (Jag måste ärligt säga att eftersom jag har använt JavaScript-ramverk och bibliotek, har jag forgotton att göra enkla saker på egen hand ... sorgligt men sant), är följande metod ...

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

Ledsen att säga men, brukar detta arbete ... inte vill diskutera genomförandet vetenskapen av Javascript mycket ... men enligt min senaste erfarenhet, (onloadfn3) endast den sista funktionen faktiskt sjuk får avrättas.

I normala fall, till skillnad från min (som jag ska tala om lite senare) ... du kan göra något av följande för att utföra mutliple onload funktion ....

Eller nåt här

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

För min nuvarande situation, kan jag inte använda någon av ovanstående ...
Varför måste jag ringa windows.onload två gånger, snarare att ringa två funktioner i en enda onload funktion? Här är snabb titt på mitt problem uttalande ...

"Mina sajtens sidor är uppbyggda likt WordPress temat .... dvs det finns en gemensam header.php och footer.php som får ingå i alla webbplatsens sidor. Det finns en onload funktion implementering i footer.php att göra några vanliga onload funktioner. Och det finns få sidor som behöver något eget OnLoad, bortsett från dem som gjorts av vanliga onload funktion. Om jag tilldelar callback-funktion direkt till window.onload handler, kommer den att över-rider som tidigare tilldelats återbesök i footer.php "

.... Är mitt problem förstås ?

Tja! det finns få lösningar som jag hittade. De är alla mycket lika och i huvudsak implementions en lösning som ges av Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Lösning:

Helt enkelt lägga till den här JavaScript-kod till plats ...

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

Och kallar det istället för den vanliga "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Mer kod körs när sidan laddas *
 }); 

Fördelar med detta kodsträng ...
1. I första hand låter den du har flera windows.onload händelser, anropas från separata delar av din kod, utan overridding den tidigare definitionen
2. Det är verkligen diskret. Den kan placeras i en fil med dina andra skript eller i en separat fil.
3. Det fungerar även om window.onload redan har ställts in.

En annan sammanfattning Tut. Här är något enkelt och fint hjälp av kraften i CSS ... men var svårt concieve (och det säkert inte var jag) att börja med. Lägga DropShadow, kan vara en lappa av tårta för många av oss, att använda någon bildredigering verktyg som Photoshop ANF Fireworks etc.
Anledningen valde jag för skugga med hjälp av CSS är att oftast när du skapar en sida design / html av en ansökan, de krav som håller iteration. Vad jag menar är, i en befintlig webbplats med många bilder, som de visar freinds lista eller ett bildgalleri, kommer det att bli svårt att upparbeta hela laddningen av bilder som redan hade lossats att lägga till eller ta bort skuggor, för den ärendet.
Så om du har gjort en liten framåttänkande samtidigt som man skapar HTMLS att lägga till dessa extra divisioner eller oftast situationen är att du har en Loop Logic generera dessa ikoner / miniatyrer i XSL, PHP. JAVA eller något annat program / skriptspråk, kan du lägga till den när som helst, då är bara frågan om showen och dölja dessa skuggor med hjälp av CSS Display egendom, enligt kunderna ständigt föränderliga kraven ... Jag havn't gjort denna typ av framåttänkande innan denna ... men ahev igång nu!

I exemplet nedan är den ursprungliga bilden skuggan gratis och dropshadows appliceras som krävs! Dessutom har jag gått lite extra, genom att använda knep för min tidigare Tut (Well! detta förmodligen är kortast olika Tutorials, så det är bara motiverat att kalla dem "Tut" 's) om hjälp CSS Clip Property för att visa upp enbart

Originalbilden

CSS DropShadow Resultat

Visa Demo | Ladda ner sourcefiles

Varför vill jag förstå detta?? ... Humm!!

De flesta av CSS författare håller med om att CSS Clip egendomen är förmodligen en av de mest oanvända CSS-egenskaper. Det var så sant för mig också och var mest glad att försumma det, tills jag började ändra MooTools TWO Vred (Pin) Slider-komponenten (med Range Indicator) .

Det var ett bra förslag från en av de ingående användarna att ändra Slider-komponenten med klippta bakgrunden, bilder (mot en variabel bredd division) för att indikera reglaget området. Således kom min tid för att skriva det roliga, men un-chartrade (för mig självklart) vatten i CSS Clip fastigheten.

Tja! hur svårt det kan vara? Inte mycket alls ... Ja och nej. Syntaxen att använda CSS Clip fastigheten är ganska upprätt, men innebörden / usuage är lite croocked. Med ett minne som mitt, varje gång jag sitter att omarbeta på min Slider Script ... Jag har tokeep hänvisar till användning av detta klipp egendom, för att påminna mig själv den logik som jag har skapat i mitt manus .... BORT! ansåg att pennan ner med en förhoppning att komma ihåg det i framtiden (och även till förmån för dem som verkar boggled av CSS Clip Property)

Vad gör CSS Clip?

Clip är en del av visuella effekter modul CSS 2,1. Enkelt uttryckt, är dess uppgift att placera ett synligt fönster ovanpå ett objekt som är klippt, varför klippning bilder och skapa thumbnails utan att behöva skapa ytterligare filer (jag har redan lagt den här funktionen användas bättre i Slider-komponenten )

Använda CSS Clip egendom, kan du skapa en klippning med rect formen. Liksom många andra CSS-egenskaper (som marginal, padding etc), med hjälp av rect kräver fyra koordinater Top, höger och undre, vänster (FEL). Den croocked naturen av fastigheten speglar när man tar en närmare titt på hur klipp beräknar klippning regionen med hjälp av dessa fyra koordinater (skickar hjärnan i en kasta ett tag). Nu till förvirra dig ner startar från toppen, och den högra börjar från vänster. . Du ser vad jag sa? .... Därför detta inlägg ...

Denna lilla förvirring kan lätt försvinna med denna visuella förklaring av CSS klipp / rect egendom som nedan!!

CSS Clip Krav

Den uppgift vi har igång är att klippa följande Miniatyrbild bilden i rektangulär ser bild (och även en vidvinkel bild)

Original Thumbnal / bild	Clip Krav Sqaure Thumbmail

CSS Clip Resultat

Visa Demo | Ladda ner sourcefiles

Ibland för att hålla pageweight ner ... vi har delat in våra manus i fragment ... Dessa javascript fragment kan laddas när så krävs (på en händelse eller klicka på en länk eller knapp etc.).

Lastning Javascripts är dynamiskt enkel och ganska rakt fram som nedan ...

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

och du kan ha följande samtalet länken någonstans i kroppen, eller kan du ha detta skript "onLoad" av själva dokumentet ...

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

eller

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

Om du är css person skulle du känna till smärtan i att få dina layouter arbetar olika webbläsare. IE8 är ännu en käpp i hjulet för oss utvecklare. Anywaz! Om du träffar på denna fråga, som jag gjorde igår, där din perfekt fungerande CSS i IE7 (och tidigare) och Firefox har plötsligt började kasta vredesutbrott i IE8, prova det här ... Det fint verkade fixa mina problem för tillfället ....

Med Meta deklaration kan vi ange renderingsmotorn vi vill IE8 att använda. Så för att tvinga IE8 att göra så IE7 ... Infoga följande metatagg i huvudet på dokumentet: -

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

Som standard IE Meta skulle vara: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
vilket skulle göra IE8 göra sidan med hjälp av nya standards mode.

Om så krävs kan detta syntax kunna användas för att rymma för andra webbläsare enligt nedan:

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

MER om DOCTYPE:

Om du ännu inte känner till den typ av djur som kallas "Doctype" ... här är några snabba läs
Vad är DOCTYPE? Vilka är webbläsare Quirks och strikt läge?
Ställa in DOCTYPE i XSL

För en mer djupgående förståelse DOCTYPE, prova att besöka dessa länkar ...
A List Apart: Fixa din webbplats med rätt DOCTYPE!
A List Apart: Beyond DOCTYPE: webbstandarder, Forward kompatibilitet och IE8

Obs: Även om många av oss HTML / CSS människor har försumma vikten av DOCTYPE decleration i våra dokument, Inställning rätt DOCTYPE, är oftast svaret på de flesta cross webbläsaren frågor.

Med en mängd Karuseller där ute, många för Mootools också, bestämde jag mig ändå för att skriva min egen Carousel klass, för några goda skäl
1. Önskade ett personsökarsystem funktion (för att kunna hoppa en speciell bild / steg i karusellen).
2. Wanted frihet med placeringen av VÄNSTER och HÖGER knapparna / länkar, vart jag vill.
3. Mer kontroll över Slide steg.

Jag lyckades skapa en ny Carousel, med ovanstående egenskaper ... enligt nedan ... Känn dig fri att föreslå ändringar du skulle behöva!

Mitt exempel ser ut så här ... [ View Demo ]

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 1998 gånger)

1. Karusellen Paging

Du kan enkelt lägga till paging till karusellen, helt enkelt genom att sätta paging flaggan, vilket är sista parater passerade när du skapar instans av MooCarousel till sann (vill personsökning) eller falskt (donot vill personsökning).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container "," carousel1_moveleft "," carousel1_moveright ", c_ns, c_sss, true); / / NS = antal bilder, SSS = slide stegstorlek

Och självklart kan du ändra utseendet-n-känner av dessa personsökning achors som du vill genom att ändra sin CSS.

. Carousel_paging {text-align: höger, marginal: 5px 10px 0 0;}
. Carousel_paging ström, carousel_paging sidan {disposition: none; bredd:... 15px, höjd: 15px; line-height: 15px; text-align: center; display: block; float: left; Bakgrund: # D8D8EB; margin: 0 1px 0 0, text-decoration: none;}

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

Tja! Det finns en liten fråga dock, om den är inställd The personsökning ankare, så kommer det att bli genereras alltid efter Carousel komponenten. Jag ville göra det dynamiskt också, men då bara för att hålla Script för att blåsa av proportioner, bestämde jag mig för att hoppa över den.
Men du vet lite Javascript, kan du enkelt ändra koden personsökning generationen i MooCarousel klassen att behaga dina behov.

2. Anpassa Vänster och höger ikoner

Du kan ändra placeringen, bilder eller något displat egendom vänster och höger knapparna enkelt genom att spela runt med CSS. för att kunna ändra placeringen av vänster och höger buttoms var den verkliga orsaken för mig att rätta mig vår Carousel klass.
Eftersom denna MooCarousel klass, accepterar ID av dessa knappar, kan du placera faktiskt dessa knappar någonstans på sidan, om ni ... det behöver inte vara i elementet hierarkin, som i mitt exempel.

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: förhållande, bredd: 23px; höjd: 20px; float: left; markören: pointer;}

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

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

3. Anpassa Slide Steg

Vad menar jag MINA Anpassa SLIDE steg?
De flesta Karuseller skjuta full med det synliga fönstret. Så säger du hade fyra punkter (som i mitt exemplet ovan), kommer den att glida alla fyra objekt. Med denna Carousel Component, passerar du antalet bilder och steget storlek du väljer.

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

Också, enligt min example1 har jag calcuted storlek bilden steget, bygger på logik där, jag vet antal artiklar, bredd på varje objekt och de marginaler som har gett efter varje objekt i min CSS.

/ * För SUPKALAS 1 * /

var c1_w = 92, / / ​​SUPKALAS Föremål bredd

var c1_n = 10, / / ​​totala antalet objekt Jämförelsetalen SUPKALAS

var c1_pp = 4 / / Antal Jämförelse SUPKALAS Artiklar perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp, / / ​​SSS = slide stegstorlek

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5), / / ​​NS = antal bilder

c1_sss + = c1_marginFactor, / / ​​SSS = slide steg storlek 51 för marginalerna

Krav: Mootools 1,2

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 1998 gånger)