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

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.