Martin Lantzsch
Software Entwickler
20. November 2012

jQuery click nicht auf Childs anwenden

20. November 2012 - Geschrieben von Martin - Ein Kommentar

Wenn man mit jQuery einen Klick Event Handler auf ein Element setzt, so wird dieser auch automatisch bei klick auf ein Kindelement ausgeführt.

Um das zu umgehen, habe ich mir folgende if Abfrage mit eingebaut, die prüft ob das geklickte Element auch wirklich das Element ist, dass im Event Handler angegeben wurde und keines der Kind Elemente.

$('.element').click(function(data, handler) {
	if(data.target == this) {
		// Code
	}
});

17. August 2012

Firefox Hack – onresize page refresh

17. August 2012 - Geschrieben von Martin - Keine Kommentare

Die Entwickler von Firefox meinen es sei nicht nötig, dass man beim resizen des Fensters die Seite neu lädt und haben so bei der Behandlung des Resize Events jegliche Seiten reloads gesperrt.

Da ich das allerdings in einem bestimmten Anwendungsszenario trotzdem benötigte, habe ich herausgefunden, dass man es mit folgendem „Hack“ umgehen kann, weil der Reload dann natürlich nicht mehr vom resize initiiert wird:

$(window).resize(function() {
	setTimeout(function() { window.location.reload() }, 0);
});

Durch den Timeout mit der Verzögerung von 0 Millisekunden (also sofort) wird die aufgerufene Funktion sozusagen in ihrer Herkunft anonymisiert.

Sehr umständlich, in allen anderen Browsern funktioniert es direkt, aber die Saboteure von Mozilla meinten wieder sie müssen die Welt verbessern…

23. Mai 2012

jQuery Easypassgen für Fomulare

23. Mai 2012 - Geschrieben von Martin - Keine Kommentare

Ich habe eine Modifikation an dem jQuery Plugin easypassgen vorgenommen um Passwörter auch in Formularfelder schreiben zu können. Es wird nun geprüft ob ein Attribut namens „value“ existiert, wenn ja wird das Passwort dort hineingeschrieben.

/* http://code.google.com/p/jquery-easypassgen/
   Easy Password Generator for jQuery v1.4.
   Written by Yuri Pikin (me{at}jurius.name) December 2010.
   Licensed under the MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) license.
   Please feel free to use it.
 
   Example page enable at http://pasw.pm-tools.ru
*/
 
(function( $ ){
 
    var methods = {
        init:   function ( options ){
 
            return this.each(function( ){
 
                var $this = $(this);
 
		if($this.attr('value') == undefined) {
			$this.html($.fn.easypassgen('generate', options ));
		} else {
			$this.attr('value', $.fn.easypassgen('generate', options ));
		}
            });
        },
        generate: function( settings ){
 
            var system = {
                commonChars:    "bcdfghkmnprstvz",
                allConsonants:  "bcdfghkmnprstvzjqwx",
                allVowels:      "aeuy",
                allChars:       "bcdfghkmnprstvzjqwxaeuy",
                specialChars:   "#^:_-",
                randomize:      function( from, to){
                    from = typeof(from) != 'undefined' ? from : 0;
                    to = typeof(to) != 'undefined' ? to : from + 1;	
                    return Math.round(from + Math.random()*(to - from));
                },
                getRandomCharacter: function(a){
                    return a.charAt(this.randomize(0,a.length-1));
                }
            };
 
            var defaultSettings = {
                'syllables':        3,
                'numbers':          true,
                'specialchars':     false
            };
 
            if (settings){
                $.extend( defaultSettings, settings );
            }
 
            var numberProbability = 0, numberProbabilityStep = 0.25;
            var specialProbability = 0, specialProbabilityStep = 0.5;
 
            var generatedPass = '';
 
            for(var i = 0; i < defaultSettings.syllables; ++i) {
                    if(Math.round(Math.random())) {
                            generatedPass += system.getRandomCharacter(system.commonChars).toUpperCase() +
                                                                    system.getRandomCharacter(system.allVowels) +
                                                                    system.getRandomCharacter(system.allChars);
                    } else {
                            generatedPass += system.getRandomCharacter(system.allVowels).toUpperCase() +
                                                                    system.getRandomCharacter(system.commonChars);
                    }
                    if(defaultSettings.numbers && Math.round(Math.random() + numberProbability) && ( i != (defaultSettings.syllables-1))) {
                            generatedPass += system.randomize(0,9);
                            numberProbability += numberProbabilityStep;
                    } else if (defaultSettings.specialchars && Math.round(Math.random() + specialProbability) && (i != (defaultSettings.syllables-1))){
                            generatedPass += system.getRandomCharacter(system.specialChars);
                            specialProbabilityStep += specialProbabilityStep;
                    }
            }
 
            return generatedPass;
        }
    }
 
    $.fn.easypassgen = function( method ) {
 
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.easypassgen' );
        }
    };
 
})( jQuery );

