Thema: JavaScript

insgesamt 22 Artikel (Seite 2 von 3)

jQuery Event binding/unbinding und das Konzept der Namespaces

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

jQuery bietet eine sehr einfache Möglichkeit Events auf HTML-Elemente zu binden und wieder zu entfernen. Zusätzlich bietet jQuery das Konzept von Namespaces um Events besser verwalten zu können.

binding Events

jQuery(".class").click(function(){ ... });

oder

jQuery(".class").bind('click', function(){ ... });

unbinding Event

jQuery(".class").unbind(); // alle events entfernen

oder

jQuery(".class").unbind('click'); // nur click-Events entfernen

oder

jQuery(".class").unbind('click', function(){ ... });

Namespaces

Da bei den oben beschriebenen Methoden aber alle Events die entsprechenden Elementen zugeordnet sind entfernet werden und nicht nur die eigenen bietet jQuery das konzept der Namespaces an. Dadurch sind Events eindeutig identifizierbar und es können somit auch nur die eigenen Events entfernt werden.

ganzen Artikel lesen

Html-Elemente mittels JavaScript neu rendern

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

Gerade bei Darstellungsfehlern nach dem Scrollen oder Ein- und Ausblenden von Elementen, verursacht durch ein verabseumtes Neurendern durch den Browser (vor allem in IE6), ist es hilfreich diese Elemente per JS neu rendern zu lassen. Um das Neurendern eines Elements mittels JS zu erzwingen, muss diesem Element eine temporäre Fake-Klassen hinzugefügt werden. Diese Klassen müssen nicht existieren und dienen nur als Anstoß für den Browser.

Hintergrund: Eine Klasse entfernen erzwingt nicht immer ein komplettes neurendern des Elementes, wird allerdings eine Klasse hinzugefügt wird das Elemente neu gerendert, auch wenn die Klasse keine Definitionen besitzt.

ganzen Artikel lesen

InternetExplorer per JavaScript ermitteln

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

Des öfteren ist es leider notwendig für InternetExplorer 6 und 7 eigenes JavaScript zu schreiben. Die folgende Browserabfrage, basierend auf jQuery, ermittelt zuverlässig die eingesetzte Version.

IE 6 ermitteln

if (jQuery.browser.msie && /6.0/.test(navigator.userAgent)) {
  alert('browser is ie6');
}

IE 7 ermitteln

if (jQuery.browser.msie && /7.0/.test(navigator.userAgent)) {
   alert('browser is ie7');
 }

iFrame Größe dem Inhalt anpassen

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

Gerade in Webapplikationen ist hin und wieder der Gebrauch von iFrames unumgänglich. Das folgende JS-Snippet passt dabei die Höhe des iFrames beim Laden der Seite automatisch dessen Inhalt an. Somit wird der Gebrauch von iFrames für den Benutzer unsichtbar.

jQuery("iframe").load(function() {
   this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});

Browserfenster per JavaScript schließen

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

Ein Browserfenster lässt sich mit Hilfe des JS-Befehls self.close() schließen. Dabei ist allerdings darauf zu Achten, dass der InternetExplorer dem Benutzer zunächst eine Abfrage, ob das Fenster wirklich geschlossen werden soll, präsentiert.

<a href="#" $="self.close();">Fenster schließen</a>

gerade und ungerade Tabellenzeilen per JavaScript kennzeichnen

04.03.2010 | 1 Kommentar | Kategorie: JavaScript

Gerade bei längeren Tabellen ist es für den Benutzer hilfreich wenn gerade und ungerade Tabellenzeilen sich farblich unterscheiden und somit eine "gestreifte" Tabelle ensteht. CSS bietet von Haus aus leider keine Möglichkeit diesen Effekt zu erzielen, darum muss geraden und ungeraden Tabellenzeilen jeweils eine eigene Klasse zugewiesen werden. Kann dies nicht applikationstechnisch im Hintergrund erfolgen kann man die Funktionalität auch per JavaScript nachrüsten.

var tablecount = 0;
jQuery("table.stripped tr").each(function(){
  if(tablecount%2 == 0) {
    jQuery(this).addClass("even");
  } else {
    jQuery(this).addClass("odd");
  }
  tablecount++;
});

Rechnen in Javascript – Strings in Integer umwandeln

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

Um in JavaScript mit Benutzereingaben oder Rückgabewerten rechnen zu können müssen Strings zunächst in Integer umgewandelt werden. Dies erfolgt mit der Methode parseInt().

var height = jQuery("textarea").attr("height");
new_height = parseInt(height) + 20;
jQuery("textarea").attr("height", "new_height");

iFrame Inhalt mit jQuery manipulieren

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

Enthält eine Seite einen iFrame stellt sich oft der Wunsch ein auch Inhalt des iFrames, mittels in das Haupt-Dokument eingebundenen JavaScripts, zu verändern. jQuery bietet dazu die Möglichkeit auch iFrames und dessen Inhalt anzusprechen.

jQuery("iframe").contents().find("body").append("I was modified by JS!");

mit jQuery animierter ToTop-Link

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

Ein Top-Link ist schnell umgesetzt, und kann mit Hilfe von jQuery leicht mit einer netten Animation versehen werden. Dabei springt die Seite beim Klick nicht nach oben, sondern scrollt sanft nach oben.

Neben jQuery wird noch das ScrollTo-Plugin benötigt welches Sie hier finden: http://demos.flesler.com/jquery/scrollTo/

Binden Sie das JavaScript-File ein und versehen Sie den ToTop-Link mit der ID "#totop".

jQuery("a#totop").click(function() {
  jQuery.scrollTo(0, 600);
});

Focus mittels jQuery im InternetExplorer emulieren

04.03.2010 | 0 Kommentare | Kategorie: JavaScript

IE6 und IE7 können die Pseudoklasse :focus nicht auf Formularelemente anwenden. Diese kann jedoch sehr einfach per jQuery und den Methoden focus() und blur() nachgerüstet werden.

Ein Problem gibt es hier allerdings mit den Selectboxen. Wird hier das focus()-Event ausgelöst schließt sich die Selectbox sofort wieder und erst ein zweiter Klick öffnet diese dann wirklich. Um dieses Problem zu umgehen kann das Event mousedown() anstatt focus() verwendet werden.

top