Skip to content

Instantly share code, notes, and snippets.

View anselmh's full-sized avatar

Anselm Hannemann anselmh

View GitHub Profile
@anselmh
anselmh / JS including at bottom
Created January 14, 2011 08:00
credit to html5boilerplate.com
<!-- Javascript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
@anselmh
anselmh / awesome modx construct
Created January 19, 2011 10:35
with If and output filters for blogging
//one - more flexible possibility since it's made with flexible If snippet
[[!If? &subject=`[[+introtext]]` &operator=`isnotempty` &then=`[[+introtext]]` &else=`[[+content:strip_tags:ellipsis=`500`]]` ]]
//the better one when it comes to performance (thank you Mark-H)
[[+introtext:default=`[[+content:strip_tags:ellipsis=`500`]]`]]
@anselmh
anselmh / MODX Revo OutputFilter Error
Created January 20, 2011 08:42
this code doesn't output correct stripped content? What's wrong with that?
// code from my template
// should result the meta-description
// should strip html-tags from content and limit to 175 characters
// actually doesn't stripTags but limits to 175 characters
[[*content:stripTags:strip:limit=`175`]]
@anselmh
anselmh / responsive-img-wo-cookies.html
Created June 21, 2011 11:34
Responsive Images using Dynamic Base URL from @derSchepp
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Responsive Images using Dynamic Base URL</title>
<script>
(function(){
var assetSubdomain = null;
if( screen.width < 480 ){
@anselmh
anselmh / prerender-avoid-ga.js
Created June 27, 2011 09:15
prerender-avoid-ga
// if you have analytics, set them in pagevisibility mode to get real-user-trackig according to prerender-issues in Chrome/WebKit.
var viewCounted = false;
function handleVisibilityChange(evt) {
//Only count the view once we're done prerendering AND the document is done loading
if (document.webkitVisibilityState == 'prerender'
|| document.readyState != 'complete' || viewCounted)
return;
/* Implementation of view counting system starts here */
// Code for Google Analytics | Change UA-XXXXX-X to be your site's ID
@anselmh
anselmh / responsive-attr-html5.html
Last active September 26, 2015 21:07
responsive attribute for HTML/CSS3
<!-- backwards compatible solution -->
<!-- the browser should read media-query and then download the right file for the actual screen size -->
<img media-xs="(min-width:640px)" media-xs-src="http://cdn.url.com/img/myimage_xs.jpg" media-m="(max-width:1024px)" media-m-src="http://cdn.url.com/img/myimage_m.jpg" media-xl="(min-width:1025px)" media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg" src="http://cdn.url.com/img/myimage_xs.jpg" />
<img media-xs="(max-width:640px)"
media-xs-src="http://cdn.url.com/img/myimage_xs.jpg"
media-m="(max-width:1024px)"
media-m-src="http://cdn.url.com/img/myimage_m.jpg"
media-xl="(min-width:1025px)"
media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg"
@anselmh
anselmh / dabblet.css
Created January 7, 2012 22:21
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
body{
background: #CCC;
padding: 500px;
}
#map_de_muc {
@anselmh
anselmh / viewport.css
Created January 9, 2012 11:50
change css on viewport based sizes
#id{
background: #999;
position: fixed;
top:0;
width: 100%;
height: 10em;
z-index: 99999999999999;
padding-top:4em;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
@anselmh
anselmh / dabblet.css
Created January 14, 2012 13:48
circled-font
/**
* circled-font
*/
/* currently it's an ellipse not a circle */
.iconstyle {
background: #000;
color: #B4E3FF;
border-radius: 50%;
padding: .6em;
@anselmh
anselmh / imgtag.html
Created January 24, 2012 08:53 — forked from ike/imgtag.html
The New Img Tag (evolved)
<img src="large-default-file.jpg" media="screen and (min-width:601px)" alt="this is alternative text for default file" title="this is title for default file">
<source src="smaller.jpg" media="screen and (max-device-width:600px)" alt="this is alternative text for smaller file" title="this is title for smaller file">
<source src="tiny.jpg" media="screen and (max-device-width:320px)" alt="this is alternative text for tiny file" title="this is title for tiny file">
<source src="monochrome.jpg" media="monochrome" alt="this is alternative text for monochrome file" title="this is title for monochrome file">
</img>