Code Snippets

Hier habe ich eine Sammlung nutzlicher Code Snippets

JQuery - Filtering

Filterung mit einem und/oder filter.

Hier gehts zum Tutorial: Link


JQuery - Sort

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

Hier gehts zum Tutorial: Link


JQuery - Highlight

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.

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("");
	});
}

JQuery - Scroll to Pin

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

Hier gehts zum Tutorial: Link


CSS - Dynamic Text

Mit font-size: 12vmin ist es möglich Texte in eine Box einzupassen, ganz ohne Javascript. Je nachdem wie viele Inhalt vorhanden ist, muss der vmin Wert angepasst werden.

Hier gehts zur Demo: Link

<div class="main-box">
	<ul class="fontsize">
		<li class="menu-item"><a href="#">Main</a></li>
		<li class="menu-item"><a href="#">Gallery</a></li>
		<li class="menu-item"><a href="#">Graphics</a></li>
		<li class="menu-item"><a href="#">Tutorials</a></li>
		<li class="menu-item"><a href="#">Interactive</a></li>
		<li class="menu-item"><a href="#">Contact</a></li>
	</ul>
</div>
ul,li{
    list-style: none;
}

.main-box{
    height: calc(100vh - 180px);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 90px;
    margin-left: 50px;
    margin-right: 50px;
}

.fontsize{
     font-size: 12vmin;
    line-height: 1em;
    text-align: center;
    text-transform: uppercase;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%;
}

.menu-item a{
	color: #333;
}

.menu-item a:hover{
    color: #ccc;
    cursor: pointer;
}
    

Jquery - Visibile element height

Berechnet die sichtbare Höhe eines elementes.

Hierzu ein kleines Beispiel Demo

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

PHP - Unzip on server

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
    $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";
    }
?>

Jquery - Basline

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.

Am besten schaut ihr euch das Beispiel hierzu an: Demo

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

Jquery - manipulation on scroll

Manipuliert Elemente aufgrund der Scrollposition des Browsers.

Hier noch ein Beispiel: Demo

//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();
    });
});