Esprimere IT

Ieri, come ogni altro "Day terra Hog", stavo lavorando su alcuni layout CSS / tableless. Tutto stava andando bene in IE 7, FF 3 e Chrome, fino a un tratto, ho visto alcuni non-trascurabili margini di visto solo in Google Chrome. Anche se molto strano e worring, E 'stato qualche problema nuovo bug / che ero venuto attraversato, c'era finalmente qualche spezia nel mio lavoro banale. Sad (ma bello) che è stato riparato in pochi minuti della sonda ...

In sostanza, sembrava che Google Chrome ignorato il mio Ripristina CSS (margin: 0px). In realtà è stato causato dal foglio di stile user agent (-webkit-padding-start: 40px). Quindi la soluzione era quella di resettare questo stile impostando padding: 0 gli elementi malfunzionanti.
Un buon modo per evitare questo problema si verifichi a qualsiasi elemento è utilizzare un riposo globale CSS come segue

* {Margin: 0; padding: 0;}

Qual è l'utente dei fogli di stile Agent (Specification)?
Il brano che segue è tratto da http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , seguente link per saperne di più su fogli di User Agent di stile

CSS 1 introduce l'idea affermando che ogni User Agent (UA, spesso un 'browser web' o 'client web') avrà un foglio di stile predefinito che presenta i documenti in modo ragionevole - ma forse banale - modo. CSS 2 dice che i programmi utente conformi devono applicare un foglio di stile predefinito (o comportarsi come se lo facessero) e che un agente dell'utente foglio di stile di default dovrebbe presentare gli elementi del linguaggio del documento in modo da soddisfare le aspettative di presentazione generali per la lingua del documento; CSS 3 è probabile che sia la stessa mente.

Dato che le specifiche CSS lasciare fino a implementazioni se utilizzare un foglio di "vero" stile per la visualizzazione di default o no, non è sorprendente che non si trova un foglio di stile di default nella cartella di installazione ogni browser. A differenza di Internet Explorer di Microsoft così come Opera, per esempio (e per quanto ne so), browser Gecko come Firefox e Netscape Navigator (cerca "html.css"), ma anche Konqueror rende piuttosto semplice da comprendere il loro stile di default.

Questa scuola vecchi, ma come al solito è il mio supplemento di memoria ...
Così è disabilitato = "true" e disabili = "false" lo stesso? Sì
... Non credo, bene! thats il senso che è ... ecco qualche veloce spiegazione ...
"Disabile" è un attributo di qualsiasi elemento del modulo / campo e quindi può accettare qualsiasi valore per sua stessa natura.

Finché questo attributo è presente, l'elemento sarà disabilitata indipendentemente dal suo valore. per es.
<input type="text" value="This è disabled" disabled>
<input type="text" value="This è disabled" disabled="disabled">
<input type="text" value="This è disabled" disabled="true">
<input type="text" value="This è disabled" disabled="false">

Tutto ciò renderà il campo di questa forma "Disabilitato".

Semplicemente non fornendo l'attributo "DISABLED" mantiene la Field "abili" ... come di seguito

<input type="text" value="This non è disabled" />

Ricordate "Qualsiasi valore (o nessun valore a tutti) l'attributo disabled, il browser renderlo disabilitato". Per mantenere le cose chiare nella nostra mente W3C raccomanda che usiamo disabled = "disabled" in queste situazioni.

Questa è la differenza anche se quando si usa questo attributo in javascript ...

document.form.element.disabled = true; / / l'elemento sarà disabilitata
document.form.element.disabled = false; / / l'elemento verrà abilitato

Gli argomenti di cui sopra sono vere anche per questi attributi e di elementi:

• controllato (pulsante di opzione e checkbox)
• selezionato (opzione)
• nowrap (td)

Google inizia un popolo di movimento rapide per eseguire il dump IE6 ... By utenti microspie IE6 con un popup al caricamento della pagina ... non può essere una buona idea ... ma essendo uno sviluppatore dell'interfaccia utente, devo partecipare a questo carro band ... un browser meno per me preoccuparsi Ci dispiace ... è egoista! ma ho includere questo javascript ... (TRY QUESTA PAGINA IN IE6) ...
Hey! e sulla nota più luminoso ... Vedi è una visualizzazione del potere di JavaScript .... può anche abbattere un gigante (o una volta era)

SO ... Aiuto liberare il mondo di IE6 con una linea di javascript!

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

Con un altro browser per prendersi cura da domani! (IE8 esce domani il suo stato di beta) ... Il suo tempo di IE6 è davvero alto data la sua lunga morte Mercy ... Grazie United we stand per la caduta di IE6

