2011 18. Februar 2011

IE Javascript Fehler: Das Objekt unterstützt diese Eigenschaft oder Methode

Hatte diese seltsame Frage, wo ein Stück Javascript in all den Browser wie gewohnt ans bar IE funktionierte gut :) Einfache ... es war, aber da das Skript wurde nicht von mir geschrieben, dauerte es eine Weile, um dieses "Objekt unterstützt diese Eigenschaft oder Methode" Fehler, dass nur IE kotzte debuggen. Wahrscheinlich! Wenn ich das Script zu schreiben wäre, würde ich nicht habe diesen Fehler überhaupt, wie nicht mischen meine Variablennamen mit Feld-IDs :).

Problem: Das Objekt unterstützt diese Eigenschaft oder Methode (auf Linie 3)

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

Lösung:
Der Fehler wird auf der thirdrow im obigen Beispiel (Linie 3 ... "shortdesc = document.getE ....") erzeugt. Ich habe versucht, alle Art von dummen Dinge, dass ich nicht einmal wert, ist die Erwähnung hier und schließlich guess what! nur die Änderung der shortdesc var, etwas anderes zu losgeworden den Fehler. Grundsätzlich! Der Name der Variablen musste sich von der FieldID


2009 24. März 2009

Deaktiviert = "true" und deaktiviert = "false" das gleiche?

Dies diejenigen der alten Schule, aber wie üblich ist es meiner Erinnerung Ergänzung ...
So ist deaktiviert = "true" und deaktiviert = "false" gleich? Ja
... Glauben Sie nicht, gut! das ist so, wie es ist ... hier ein paar kurze Erklärung ...
"Deaktiviert" ist ein Attribut irgendeiner Form Element / Feld und kann somit jeden beliebigen Wert von Natur zu akzeptieren.

Solange dieses Attribut vorhanden ist, wird das Element unabhängig von ihrem Wert deaktiviert werden. für zB.
<input type="text" value="This ist disabled" disabled>
<input type="text" value="This ist disabled" disabled="disabled">
<input type="text" value="This ist disabled" disabled="true">
<input type="text" value="This ist disabled" disabled="false">

Alle der oben genannten machen das diese Form Feld "Disabled".

Einfach nicht bietet das Attribut "GESPERRT" hält das Feld "Fachpersonal" ... wie unten

<input type="text" value="This ist nicht disabled" />

Denken Sie daran, "einen beliebigen Wert (oder kein Wert) des disabled-Attribut, wird der Browser machen es deaktiviert". Um die Dinge klar in unseren Köpfen W3C empfiehlt, dass wir disabled = "disabled" in diesen Situationen zu verwenden.

Das ist Unterschied allerdings, wenn wir dieses Attribut in JavaScript verwenden ...

document.form.element.disabled = true; / / Das Element wird deaktiviert
document.form.element.disabled = false; / / Das Element wird aktiviert

Die oben genannten Argumente sind auch für diese Attribute und Elemente wahr:

  • überprüft (Radio-Button und Checkbox)
  • ausgewählt (Option)
  • nowrap (td)

2009 7. März 2009

Mit mehreren Windows-Onload Funktionen in JavaScript

Heres ein weiteres kleines peice von Javascript Betrügerei, dass ich zu wühlen, weil die Situation commaned es hatte. In einem meiner Web-Sites, hatte ich diese Situation, wo ich "windows.onload" zweimal umsetzen mussten. Das erste, was einem unerfahrenen Geist wie meiner (ich muss ehrlich sagen, dass, seit ich verwendet haben Javascript Frameworks und Bibliotheken, habe ich forgotton, einfache Dinge auf meine eigene ... traurig aber wahr tun) kam wäre, ist die folgende Methode ...

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

Es tut uns leid zu sagen, aber, diese nicht funktionieren ... nicht wollen, um die Ausführung von Javascript Wissenschaft viel zu diskutieren ... aber nach meinen jüngsten Erfahrungen, nur die letzte Funktion (onloadfn3) wird krank tatsächlich ausgeführt werden sollen.

