Schlagwort: jquery

jQuery Quick-Cache (inkl. Benchmark)

Sobald das DOM etwas umfangreicher ist, sollten so viele jQuery-Objekte wie möglich gecached werden. Da sonst Performance-Problemen im JavaScript-Code auftreten können. Der nachfolgende Code zeigt, wie ein einfacher Caching-Mechanismus für jQuery umgesetzt werden kann.

Code:

var oCache = {};

function $$(sSelector)
{
  if(!oCache.hasOwnProperty(sSelector))
  oCache[sSelector] = $(sSelector);
  return oCache[sSelector];
};

jQuery Quick-Cache (inkl. Benchmark) weiterlesen

Browser Fingerprinting mit JavaScript

Diese JavaScript-Funktion erzeugt eine nahezu eindeutige Kennung von einem Webbrowser. Über fest im Browser eingestellte Parameter (z.B. Installierte Plugins, Auflösung, usw.) kann so ein Benutzer mit einer hohen Warscheinlichkeit eindeutig identifiziert werden. Das Ganze ist mit sehr geringem Programmieraufwand realisierbar.

Code:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://raw.github.com/placemarker/jQuery-MD5/master/jquery.md5.js" type="text/javascript"></script>
<script type="text/javascript">

function getBrowserFingerprint()
{
    var sFP = "";
    sFP+="Resolution:"+window.screen.availWidth+"x"+window.screen.availHeight+"\n";
    sFP+="ColorDepth:"+screen.colorDepth+"\n";
    sFP+="UserAgent:"+navigator.userAgent+"\n";    
    sFP+="Timezone:"+(new Date()).getTimezoneOffset()+"\n";
    sFP+="Language:"+(navigator.language || navigator.userLanguage)+"\n";
    document.cookie="sFP";
    if (typeof navigator.cookieEnabled != "undefined"
        && navigator.cookieEnabled == true
        && document.cookie.indexOf("sFP") != -1)
    sFP+="Cookies:true\n";
    else
    sFP+="Cookies:false\n"
    sFP+="Plugins:"+jQuery.map(navigator.plugins, function(oElement)
                                                  {
                                                    return "\n"+oElement.name+"-"+oElement.version;
                                                  });
    return $.md5(sFP);
}

alert(getBrowserFingerprint()); //d36fd202c2ab01a371c54b72b0e8e3c0

</script>

Verwendete Bibliotheken & Plugins:

Demo: jsFiddle

Verzögertes „onmouseover“-Event mit jQuery

Manchmal kommt es vor, dass eine Aktion nicht direkt ausgeführt werden soll, sondern leicht verzögert. Beispielsweise möchte man einen Tooltip realisieren, der erst eingeblendet wird, wenn die Maus einige Zeit über das entsprechende Element gehalten wird. Hier kann dieser Code-Schnippsel behilflich sein.

$("#myTarget").mouseover(function()
{
    $("#myTarget").addClass("active");
    setTimeout(function()
    {
        if($("#myTarget").hasClass("active"))
        alert("Verzoegert");
    }, 1000);
});

$("#myTarget").mouseleave(function()
{
    $("#myTarget").removeClass("active");
});

jQuery: Summen in einer Tabelle spaltenweise ausrechnen

Diese JavaScript-Funktion rechnet die Summen für alle Spalten einer Tabelle aus. Es können beliebig viele Spalten und Zeilen hinzugefügt werden.

JavaScript:

function calcSum(sTableID)
{
    $('#'+sTableID+' thead th').each(function(iIndex)
    {
        var iSum = 0;
        $('#'+sTableID+' tbody tr').each(function()
        {
            var iValue = parseInt($('td', this).eq(iIndex).text());
            if (!isNaN(iValue))
            iSum += iValue;
        });
        $('#'+sTableID+' tfoot td').eq(iIndex).append(iSum)
    });
}

jQuery: Summen in einer Tabelle spaltenweise ausrechnen weiterlesen

Versehentlichen Datenverlust in HTML-Formularen verhindern

Dieser jQuery-Code verhindert, dass ein Benutzer versehentlich seine mühsam eingegeben Daten, durch einen unachtsamen Klick auf einen Link oder durch eine falsche Tastenkombination, verliert.
In diesem Beispiel werden nach dem Laden der Seite alle Formular-Werte per Serialisierung in der Variable „serialized_values“ gespeichert. Sobald jetzt ein Unload-Event ausgelöst wird, muss der Benutzer bestätigen, dass er die aktuelle Seite tatsächlich verlassen möchte. Der Dialog wird nur angezeigt, wenn sich auch tatsächlich Daten verändert haben.

var serialized_values = "";

$(document).ready(function()
{  
  serialized_values = $("form").serialize();  
});

window.onbeforeunload = confirmLeave;

function confirmLeave()
{
    if(serialized_values != $("form").serialize())
    {
        return unescape("Nicht gespeicherte Informationen gehen m%F6glicherweise verloren.");
    }      
}

Um die Bestätigung für einzelne Elemente (z.B. Submit-Buttons) zu deaktivieren, reicht es den Event-Handler auf null zu setzten.

<button type="submit" onclick="window.onbeforeunload = null">Formular speichern</button>