Esprimere IT

Avuto questo problema strano, in cui un pezzo di Javascript ha funzionato bene in tutte le ans del browser, come IE solito bar Semplice ... è stato, ma dato che lo script non è stato scritto da me, ci sono voluti un po 'per eseguire il debug di questo errore "oggetto non supporta questa proprietà o metodo" che solo IE è stato vomitare. Probabilmente! Se dovessi scrivere la sceneggiatura, non avrei ottenuto questo errore affatto, come non si mischiano i miei nomi di variabile con il campo Ids :).

Problema: oggetto non supporta questa proprietà o metodo (on line 3)

function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

Soluzione:
L'errore viene generato sul thirdrow nell'esempio di cui sopra (linea 3 ... "ShortDesc = document.getE ...."). Ho provato ogni sorta di cose stupide, che io non vale neanche la menzione qui e, infine, indovinate un po '! semplicemente cambiando la var ShortDesc a qualcos'altro sbarazzato dell'errore. Fondamentalmente! Il nome della variabile è stato diverso da quello fieldID

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)

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.

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');">

Non che ci sono solo pochi LIGHTBOX che si può trovare quando si google. Il problema con la maggior parte delle lightboxes che ho trovato era che tutti sembravano di utilizzare una o le altre strutture pesanti di peso JavaScript come jQuery, Prototype, MooTools e simili. Sono tutti freschi e swanky cercando. Ma se la vostra esigenza è "MA VOGLIO A SCRIPT LIGHTBOX semplice e leggero Per il mio sito", eccola qui;

Alcune caratteristiche interessanti di questa raccolta

1. Molto leggero
   uno. 4kb di script quando confezionate (8 kb scompattato)
   b. 2 kb di CSS
   c. Poche righe di codice HTML per il contenitore lightbox
2. Semplice da capire e da attuare
3. Può avere Lightbox multipli sulla stessa pagina.
4. Il contenitore lightbox viene utilizzato lo stesso per mostrare, contenuti diversi (che è incluso come parte divisioni nascosti nella pagina), a seconda del link / opzione che viene cliccato.
5. Centra automaticamente, prendendo in considerazione tutti i fattori, quali, l'altezza e la larghezza Window (risoluzione dello schermo), l'importo pagina di scorrimento e l'altezza dei contenuti del lightbox
6. Testato in IE 7 e FF

Visualizza Demo |
Scarica Fonte Zip Lightbox (Scaricato 1804 volte)

jo.js e jo_pack.js [versione imballato]: - un semplice insieme di oggetti JavaScript [JO], che contiene elementi, finestra e gli script di posizionamento dei documenti. È possibile aprire JO.JS se si vuole sporcarsi le mani con un po 'Javascripting avanzata, creazione di funzioni astratte, estendendo le proprietà degli elementi e così via. Se non è troppo Javascripting, Lascia stare.

lightbox.js, lightbox_pack.js [versione packed]: - contiene luce gli script del gestore della scatola. Se siete di progettazione delle pagine, anche responsabile di attuare il lightbox nella pagina, è necessario comprendere la LightBoxManager. LightBoxManager showLightBox contiene sostanzialmente solo due funzioni e closeLightBox.

lightbox.css: - Se conosci il CSS, è possibile giocare con lightbox.css per personalizzare il look-n-feel lightbox.css

index.html: Esempio di implementazione della raccolta con due contenuti diversi

lb_underlay_bkg.png: - Questa è la luce / simi un'immagine trasparente che viene utilizzato lo sfondo per il sottofondo lightbox [Underlay è lo strato al di sotto del lighbox, che impedisce all'utente di fare clic qualsiasi altra entità sulla pagina, mentre il lightbox è aperta]. È possibile utilizzare qualsiasi immagine o una tinta unita per questo scopo, a seconda del design della pagina e il requisito.

icon_lb_close.gif: - L'immagine per maniglia lightbox stretta in alto a destra della finestra di luce. Possibile utilizzare qualsiasi immagine come da disegno