In normalen Situationen, im Gegensatz zu mir (was ich über etwas später zu sprechen) ... Sie tun können einen der folgenden Schritte, um mutliple onload-Funktionen ausführen ....

Oder so ähnlich

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

Für meine aktuelle Situation, kann ich nicht verwenden entweder der oben ...
Warum muss ich zweimal windows.onload nennen, eher, dass das Aufrufen zwei Funktionen in einem einzigen onload-Funktion? Hier ist kurzer Blick auf mein Problem Aussage ...

"Meine Website Seiten werden wie die WordPress-Theme aufgebaut .... dh es gibt eine gemeinsame header.php und footer.php, die in all den Seiten der Website enthalten wird. Es gibt eine Funktion onload Implementierung in die footer.php, einige gemeinsame onload Funktionen zu tun. Und es gibt einige Seiten, die etwas von ihrem eigenen ONLOAD müssen, abgesehen von den von der gemeinsamen onload-Funktion. Wenn ich Callback-Funktion direkt zuweisen, der window.onload Handler, wird es über-fahren vorher zugewiesene Rückrufe in den footer.php "

.... Ist mein Problem verstanden :) ?

Na ja! gibt es nur wenige Lösungen, die ich gefunden haben. Sie sind alle sehr ähnlich und vor allem implementions einer Lösung von Simon Willison (gegeben http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Lösung:

Fügen Sie einfach diesen JavaScript-Code, um vor Ort ...

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

Und nennen es statt der üblichen "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Mehr Code, um beim Laden der Seite ausgeführt werden *
 }); 

Die Vorteile dieses Code-Snippet ...
1. In erster Linie, es lässt Sie haben mehrere windows.onload Ereignisse, genannt von den unterschiedlichen Teilen des Codes, ohne Überschreiben der bisherigen Definition
2. Es ist wirklich unauffällig. Es können in einer Datei mit Ihren anderen Skripten oder in einer eigenen Datei gespeichert werden.
3. Es funktioniert auch, wenn window.onload bereits gesetzt worden.


2008 25. Dezember 2008

Lädt dynamisch JavaScripts

Manchmal halten die pageweight unten ... wir haben unsere Scripte in Fragmente aufgeteilt ... Diese JavaScript-Fragmente können als geladen werden und bei Bedarf (auf einer Veranstaltung oder beim Klicken auf einen Link oder Button etc.).

Lädt Javascripts dynamisch ist einfach und ziemlich geradlinig, wie unten ...

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

und Sie können den folgenden Aufruf Link irgendwo im Körper haben, oder Sie können dieses Skript "onLoad" des Dokuments selbst haben ...

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

oder

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


2008 3. Oktober 2008

Einfache, leichte, Cross-Browser-Leuchtkasten für Ihre Webseite

Nicht, dass es nur ein paar LIGHTBOX die, mit dem Sie, wenn Sie Google können. Das Problem mit den meisten der Leuchtkästen, dass ich fand, war, dass sie alle schienen eine oder andere schwere JavaScript-Frameworks wie jQuery, Prototype, MooTools und Ähnliches verwenden. Sie sind alle cool und protzigen suchen. Aber wenn Ihre Forderung ist "aber ich will eine einfache und leichte LIGHTBOX SCRIPT für meine Homepage", dann ist es hier;

Einige nette Features dieses Leuchtkastens

  1. Sehr leicht
    ein. 4kb von Scripts, wenn gepackt (8 KB entpackt)
    b. 2 kb von CSS
    c. Nur wenige Zeilen HTML-Container für die lightbox
  2. Einfach zu verstehen und umzusetzen
  3. Können mehrere Leuchtkästen auf der gleichen Seite haben.
  4. Das gleiche Leuchtkasten Behälter verwendet wird für verschiedene Inhalte (die separat als verborgenen Bereiche in der Seite enthalten), abhängig von der Verbindung / Option, die angeklickt wird.
  5. Zentriert sich automatisch, unter Berücksichtigung aller Faktoren wie, Fensterhöhe und-breite (Bildschirmauflösung), Seite blättern Betrag und der Höhe der Inhalt der Lightbox
  6. Getestet in IE 7 & FF

