Code Snippets

Hier habe ich eine Sammlung nutzlicher Code Snippets

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

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

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