Visualizza Demo |
Scarica Fonte Zip Lightbox (Scaricato 1804 volte)

Vi preghiamo di farci avere i vostri commenti ...

Beh, devo dire, non come un pezzo utile della scienza, ma se siete uno sviluppatore Web, potrebbe tornare utile, un giorno (o lo farà?). Ecco bookmarklet piccola, che permette di modificare la pagina web per qualsiasi sito.
E Sorry! È possibile salvare i risultati sul computer locale.

javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; vuoto 0

Molte volte sentiamo il bisogno di scrivere specfic hack del browser (anche se non è una buona pratica, che gli sviluppatori dell'interfaccia utente devono ricorrere a questi mali fino a quando le grandi guerre browser tratta di una tregua). In precedenza, avevo accennato in questo articolo Per il vostro IE solo , come scrivere un frammento di codice CSS che sarebbe visibile per i browser IE <IE7 solo.

Ieri ho avuto un caso, dove volevo scrivere qualche FireFox specifica frammenti CSS. Bene! Non so se c'è un codice CSS per questo, ma c'è un HTML. C'è un fermo, però, questo pezzo di convalida HTML doesnot passaggio HTML. Ma, anywaz! Se sei bloccato male o in quanto tali, non hanno riguardo-per la convalida (a volte dobbiamo essere crudeli), è possibile utilizzare il seguente per dichiarare un collegamento a un foglio di stile FF solo o anche solo il codice CSS all'interno di questo blocco. Il codice è

<comment> Metti il ​​tuo FireFox solo HTML / CSS / Scripts qui </ comment>

ad esempio
<comment>
<style>
/ * Stili per FF solo * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Comment>

I "felice per il momento ...

Ecco modo veloce di estendere la nativa Object Array Javascript, giusto per farlo ...

Array.prototype. removeItem =function(str) {
for(i=0; i<this.length ; i++){
if(escape(this[i]).match(escape(str.trim()))){
this.splice(i, 1); break;
}
}
return this;
}


Così ora si può fare qualcosa di simile ...

var animals= new Array("dog","lion","cat","tiger","elephant");
animals. removeItem ('tiger');

Ora l'array conterrà gli animali "cane", "leone", "cat", "elefante";

PS: E qui è il prototipo String Trim troppo ...

String.prototype.trim=function(str) {
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}

Godetevi ....

Includere JavaScript sul fondo del documento HTML

Se non si dispone di document.write (o qualsiasi generazione dinamica dei contenuti della pagina usando javascripts) per inserire una parte del contenuto della pagina nei vostri script, spostare lo script istruzione include al fondo della pagina, prima della fine del tag BODY.
Il HTTP/1.1 specifiche suggerisce che i browser scaricare non più di due componenti in parallelo per hostname. Se vi servono le vostre immagini da host multipli, è possibile ottenere più di due download a verificarsi in parallelo. Mentre uno script sta scaricando, invece, il browser non si avvia altri download, anche su host differenti.
Ci sono anche modi per creare dinamicamente i nodi SCRIPT e caricare gli script remoti dopo che la pagina viene caricato utilizzando AJAX.

Esternalizzare si JavaScript

Utilizzo di file JavaScript esterni si tradurrà in maggiore velocità di caricamento delle pagine in quanto i file JavaScript sono memorizzati nella cache dal browser. Inline JavaScript 'nei documenti HTML vengono scaricati ogni volta che viene richiesto il documento HTML. Questo potrebbe effettivamente ridurre il numero di richieste HTTP effettuate successivamente ma aumenta la dimensione del documento HTML. JavaScript esterna sono memorizzati dal browser, la dimensione del documento HTML viene ridotto senza aumentare il numero di richieste HTTP.
Si prega di notare che, se gli utenti sul tuo sito hanno viste di più pagine per sessione e molte delle tue pagine riutilizzare gli stessi script e fogli di stile, vi è un maggiore beneficio potenziale cache file esterni.

Confezione dei file Javascript

In caso di JavaScript, a differenza di CSS, i file potrebbero scricchiolava usando alcuni algoritmi standard che darebbe una dimensione ridotta del file che semplicemente la rimozione degli spazi o tabulazioni. Un esempio di javascript packer può essere trovato qui http://dean.edwards.name/packer/

Sbarazzarsi di tutti gli script duplicati

E 'molto raro che l'intero script potrebbe essere duplicati, ma una revisione dei dieci migliori siti web degli Stati Uniti mostra che due di essi contengono uno script duplicati. Duplicare gli script, ma ovviamente riduce la performance con la creazione di inutili richieste HTTP e spreco di esecuzione JavaScript.
Inoltre, in molti casi, se i nomi sono diversi script, esiste un rischio di script duplicati all'interno della stessa pagina a causa delle dimensioni del team e il numero di script.

Ridurre al minimo l'accesso a elementi DOM, ove possibile

Accesso agli elementi del DOM con JavaScript è lento, quindi per avere una pagina più reattivo, è necessario:
• i riferimenti agli elementi della cache accede
• I nodi di Aggiornamento "offline" e poi aggiungerli alla struttura ad albero
• Evitare di fissaggio layout con JavaScript

Comportamento separata dal contenuto e presentazione

Così come abbiamo la presentazione separata (CSS / XSLT) dal contenuto (XHTML / XML), dovremmo anche separare il comportamento (Javascript). Questo si chiama Javascript discreto. Proprio come ci si collega alla file CSS esterni, dovremmo creare un link a file JavaScript esterni.

Invece di comportamento rigido codice nel contenuto (ad esempio onmouseover, onclick, ecc), il comportamento deve essere aggiunto dinamicamente agli elementi, classi ed elementi unici (IDS) con il DOM. Il documento fondamentale, il contenuto, dovrebbe contenere solo validato XHTML / XML e non javascript.
Javascript deve aumentare i contenuti con l'aggiunta di comportamento. Il contenuto deve rimanere utili e utilizzabili senza javascript (o senza il pieno supporto javascript).

In diverse occasioni, mentre si fa layout di pagina con le divisioni popup / lightbox / Consigli ecc ci imbattiamo in situazioni in cui alcuni oggetti a SELECT capita di essere in queste divisioni POPUP, dal design e si vede attraverso .... YUK!

Bene! si potrebbe facilmente risolvere questo problema modificando le Z-INDEX valori in modo appropriato per FF e IE7. Ma il buon vecchio (gioco di parole) IE6 non si comporta come previsto .... Lo spettacolo BOX Selezionare tramite, anche dopo aver applicato alcuni drasticamente elevati valori di Z-INDEX al Division PopUp ... Bummer!!

Non ci sono soluzioni per questo problema, ma ci sono, credo, più che un modo che pochi al mondo del lavoro attorno a questo problema, ma Im qui per dirvi la soluzione più semplice che uso, che funziona bene per me, nella maggior parte dei casi ....

"Nascondere la casella ROUGE Selezionare quando si DIMOSTRARE IL POPUP"

Semplicemente nel frammento di script in cui si mostra il popup, aggiungere un pezzo di script per impostare la visibilità del Box SELECT per "Hidden"

document.getElementById ('my_select') style.visibilty = "hidden".;

E ricordatevi di impostare nuovamente la chiusura di vostra divisione PopUp

. document.getElementById ('my_select') style.visibilty = "visible";

dove "my_select" è l'ID del Box irritazione SELEZIONA

Spero che questo aiuti ...

PS. Ci sono altre opzioni come ofcourse dinamicamente positionining un IFRAME (stesse dimensioni di PopUp) sotto il DIV Popup ... Questo funziona bene anche, ma con l'aggiunta di carichi di elementi DOM, script e mal di testa. Ho usato questa soluzione anche, e se hai bisogno di aiuto con questa opzione, non fatemelo sapere. Sarà lieto di aiutarvi!