Demo anzeigen |
Laden Sie Zip Leuchtkasten Quelle (Heruntergeladene 1804 mal)


Mit dem Leuchttisch [Dateien im ZIP-Datei]

jo.js, jo_pack.js [gepackte Version]: - ein einfacher Satz von JavaScript-Objekten [JO], das Element, Fenster-und Dokumenten-Positionierung Skripte. Sie können JO.JS öffnen, wenn Sie sich die Hände schmutzig mit einigen fortgeschrittenen JavaScripting, die Schaffung abstrakter Funktionen wünschen, der sich Element-Eigenschaften und so. Wenn Sie nicht zu viel in JavaScripting, lassen sie allein.

lightbox.js, lightbox_pack.js [gepackte Version]: - Enthalten Licht Box Manager Skripte. Wenn Sie Seiten Designer, auch verantwortlich mit der Umsetzung der Lightbox auf der Seite sind, müssen Sie die LightBoxManager verstehen. LightBoxManager enthält im Grunde nur zwei Funktionen showLightBox und closeLightBox.

lightbox.css: - Wenn Sie wissen, CSS, spielen Sie herum kann mit lightbox.css um den Look-n-Gefühl lightbox.css anpassen

index.html: Beispiel für Umsetzung der Lightbox mit zwei verschiedenen Inhalten

lb_underlay_bkg.png: - Dies ist Licht / Simi transparentes Bild, das den Hintergrund für den Leuchtkasten Unterlage verwendet wird [Unterlage ist die Schicht unterhalb der lighbox, die der Benutzer daran gehindert Maustaste auf eine beliebige andere Stelle auf der Seite, während der Lightbox geöffnet ist]. Sie können jedes Bild oder gar eine feste Farbe für diesen Zweck zu verwenden, abhängig von der Seiten-Design und der Anforderung.

icon_lb_close.gif: - Das Bild für ein automatisches System Griff an der oberen rechten Ecke des Licht-Box. Können jedes Bild als pro-Design verwenden

Demo anzeigen |
Laden Sie Zip Leuchtkasten Quelle (Heruntergeladene 1804 mal)

Bitte lassen Sie uns Ihre Kommentare und Rückmeldungen ...


2008 13. September 2008

JavaScript: Edit Webseite im Browser

Nun, ich muss sagen, nicht so ein nützliches Stück der Wissenschaft, aber wenn Sie ein Web-Entwickler sind, können kommen praktisch, eines Tages (oder wird es?). Hier ist klein Bookmarklet, das um die Webseite für jede Website bearbeiten können.
Und Sorry! Sie können die Ergebnisse auf Ihrem lokalen Rechner nur zu sparen.

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


2008 2. September 2008

CSS-Hack: Javascript, CSS, HTML nur für Firefox

Viele Male haben wir das Bedürfnis verspüren, Browser specfic Hacks zu schreiben (obwohl es nicht eine gute Praxis, wir UI-Entwickler, um solche Übel, bis der große Krieg der Browser zurückgreifen müssen kommt zu einem Waffenstillstand). Zuvor hatte ich in diesem Artikel erwähnten Für Ihre IEs nur , wie man einen CSS-Schnipsel, die sichtbar sein, um IE-Browser würde <IE7 nur zu schreiben.

