Snippets

Inline Scripts nach Ajax Aufruf ausführen
function formatscript($s){
	$s = preg_replace_callback('/<script (.*?)><\/script>/', function($matches){
		$out = '<div data-scriptdata="1" data-script="'.htmlspecialchars($matches[1]).'"></div>';
		return $out;
	}, $s);

	return $s;
}
function initEmbedScript(){
	let el = $('div[data-scriptdata="1"]');
	if(el.length){

		el.each(function(){
			let el = $(this),
				script = $('<script ' + el.data('script') + '/>');

			script.insertAfter(el);
			el.remove();
		});
	}
}
initEmbedScript();

Bei einem ajax aurfufen werden normalerweise alle Script Tags entfernt, da sie sonnst mehrfach aufgerufen werden. Allerdings werden auch alle anderen Scripts aus dem HTML entfernt, die benötigt werden, weil sie Teils des Inhaltes sind. In diesem Fall müssen wir die Scripts maskieren.

Im ersten Schritt wird der Inhalt der Seite - nicht die komplette Seite - mit PHP auf das vorkommen der Scripts untersucht. Die Script Tag werden anschließend durch ein DIV ersetzt, welches den Inhalt des Scripts in ein Data Attribut schreibt.  

Im zweiten Schritt lassen wir jQuery über die Seite laufen, die nach unseren DIVs sucht. Da wir den DIVs auch noch ein zweites Data Attribut gegeben haben, ist der Teil sehr einfach. Wir müssen nur nach $('div[data-scriptdata="1"]') suchen.

Anschließend gehen wir in einer each Schleife durch jedes DIV durch und erstellen ein Script Tag mit dem Inhalt, welches wir zuvor mit PHP in das Data Attribute geschrieben haben. Durch das einfügen des Scripts wird der Code automatisch aufgerufen.

jQuery Accordion Menu

Dieses Menü lässt sich durch eine Interation (Klick) öffnen und schließen. Anders als ein eines CSS Menü bleibt dieses auch nach verlassen offen. Dazu ist etwas jquery nötig.

Zum Tutorial

jQuery - Filtern

Filterung mit einem und/oder filter.
zum Tutorial

jQuery - Sortieren

Mit diesem script kann man eine Tabelle sortieren. Das script ermöglicht eine aufsteigende und absteigende Sortierung.
zum Tutorial

jQuery - Scroll to Pin

Ich habe ein einfaches und kleines Script geschrieben, welches Elemente an einer Position fest pint und auch wieder löst.
zum Tutorial

jQuery - Highlight
if($(".highlight-area").length){
	//select text block
	var term = "language";

	$(".highlight-area").html(function(i,html){
		return $.map(html.split(/(<[^>]+>)/), function(value){

		//split all html tags - tags start with <
		//return this tag
		if(value.slice(0,1) == "<"){
			return value;
		}

			return $.map(value.split(/(\s+|&)/), function(words){
				//Split all words
				//Remove empty value
				words = words.trim();

				if(words == '' || words == '&' || words == '/' || words == '.'){
					return words;
				}

				//check word length
				if (words.length == 1) {
					return words;
				}

				//wap term with
				return words.replace(term,"" + term + "");

				//join add a space after word
			}).join(" ");
		}).join("");
	});
}

Mit diesem Script könnt ihr nach Wörtern suchen und diese mit hervorheben. Das beste ist allerdings, das mein Script auch HTML Tags beachtet. Es gibt ein paar Highlighter scripts, die können aber nicht zwischen Text und HTML unterscheiden. Meine Idee war also erst die HTML Tags zu splitten und dann innerhalb der Tags die Wörter - und so sieht das Ergebniss aus.

Mit diesem Script könnt ihr nach Wörtern suchen und diese mit hervorheben. Das beste ist allerdings, das mein Script auch HTML Tags beachtet. Es gibt ein paar Highlighter scripts, die können aber nicht zwischen Text und HTML unterscheiden. Meine Idee war also erst die HTML Tags zu splitten und dann innerhalb der Tags die Wörter - und so sieht das Ergebniss aus.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more.