"IE6 è il nuovo Netscape 4. Gli hack necessari per supportare IE6 sono sempre più visti come merci in eccesso. Come Netscape 4 nel 2000, IE6 è percepito come trattenere il web. "

Jeff Zeldman, guru standard

E intanto per quelli come me che saranno inondati di chiamate di rottura layout CSS in IE8, ecco il vecchio lavoro intorno / fix utilizzando meta tag (meta http-equiv = "X-UA-Compatible") si potrebbe provare ...

Mis-si comportano IE8: le rotture layout CSS (Scelta di una versione del browser utilizzando meta tag in IE8)

Heres un altro po 'di trucchi peice Javascript che ho dovuto scavare in giro perché la situazione lo commaned. In uno dei miei siti web, ho avuto questa situazione in cui ho dovuto attuare "windows.onload" due volte. La prima cosa che si è venuto a una mente inesperta come la mia (devo dire onestamente che, dal momento che ho utilizzato framework JavaScript e biblioteche, ho forgotton a fare le cose semplici per conto mio ... triste ma vero), è il seguente metodo ...

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

Mi spiace dirlo, ma, questo non funzionerà ... Non voglio discutere la scienza esecuzione di Javascript tanto ... ma secondo la mia esperienza recente, solo l'ultima funzione (onloadfn3) cattiva volontà effettivamente eseguito.