Gestern hatte ich einen Fall, wo ich wollte etwas FireFox bestimmte CSS-Schnipsel zu schreiben. Na ja! Ich bin nicht sicher ob es eine CSS-Code für diese aber es gibt eine HTML. Es gibt jedoch einen Haken, dieses Stück HTML doesnot Pass HTML-Validierung. Aber, anywaz! Wenn Sie schlecht oder als solche stecken, haben keinen Bezug zur Validierung-(irgendwann müssen wir grausam sein), könnten Sie die folgenden, um einen Link zu einem FF-Stylesheet nur erklären oder auch nur Code der CSS innerhalb dieses Blocks. Der Code ist

Setzen Sie Ihre <comment> FireFox nur HTML / CSS / Scripts hier </ Kommentar>

zB
<comment>
<style>
/ * Styles für FF nur * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Kommentar>

I "m froh für den Moment ...


2008 1. September 2008

Entfernen Sie bestimmte Element aus einem JavaScript-Array übergeben, die einen String passt

Hier ist schnelle Möglichkeit der Verlängerung der nativen JavaScript-Array-Objekt, genau das zu tun ...

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;
}

So jetzt können Sie so etwas tun ...

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

Nun ist die Tiere Array enthält "Hund", "Löwe", "Katze", "Elefant";

PS: Und hier ist der String Trim zu Prototype ...

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


Viel Spaß ....


2008 15. Mai 2008

Best Practices: Arbeiten mit JavaScript-

Fügen Sie JavaScript die an der Unterseite des HTML-Dokuments

Wenn Sie nicht über document.write (oder jede dynamische Generierung von Seiteninhalten mit Javascripts), einen Teil der den Inhalt der Seite in Ihren Scripts einfügen, verschieben Sie das Skript include-Anweisung an den unteren Rand der Seite, vor dem Ende des BODY-Tags.
Die HTTP/1.1 Spezifikation legt nahe, dass Browser herunterzuladen nicht mehr als zwei Komponenten parallel pro Hostname. Wenn Sie Ihre Bilder von mehreren Hostnamen dienen, können Sie mehr als zwei Downloads parallel auftreten. Während ein Script heruntergeladen wird, jedoch wird der Browser nicht starten alle anderen Downloads, auch auf verschiedene Hostnamen.
Es gibt auch Möglichkeiten zum dynamischen Erstellen von SCRIPT-Knoten und laden Remote-Skripts, nachdem die Seite geladen wird mittels AJAX.

Externalisieren Sie JavaScript-

Über externe JavaScript-Dateien werden in schneller Laden der Seiten führen, da die JavaScript-Dateien vom Browser zwischengespeichert sind. Inline-JavaScript-'in HTML-Dokumenten erhalten jedes Mal, wenn das HTML-Dokument angefordert wird heruntergeladen. Dies könnte in der Tat die Zahl der HTTP-Anfragen gemacht, aber es anschließend erhöht die Größe des HTML-Dokuments. Externe JavaScript-zwischengespeichert werden durch den Browser, die Größe des HTML-Dokuments ist ohne die Erhöhung der Anzahl von HTTP-Anfragen reduziert.
Bitte beachten Sie, dass, wenn Nutzer auf Ihrer Website mehrere Seitenaufrufe pro Session haben und viele von Ihren Seiten wieder verwenden die gleichen Skripte und Stylesheets, gibt es eine größere potentielle Nutzen von externen Dateien zwischengespeichert.

Packen Sie Ihre Javascript Dateien

Im Falle eines JavaScripts, im Gegensatz zu CSS, könnten die Dateien knirschte mit einigen Standard-Algorithmen, die eine geringere Dateigröße als das einfache Entfernen Leerzeichen oder Tabs geben würde. Ein Beispiel für JavaScript-Packer kann hier gefunden werden http://dean.edwards.name/packer/

Entfernt alle doppelten Scripts