jQuery - Visibile element height
function vHeight() {
   var item = $('#myDiv'),
        //Window scroll position
        scrollTop = $(this).scrollTop(),
        //Window scroll position + window height
        scrollBottom = scrollTop + $(this).height(),
        //Item top position
        itemTop = item.offset().top,
        //Item top position + Item height
        itemBottom = itemTop + item.outerHeight(),
        //If Item top bigger as scroll top add scrolltop else add item scroll top
        visibleTop = itemTop < scrollTop ? scrollTop : itemTop,
        //If Item bottom smaller as scrollbottom add scrollbottom else add item bottom
        visibleBottom = itemBottom > scrollBottom ? scrollBottom : itemBottom,
        //Calc visibile height
        itemVisibileHeight = visibleBottom - visibleTop;

    //Update text
    $('.v-height').text("Visibile height: " + itemVisibileHeight);

    //Check if visibile height bigger as 0 then update fixed item position
    //els remove position
    if(itemVisibileHeight >= 0){
        $(".fixed-item").css("bottom", itemVisibileHeight + "px");
    }
    else{
        $(".fixed-item").css("bottom", "");
    }
}

//Start function on scroll
$(window).on("scroll", function(){
    vHeight();
});

//Start function on site load complete
$(window).on("load", function(){
    vHeight();
});

Diese function ermöglicht es euch zip Dateien auf eurem Server zu entpacken. Dies ist vor allem bei sehr vielen kleinen Dateien, wie zum Beispiel einer Wordpress Installation, von Vorteil.

Ihr ladet zu erst die Zipdatei hoch, in der Zwischenzeit gebt Ihr den Dateinamen und den Ort wo die Datei entpackt werden soll ein. In dem Fall wird die Datei in den Ordner extract/ entpackt. Den Ordner müsst Ihr vorher auf dem Server erstellen. Dann braucht Ihr nur noch die php Datei mit eurem script auf den Server laden und aufrufen.

PHP - Unzip on server
<?php
    $file = 'datei.zip';

    $path = pathinfo(realpath($file), PATHINFO_DIRNAME);

    $zip = new ZipArchive;
    $res = $zip->open($file);
    if ($res === TRUE) {
        $zip->extractTo($path);
        $zip->close();
        echo "Datei: $file - entpackt in $path";
    } else {
        echo "Datei konnte nicht entpackt werden - $file";
    }
?>

Diese function ermöglicht es euch zip Dateien auf eurem Server zu entpacken. Dies ist vor allem bei sehr vielen kleinen Dateien, wie zum Beispiel einer Wordpress Installation, von Vorteil.

Ihr ladet zu erst die Zipdatei hoch, in der Zwischenzeit gebt Ihr den Dateinamen und den Ort wo die Datei entpackt werden soll ein. In dem Fall wird die Datei in den Ordner extract/ entpackt. Den Ordner müsst Ihr vorher auf dem Server erstellen. Dann braucht Ihr nur noch die php Datei mit eurem script auf den Server laden und aufrufen.

jQuery - Basline
function baseline(){
    if($(".block-baseline").length){

        //Set line height
        var lineHeight = 20;

        //Set min margin
        var minMargin = 20;

        //Select all divs with class item-baseline
        $(".item-baseline").each(function(){

            //select image height or an oder div over the text
            var elHeight = $(this).find(".basline-image").height();

            //calc the line height of the top image and round up
            var lines = Math.ceil((elHeight + minMargin) / lineHeight);

            // calc the lines with the line height and divide with the top image
            var margin = (lines * lineHeight) - elHeight;

            //add the result as margin to the text div
            $(this).find(".basline-text").css("margin-top", margin + "px");
        });
    }
};

$(window).on("load", function(){
    baseline();
});

Wenn Ihr mehrere Textspalten habt und diese unterschiedlich hohe Bilder besitzen, kommt es oft vor das die Texte nicht mehr auf einer Linie stehen. Das Problem wird mit Hilfe dieses scripts behoben, es gleich sozusagen die unterschiedlichen Höhen wieder aus und bringt den Text auf eine Linie.

jQuery - manipulation on scroll
//Set min and max Value
var maxValue = 500;
var minMin = 10;

function elementSize(){
    //Get scroll position
    var scrollPosition = $(window).scrollTop();

    //Calc value in percent from 1px to 300px
    var scrollPercent = 1 - Math.min(scrollPosition / 300, 1);

    //Calc new width
    var elementWidth = minMin + (maxValue - minMin) * scrollPercent;

    //Update new Width to Element
    $("#myDiv").css("width", elementWidth + "px");
    $("#myDiv").css("margin-left", "-" + elementWidth/2 + "px");
}

//Start function on scroll
$(window).on("scroll", function(){
    elementSize();
});

//Start function on site load complete
$(window).on("load", function(){
    setTimeout(function(){
        elementSize();
    });
});

Manipuliert Elemente aufgrund der Scrollposition des Browsers.