16. Dezember 2010

IE keine Frame height in Prozent

16. Dezember 2010 - Geschrieben von Martin - Keine Kommentare

Eigentlich sind Frames im heutigen Web nicht mehr gern gesehen, sie werden allerdings dennoch des öfteren benötigt, um z.B. mehrere Webseiten in einem Fenster darzustellen.

Wer dann z.B. dem Frame die Höhe 50% gibt, wird schnell feststellen, dass der Internet Explorer diesen Frame nur ein paarhundert Pixel hoch darstellt. Hierfür gibt es meines Wissens nach keinen Workaround, deshalb habe ich mir mittels JavaScript und dem jQuery Framework folgenden Fix gebastelt (hier wollte ich 2 iframes im Dokument die Höhe 50% geben):

function ieSetFrameHeight() {
    height = $(window).height();
    $('iframe').css({
        "height": height/2
    });
}
 
$(document).ready(function() {
    if($.browser.msie) {
        ieSetFrameHeight();
    }
}
 
$(window).resize(function() {
    if($.browser.msie) {
        ieSetFrameHeight();
    }
}
16. Dezember 2010

JSON Nodes zählen mit jQuery

16. Dezember 2010 - Geschrieben von Martin - Keine Kommentare

Wenn man wissen will, wie viele Nodes ein JSON Objekt hat, kann man diese mit jQuery ganz leicht auslesen:

myJsonObject.length

Allerdings wird hier nicht rekursiv gezält, sondern nur die Nodes auf der aktuellen „Ebene“.

4. August 2010

jQuery idTabs bei Seitenwechsel speichern

4. August 2010 - Geschrieben von Martin - 2 Kommentare

In letzter Zeit beschäftige ich mich wieder verstärkt mit JavaScript, bzw. jQuery. Heute habe ich auf Basis von idTabs (@BissyDesign – Danke für den Tipp ;-)) ein Horizontales Menü beflügelt, dessen Untermenüpunkte nun bei klick auf einen Obermenüpunkt ohne Seitenreload wechseln. Lange Rede kurzer Sinn:

und so sieht es nach dem klick auf „Nachrichten“ aus:

Leider hat die Sache mit idTabs einen Haken, und zwar springt das Menü nach einem Seitenreload wieder zum ersten Tab zurück und bleibt nicht beim gewählten. Doch dafür habe ich eine ganz einfache Lösung gefunden.

Als erstes müssen wir das jQuery Cookie Plugin einbinden: http://plugins.jquery.com/project/cookie
Nächster Schritt ist die Modifikation des idTabs Plugins, man suche folgende Stelle im Code (im Unkomprimierten Zeile 95):

$(id).show();
return s.change; //Option for changing url

und ändere dies zu:

$(id).show();
// write to cookie
$.cookie('PAGENAME_menu', id.split('#')[1], { expires: 1 });
return s.change; //Option for changing url

(PAGENAME_menu ist der Cookie Name, welcher an die Gegebenheiten angepasst werden muss).

Anschließend muss noch der Funktionsaufruf von idTabs Modifiziert werden:

$("#menu ul").idTabs();

zu

id = $.cookie("PAGENAME_menu");
if(id == null) { id = 0; } // failback if no cookie is availible
$("#menu ul").idTabs(id);

Nun wird bei jedem Tabwelchsel der aktuelle Tab in einen Cookie geschrieben. Beim neu laden der Seite wird dieser ausgelesen und dessen Wert (der letzte Tab) an idTabs als default Tab übergeben. Es muss lediglich beachtet werden, das keiner der Tabs das Attribut „class=’selected'“ hat, da unser Hack Trick sonst nicht funktioniert.

3. August 2010

jQuery Element Blinken lassen

3. August 2010 - Geschrieben von Martin - 4 Kommentare

Blinkende Gifs, man sieht sie nicht mehr allzu oft, aber dennoch sind sie manchmal brauchbar, um dem Benutzer etwas zu signalisieren. Leider kann man diese schlecht handhaben, denn ein mal erstellt, müsste man bei einer Änderung wieder von vorne beginnen.

Warum also nicht JavaScript dazu verwenden? Mit dieser kleinen Funktion kann man ein Element blinken lassen. Und zwar wird es erst versteckt und dann wieder eingeblendet (jQuery muss natürlich vorhanden sein):

function blink(elm, msec, speed) {
  $(elm).hide();
  $(elm).fadeIn(speed);
  window.setTimeout("blink('" + elm + "', " + msec + ", '" + speed + "')", msec);
}

elm – sagt welches Element blinken soll, z.B. „#messageIcon“
msec – die Anzahl der Milisekunden, bis die Funktion erneut aufgerufen wird. Hier sollte allerdings beachtet werden, das der Effekt auch eine gewisse Zeit benötigt, und der Nutzer durch schnelle Zeiten gestört werden könnte.
speed – gibt die Geschwindigkeit an, entweder „fast“ oder „slow“.

15. Mai 2010

jQuery – Mehrere Elemente verbergen

15. Mai 2010 - Geschrieben von Martin - 3 Kommentare

Jeder der mehrere Elemente auf ein mal mittels jQuery verstecken will, die gleich benannt wurden, wird früher oder später feststellen müssen, das der Selektor immer das erste gefundene Element verwendet.

<div id='test'>Test</div>
<div id='test'>Test 2</div>
<div id='test'>Test 3</div>

Um dies zu umgehen habe ich mir folgende 2 Funktionen geschrieben, welche alle Elemente die auf den 1. Parameter zutreffen nacheinander abarbeiten. Hierzu hole ich mir alle zutreffende Elemente via „$(name).get()“, anschließend kann ich diesen Array mittels „$.each()“ durchlaufen (das jQuery Pendant zu foreach() unter PHP). Da ich nun den Index des Elementes habe kann ich nun das entsprechende Element verbergen.

function hideAll(name, speed) {
  elm = $(name).get();
  $.each(elm, function(index, value) {
    $(name, [index]).hide(speed);
  });
}

Und hier noch eine zum Wieder ein faden (sanftes einblenden) der Elemente:

function fadeInAll(name, speed) {
  elm = $(name).get();
  $.each(elm, function(index, value) {
    $(name, [index]).fadeIn(speed);
  });
}

Als 2. Parameter wird immer der Speed übergeben in der die Animation ablaufen soll, diese sind die jQuery typischen wie „slow“ und „fast“.

Noch mal zu unserem obigen Beispiel, sollen nun alle 3 div’s ausgeblendet werden so benötigen wir lediglich folgenden Code:

hideAll('#test', 'slow');

und zum wieder einblenden selbstverständlich:

fadeInAll('#test', 'slow');