Es ist sehr ungewöhnlich, dass ganze Skripte dupliziert werden könnte, sondern eine Überprüfung der zehn Top US-Websites zeigt, dass zwei von ihnen eine doppelte Skript enthalten. Duplizieren Sie Skripte aber offensichtlich reduziert die Leistung, indem unnötige HTTP-Anfragen und verschwendet die Ausführung von JavaScript.
Auch in vielen Fällen, wenn die Skripte Namen unterschiedlich sind, gibt es eine Wahrscheinlichkeit, dass Skripten mehrfach innerhalb der gleichen Seite durch Team Größe und Anzahl der Skripte.

Minimieren Sie Zugriff auf DOM-Elemente, soweit möglich

Zugriff auf DOM-Elemente mit JavaScript ist langsam so, um eine stärker auf Seite, sollten Sie mitbringen:
• Cache Artikeln, auf die zugegriffen Elemente
• Update-Knoten "offline" und fügen Sie sie an den Baum
• Vermeiden Befestigung Layout mit JavaScript

Separate Verhalten von Inhalt und Form

So wie wir getrennte Präsentation (CSS / XSLT) von Inhalt (XHTML / XML), sollten wir uns auch trennen Behavior (Javascript). Dies wird als unaufdringliche Javascript. So wie wir auf externe CSS-Dateien zu verknüpfen, sollten wir auf externe JavaScript-Dateien zu verknüpfen.

Statt hart zu kodieren Verhalten in den Inhalt (zB onmouseover, onclick, etc.), sollte das Verhalten dynamisch auf Elemente, Klassen und einzigartige Elemente (IDs) mit dem DOM hinzugefügt werden. Das grundlegende Dokument, dessen Inhalt, sollte nur gültig XHTML / XML und kein JavaScript.
Javascript sollte durch Zugabe von Verhalten zu erweitern. Der Inhalt sollte bleiben, nützlich und auch ohne JavaScript (oder ohne volle JavaScript-Unterstützung).


2008 15. März 2008

Reizt Auswahlboxen sichtbar durch die Pop-up-Divisionen

Bei verschiedenen Gelegenheiten, während Sie Seitenlayouts mit Popup-Divisionen / Leuchtkästen / Tipps etc wir über Situationen, in denen einige Formular SELECT Objekte geschieht unter diesen Divisionen POPUP sein, durch Design und es zeigt, durch zu kommen .... YUK!

Na ja! Sie könnte leicht beheben, indem eine entsprechende Einstellung Ihrer Z-Index-Werte angemessen für FF und IE7. Aber Good Old (Wortspiel beabsichtigt) IE6 verhält sich nicht wie vorgesehen .... Die SELECT-BOX Show durch, auch nachdem Sie einige drastisch hohe Z-Index-Werte gelten für Ihren PopUp-Division ... Bummer!!

Es gibt keine Updates für dieses Problem, aber es gibt, glaube ich, mehr als ein paar Weg zur Arbeit-um dieses Problem, aber im hier, und sagen Sie die einfachste Lösung, die ich benutze, der gut arbeitet für mich, in den meisten der Fälle ....

"Hide the ROUGE SELECT-BOX Wenn Sie den Listenpfeil SHOW"

Einfach in Ihrem Skript-Schnipsel, wo Sie Ihren Popup zeigen, fügen Sie ein Stück Skript, um die Sichtbarkeit der SELECT-Box auf "Unsichtbar" eingestellt

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

Und denken Sie daran, um sie wieder beim Schließen von PopUp-Division

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

wo "my_select" ist die ID der Reizung SELECT-Box

Hope this helps ...

PS. Es gibt ofcourse andere Optionen wie ein IFRAME dynamisch positionining (gleiche Größe wie Sie PopUp) unter dem Popup-DIV ... Das funktioniert gut, auch, aber mit einem Zusatz von Lasten von DOM-Elementen, Skripte und Kopfschmerzen. Ich habe diese Lösung auch verwendet und wenn Sie Hilfe brauchen mit dieser Option, lass es mich wissen. Gerne helfen!


NDK Hause | Ausdruck ihrer IT | Ausdruck Gaumen | Penmenship Ausdruck | Ausdruck Awe | mich auszudrücken