Snippets
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.
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.
Filterung mit einem und/oder filter.
zum Tutorial
Mit diesem script kann man eine Tabelle sortieren. Das script ermöglicht eine aufsteigende und absteigende Sortierung.
zum Tutorial
Ich habe ein einfaches und kleines Script geschrieben, welches Elemente an einer Position fest pint und auch wieder löst.
zum Tutorial
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.
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
$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.
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.
//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.