Code Beispiele

Kleine Beispiele zur allgemeinen Anwendung.
Ob jQuery, PHP oder CSS, wir zeigen hier einige Tricks zur Anwendung.
CSS
Center Image - zentriert Image exkt in der Mitte
.image { display: flex; align-items: center; img { width: auto; margin: 0 auto; justify-items: center; } }
Form Radio / Checkbox - Radio / Checkbox selbst stylen
input[type=radio], input[type=checkbox] { visibility: hidden; position: absolute; } input[type=radio] + label:before, input[type=checkbox] + label:before { height: 12px; width: 12px; margin-right: 10px; content: " "; display: inline-block; vertical-align: baseline; border: 1px solid $black; } input[type=radio] + label:before { border-radius: 50%; } input[type=checkbox] + label:before { border-radius: 2px; } input[type=radio]:checked + label:before, input[type=checkbox]:checked + label:before { background: $red; }
List with points - eigene Listpunkte
ul:not(.slick-dots) { background: $white; color: $black; list-style: none; padding-left: 20px; padding-right: 15px; border-radius: 5px; margin: 0; li { padding: 5px 0; @include media-breakpoint-up(md) { padding: 5px 0; } &:before { content: "\2022"; position: absolute; left: 15px; font-size: 20px; display: inline-block; color: $black; } } }
Linie - 3 color linie
.beforefooter { position: relative; height: 20px; width: 100%; } .beforefooter .line{ background: #3E69AD; position: absolute; top: 0; height: 4px; width: 100%; margin: 0; z-index: -1; } .beforefooter .line:before { content: ''; background: #F5334D; width: 33.33%; margin-top: -1px; height: 5px; position: absolute; top: 0; left: 0; z-index: 1; } .beforefooter .line:after { content: ''; background: #ADB58D; width: 33.33%; margin-top: -1px; height: 5px; position: absolute; top: 0; right: 0; z-index: 1; }
jQuery
Random - Ordnet die ul/li Elemente nach Zufall neu an.
var max = $('#myParent li.item').length; $('#myParent').children('li.item').sort(function(){ return Math.random()*max > (max/2) ? 1 : -1; }).each(function(){ $(this).appendTo($(this).parent()); });
PageScroll - Scrollt zur ID der Page und setzt das menu aktiv
$('.submenu li a').on('click', function(e) { e.preventDefault(); var activeItem = $(this); var canvas = $(this).attr('href'); $('.submenu li a.active').removeClass('active'); $('html, body').animate({ scrollTop: $(canvas).offset().top - 110 + 'px' }, 2000, function() { $('.submenu li a.active').removeClass('active'); activeItem.addClass('active'); }) });
SortDiv - sotiert DIV bei resize neu an
$(document).ready(function() { $(window).on("load resize",function(e){ var xwindow=$(document).width(); if(xwindow >= 1540) { sortmy($('.container'),"l"); } else if(xwindow > 640 && xwindow < 1540){ sortmy($('.container'),"m"); } else if(xwindow <= 640){ sortmy($('.container'),"s"); } }); }); function sortmy(container,device){ $container = container; if(device == 'l'){ $fields = $("div[data-lsort]", $container); } else if(device == 'm'){ $fields = $("div[data-msort]", $container); } else { $fields = $("div[data-ssort]", $container); } sorted = []; $fields.detach().each(function() { if(device == 'l'){ sorted[parseInt(this.getAttribute("data-lsort"), 10)] = this; } else if(device == 'm'){ sorted[parseInt(this.getAttribute("data-msort"), 10)] = this; } else { sorted[parseInt(this.getAttribute("data-ssort"), 10)] = this; } }); for (index in sorted) { if (String(Number(index)) === index) { $container.append(sorted[index]); } } }
ExitPage - beim verlassen der Seite
$(document).ready(function() { $(document).mousemove(function(e) { $('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2)); $('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2)); var screenTop = $(document).scrollTop(); if(e.pageY <= (screenTop + 5)) { // Show the exit popup $('#exitpopup_bg').fadeIn(); $('#exitpopup').fadeIn(); } }); $('#exitpopup_bg').click(function(){ $('#exitpopup_bg').fadeOut(); $('#exitpopup').slideUp(); }); });
Make fieldset collapse - Dropdown Fieldset
$(window).on('load resize', function() { var screen = $(window).width(); if(screen < 992) { auswahl = 1 $('fieldset').each(function() { $('#auswahl' + auswahl).addClass('collapse').removeClass('show'); $(this).find('legend').on('click touch',function() { $(this).toggleClass('isOpen'); $('#auswahl' + auswahl).collapse('toggle'); }); auswahl++; }); } else { auswahl = 1 $('fieldset').each(function() { $('#auswahl' + auswahl).removeClass('collapse').removeClass('show'); auswahl++; }); } });
InfiniteShow - show more on click
CSS first n selectors .product-finder .views-row:nth-child(n+13) { display: none; } // product filter // first: clean doubles var found = {}; $('.views-field-nid').each(function(){ var $ids = $(this).find('.field-content').text(); //console.log($ids); if (found[$ids] == null) found[$ids] = true; else $(this).closest('.views-row').remove(); }); // set button for more var but = '<ul class="js-pager__items pager" data-drupal-views-infinite-scroll-pager="">\n' + ' <li class="pager__item">\n' + ' <span class="button more" href="?kat=All&kat2=All&eig=All&ges=All&lab=All&s=&page=1" title="Weitere Produkte anzeigen" rel="next">Mehr anzeigen</span>\n' + ' </li>\n' + '</ul>'; var anz = $(".product-finder .views-row").length; if(anz > 13) { $('.product-finder').append(but); } // infinite show $('.more').click(function () { $('.product-finder .views-row:hidden').slice(0, 12).show(); if ($('.product-finder .views-row').length == $('.product-finder .views-row:visible').length) { $('.more').hide(); } });
PHP
DOM - DOMDocument::getElementById
function HomepageLaden($url, $postdata) { $agent = "Meine Browserkennung v1.0 :)"; $header[] = "Accept: text/vnd.wap.wml,*.*"; $ch = curl_init($url); if ($ch) { curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_USERAGENT, $agent); curl_setopt($ch, CURLOPT_HTTPHEADER, $header); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); if (isset($postdata)) { curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $postdata); } $tmp = curl_exec ($ch); curl_close ($ch); } return $tmp; } $_url = "http://domain.tld/site.html"; $_buffer = HomepageLaden($_url, ""); $dom = new DOMDocument(); $dom->loadHTML($_buffer); // Adresse $divNode = $dom->getElementById('profil_name_adresse'); echo $divNode->childNodes;
DOM - DOMDocument::getElementByClassName
$dom = new DOMDocument(); $dom->loadHTMLFile('http://www.domain.com/search?q=schlauchwagen'); $classname = 'product-item'; $finder = new DomXPath($dom); $nodes = $finder->query("//*[contains(concat(' ', normalize-space(@class), ' '), ' $classname ')]"); $tmp_dom = new DOMDocument(); $i=0; foreach ($nodes as $node) { if($i<=5) { echo $i; $tmp_dom->appendChild($tmp_dom->importNode($node,true)); $i++; } } $innerHTML.=trim($tmp_dom->saveHTML()); echo $innerHTML;
Register Globals - wenn register_globals ausgeschaltet ist
if (!ini_get('register_globals')) { foreach($_REQUEST as $key => $value) { $GLOBALS[$key] = $value; } }
Passwort - decrypt und encrypt Passwort
$input = "SmackFactory"; $encrypted = encryptIt( $input ); $decrypted = decryptIt( $encrypted ); echo $encrypted . '<br />' . $decrypted; function encryptIt( $q ) { $cryptKey = 'qJB0rGtIn5UB1xG03efyCp'; $qEncoded = base64_encode( mcrypt_encrypt( MCRYPT_RIJNDAEL_256, md5( $cryptKey ), $q, MCRYPT_MODE_CBC, md5( md5( $cryptKey ) ) ) ); return( $qEncoded ); } function decryptIt( $q ) { $cryptKey = 'qJB0rGtIn5UB1xG03efyCp'; $qDecoded = rtrim( mcrypt_decrypt( MCRYPT_RIJNDAEL_256, md5( $cryptKey ), base64_decode( $q ), MCRYPT_MODE_CBC, md5( md5( $cryptKey ) ) ), "\0"); return( $qDecoded ); }
SQL
ID problem - das bekannte ID Problem
DELETE FROM field_downloads_files WHERE field_downloads_files_target_id = xx; DELETE FROM revision__field_downloads_files WHERE field_downloads_files_target_id = xx; Dies löst das ID Problem
HTACCESS
Hidde Files - bestimmte Files schützen
<FilesMatch "\.(pdf)$"> Order Allow,Deny Deny from all </FilesMatch>
Verlinkung - Fehlerfrei Verlinkung
RewriteEngine On # ˆ Redirect 301 / http://www.xn--agentur-verkaufsfrderung-1oc.de # ‰ Redirect 301 / http://www.xn--bettwsche-versand-uqb.ch
Schutz - allgemeiner Zugriffsschutz
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?developer.uidev\.de/archiv/referenzen/cheatsheets/ [NC,OR] RewriteCond %{HTTP_REFERER} !^http://(www\.)?developer.uidev\.de/archiv/layouts/responsive-html/ [NC] RewriteRule \.(gif|jpe?g|png|pdf|zip)$ - [F]
Subdomain - Weiterleitung bei Subdomains
RewriteCond %{HTTP_HOST} !^(mini|alpina|bmw|gebraucht|www)\.xxii\.de$ RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
www/https - Weiterleitung auf www
RewriteEngine On RewriteCond %{HTTP_HOST} !^www\. RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] #if its SSL RewriteCond %{HTTPS} !=on RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]