In situazioni normali, a differenza mia (che mi parlare di un po 'più tardi) ... si può fare una delle seguenti operazioni per eseguire funzioni onload mutliple ....

O qualcosa del genere

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

Per la mia situazione attuale, non posso utilizzare di quanto sopra ...
Perché ho bisogno di chiamare windows.onload due volte, piuttosto che chiamare due funzioni all'interno di una funzione onload single? Ecco rapido sguardo a mia dichiarazione problema ...

"Le mie pagine del sito sono strutturati come il tema WORDPRESS .... vale a dire che è un header.php footer.php comuni e che viene incluso in tutte le pagine del sito. C'è un implementaion funzione onload nel footer.php per fare alcune funzioni onload comuni. E ci sono poche pagine che hanno bisogno di qualcosa del loro OnLoad propria, ad eccezione di quelli con la funzione onload comune. Se mi assegna la funzione di callback direttamente al gestore window.onload, che si impone rispetto alla callback precedentemente assegnati nelle footer.php "

.... Il mio problema è capire ?

Bene! ci sono poche soluzioni che ho trovato. Sono tutte molto simili e implementions principalmente di una soluzione data da Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Soluzione:

Basta aggiungere il codice javascript al sito ...

 addLoadEvent funzione (func) {
     var = oldonload window.onload;
     if (typeof window.onload! = 'funzione') {
        window.onload = funzione
     Else {}
        window.onload = function () {
            se (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

E lo chiamano invece del consueto "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Più codice per essere eseguito su * caricamento della pagina
 }); 

I vantaggi di questo frammento di codice ...
1. In primo luogo, ti permette di avere più eventi windows.onload, chiamato da parti separate del codice, senza overridding la definizione precedente
2. E 'davvero discreto. Può essere collocata in un file con i vostri altri script o in un file separato.
3. Funziona anche se window.onload è già stata impostata.

Un altro tut veloce. Ecco qualcosa di semplice e piacevole utilizzando il potere del CSS ... ma era concieve difficile (e sicuramente non ero io) per cominciare. Aggiunta Dropshadow, potrebbe essere un pezzo del dolce per molti di noi, utilizzando alcuni strumenti di editing di immagini come Photoshop ANF Fireworks, ecc
Il motivo per cui, ho optato per ombra con i CSS è che, di solito durante la creazione di una struttura di pagina / html di una domanda, i requisiti di mantenere l'iterazione. Quello che voglio dire è, in un sito web esistente con molte immagini, come quelle che mostrano lista freinds o una galleria di immagini, sarà difficile per rielaborare l'intero carico di immagini che erano già stati scaricati per aggiungere o rimuovere le ombre, per quel materia.
Quindi, se avete fatto un po 'il pensiero in avanti, mentre i file HTML per la creazione di aggiungere queste divisioni extra o in genere la situazione è che hai un loop Logic generare queste icone / miniature in XSL, PHP. JAVA o di qualsiasi altro di programmazione / scripting language, è possibile aggiungere in qualsiasi momento, è quindi solo questione di spettacolo e hai tenuto nascoste queste ombre utilizzando la proprietà CSS display, come per i clienti mutevoli esigenze ... I Havn't fatto questo genere di trasmettere il pensiero prima di questo ... ma ahev Inizia ora!

Nell'esempio riportato di seguito, l'immagine originale è l'ombra di libero e le dropshadows vengono applicate come richiesto! Inoltre, ho fatto un piccolo extra, utilizzando i trucchi della mia precedente Tut (Well! questi sono probabilmente più breve serie di Tutorials, quindi è giustificato solo chiamandoli "Tut" 's) su CSS utilizzando la proprietà clip per mostrare solo

Immagine originale

CSS DropShadow Risultati

Visualizza Demo | Scarica SourceFiles

Perché voglio capire questo?? Humm ...!!

La maggior parte degli scrittori CSS sarebbe d'accordo che la proprietà Clip CSS è probabilmente una delle più inutilizzato proprietà CSS. E 'stato così vero anche per me ed è stato più felice di trascurare, fino a quando ho iniziato a modificare il MooTools due pomelli (Pin) Component Slider (con indicatore Range) .

C'era un buon suggerimento da uno degli utenti componente per modificare il componente Slider utilizzando immagini ritagliate da sfondo (contro una divisione larghezza variabile) per indicare l'intervallo cursore. Così è venuto il mio tempo per entrare nel divertimento, ma un-a noleggio (per me ovviamente) le acque della proprietà Clip CSS.

Bene! quanto possa essere difficile? Non più di tanto ... SI e NO. La sintassi per utilizzare la proprietà Clip CSS è abbastanza eretta, ma il significato / usuage è un po 'croocked. Con una memoria come la mia, ogni volta che mi siedo a rielaborare il mio script Slider ... ho tokeep rinviando all'uso di questa proprietà CLIP, per ricordare a me stesso la logica che ho creato nel mio script .... QUINDI! pensato di penna giù, con una speranza per ricordare che il futuro (e anche per il beneficio di coloro che sembrano ho provato con la proprietà Clip CSS)

Cosa fa clip CSS fare?

Clip è parte del modulo di effetti visivi di CSS 2.1. In poche parole, il suo compito è quello di posizionare una finestra visibile sulla parte superiore di un oggetto che viene tagliato, quindi ritaglio immagini e la creazione di miniature senza dover creare ulteriori file (ho già messo questa funzionalità per un migliore utilizzo nel componente Slider )

Utilizzando la proprietà Clip CSS, è possibile creare un ritaglio utilizzando la forma rect. Come molte altre proprietà CSS (come margin, padding, ecc), utilizzando rect richiede quattro coordinate Top, Right, Bottom, Left (GUASTO). La natura di questa proprietà croocked riflette quando si dà un'occhiata più da vicino come fermaglio calcola l'area di visualizzazione, utilizzando queste quattro coordinate (manda il cervello in un lancio per un po '). Ora, per confondere il fondo inizia dalla parte superiore, e la destra inizia da sinistra. . Vedete quello che ho detto? .... Quindi questo post ...

Questa confusione poco può facilmente scomparire, con questa spiegazione visiva del Clip / rect proprietà CSS, come qui sotto!!

CSS clip Requisiti

Il compito che abbiamo iniziato è quella di ritagliare l'immagine seguente Miniatura in un immagine più squadrata cercando (e anche un grandangolo immagine)

Thumbnal Original / Image	Requisiti clip per Sqaure Thumbmail

CSS risultati di clip

Visualizza Demo | Scarica SourceFiles

A volte, per mantenere il pageweight giù ... abbiamo suddiviso i nostri script in frammenti ... Questi frammenti di javascript possono essere caricati come e quando richiesto (su un evento o di click su un link o pulsante, ecc.)

Caricamento dinamico Javascript è semplice e piuttosto semplice, come di seguito ...

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

e si può avere il link seguente chiamata in qualsiasi parte del corpo, o si può avere questo "onLoad" script del documento stesso ...

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

o

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

Se siete persone css, si dovrebbe conoscere il dolore ottenere i vostri layout di lavoro cross-browser. IE8 è ancora un altro bastone tra le ruote per gli sviluppatori noi. Anywaz! se si preme su questo problema, come ho fatto ieri, in cui il vostro perfettamente funzionante CSS in IE7 (e precedenti) e Firefox ha improvvisamente iniziato a tirare i capricci in IE8, provate questo ... E 'bene sembrava risolvere i miei problemi, per il momento ....

Utilizzando dichiarazione Meta, possiamo specificare il motore di rendering vorremmo utilizzare IE8. Quindi, per forza di rendere IE8 come IE7 ... Inserire il seguente meta tag nella testa del documento: -

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

Per impostazione predefinita Meta IE potrebbe essere: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
che renderebbe IE8 il rendering della pagina utilizzando la nuova modalità standard.

Se necessario, questa sintassi potrebbe essere utilizzato per accogliere per altri browser come di seguito:

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

PIU 'A proposito di DOCTYPE:

Se siete ancora familiarità con il tipo di animale chiamato "Doctype" ... ecco alcune lettura veloce
Cosa sono i DOCTYPE? Quali sono i difetti dei browser e Modalità rigorosa?
Impostazione del DOCTYPE in XSL

Per una più profonda conoscenza circa DOCTYPE, provare a visitare questi link ...
A List Apart: Fix Your Site Con il DOCTYPE destra!
A List Apart: Beyond DOCTYPE: Web Standards, le compatibilità in avanti e IE8

Nota: Anche se molti di noi HTML / CSS persone sono state trascurando l'importanza della decleration DOCTYPE nei nostri documenti, Impostazione del DOCTYPE destra, è di solito la risposta ai problemi del browser più trasversali.

Con una varietà di Caroselli là fuori, molti per Mootools, come pure, ho ancora deciso di scrivere la mia stessa classe Carousel, per alcune buone ragioni
1. Cerco una funzionalità di spostamento (per essere in grado di saltare una diapositiva particolare / step nel carosello).
2. Cerco la libertà con il posizionamento dei tasti LEFT e RIGHT / links, dove mai mi piacerà.
3. Più controllo sui passi diapositive.

Sono riuscito a creare un nuovo Carosello, con le caratteristiche di cui sopra ... come di seguito ... Sentitevi liberi di suggerire eventuali modifiche che richiederebbero!

Il mio esempio si presenta così ... [ Demo View ]

Visualizza Demo | Scarica Mootools Carousel con la versione 1.0 di paging (Scaricato 1995 volte)

1. Carousel Paging

È possibile aggiungere facilmente il paging al carosello, semplicemente impostando il flag di paging, che è l'ultima parater passato durante la creazione dell'istanza del MooCarousel su true (voglio paging) o false (donot volendo paging).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = numero di diapositive, sss = slitta passo

E naturalmente è possibile cambiare il look-n-feel di questi achors di paging come ti pare modificando il CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging corrente, carousel_paging page {outline: none; larghezza... 15px, Altezza: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

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

Bene! c'è un piccolo problema, però, Le ancore di paging, se impostato, poi si vengono generati sempre dopo che il componente Carousel. Volevo renderla dinamica pure, ma poi solo per mantenere lo script per il soffiaggio di proporzioni, ho deciso di ignorarlo.
Ma conoscete un po 'di Javascript, è possibile modificare facilmente il codice di generazione di paging nella classe MooCarousel per soddisfare le vostre esigenze.

2. Personalizzare le icone Left & Right

È possibile modificare la posizione, immagini o qualsiasi proprietà displat dei tasti destro e sinistro semplicemente suonando in giro con il CSS. di essere in grado di cambiare i posizionamenti dei buttoms Sinistra e Destra è stata la vera ragione per me la mia destra la nostra classe Carousel.
Dal momento che questa classe MooCarousel, accetta l'id di questi pulsanti, si può effettivamente mettere questi pulsanti in qualsiasi punto della pagina, se non vi dispiace ... non deve essere nella gerarchia degli elementi, come nel mio esempio.

var = new carousel1 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; width: 23px, Altezza: 20px; float: left; cursor: pointer;}

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

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

3. Personalizzazione Steps diapositive

Che cosa intendo MIEI PASSI SLIDE PERSONALIZZAZIONE?
La maggior parte dei Caroselli far scorrere il pieno rispetto della finestra visibile. Quindi, dire che hai avuto quattro elementi (come nel mio esempio sopra riportato), sarà scorrere tutti i quattro elementi. Con questo componente Carousel, si passa il numero di diapositive e il passo della vostra scelta.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = numero di diapositive, c_sss = slitta passo

Inoltre, nella mia example1 ho calcuted la dimensione del passo diapositiva, basata sulla logica, dove, so che numero di elementi, larghezza su ciascun elemento ed i margini che hanno dato dopo ogni elemento nella mia CSS.

/ * Per Carousal 1 * /

c1_w var = 92; Larghezza Item / / Carousal

c1_n var = 10; Numero / / totale di elementi carousal comparativa delle

c1_pp var = 4 / / Numero di Carousal Comparazione perpage Articoli

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / SSS = passo di diapositive

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0,5); / / ns = numero di diapositive

c1_sss + = c1_marginFactor; / / SSS scivolo = dimensione del passo, 51 per i margini

Requisiti: Mootools 1.2

Visualizza Demo | Scarica Mootools Carousel con la versione 1.0 di paging (Scaricato 1995 volte)