Tutorial addEventListner Polyfill

by in , 0 

// addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
	if(win.addEventListener)return;		//No need to polyfill

	function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
	function addEvent(on, fn, self){
		return (self = this).attachEvent('on' + on, function(e){
			var e = e || win.event;
			e.preventDefault  = e.preventDefault  || function(){e.returnValue = false}
			e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
			fn.call(self, e);
		});
	}
	function addListen(obj, i){
		if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
		else obj.addEventListener = addEvent;
		return obj;
	}

	addListen([doc, win]);
	if('Element' in win)win.Element.prototype.addEventListener = addEvent;			//IE8
	else{																			//IE < 8
		doc.attachEvent('onreadystatechange', function(){addListen(doc.all)});		//Make sure we also init at domReady
		docHijack('getElementsByTagName');
		docHijack('getElementById');
		docHijack('createElement');
		addListen(doc.all);	
	}
})(window, document);

Reference URL

Tutorial addClass Function

by in , 0

If you are going library-free, you might need to roll your own function like this.

function addClass(id,new_class){
       var i,n=0;

       new_class=new_class.split(",");

       for(i=0;i<new_class.length;i++){
               if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
                       document.getElementById(id).className+=" "+new_class[i];
                       n++;
               }
       }

       return n;
}

Usage

<div id="changeme" class="big red"></div>
<button >Add a class</button>

Reference URL

Tutorial Add To Favorites (IE)

by in , 0 

<a href="http://site.com" >Add Favorite and Go-To-There</a>

The first param to AddFavorite is the URL, the second the text to offer up for saving. So this inline JavaScript is reusable in the sense that it will pull those values dynamically from the anchor link itself.

Tutorial Add Data Attribute of User Agent

by in , 0 

var b = document.documentElement;
b.className = b.className.replace('no-js','js');
b.setAttribute("data-useragent",  navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );

Which results in data attributes being added to the html element like:

<html 
	data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)"
	data-platform="Win32">
	...

Which allows you to be able to target very specific browsers on very specific platforms with CSS:

html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
  ...
}

Reference URL

Tutorial 1024×768 Bookmarklet

by in , 0

The days of 800x600 screens are all but over, but most of us still try to accommodate 1024px wide screens. Hence the popularity of "960" width sites. This bookmarklet will resize the current browser window to that width and height. You know, so us web designers with giant monitors can see what it's like to be slummin' with a 1024 screen. Also, to see "the fold", if such a concept even matters anymore.

javascript:resizeTo(1024,768)

The Bookmarklet

1024x768   < Drag to bookmarks bar

This doesn't seem to work at all anymore (tested in stable version of Chrome and Firefox, April 2013). It used to work only when the window was by itself, not when multiple tabs were open, but now that doesn't work anymore either.

There is some kind of way to do it, since I still regularly see resized popups, so feel free to chime in the comments if you know more.

Tutorial “Go Back” Button

by in , 0

Browsers already have "back" buttons, so you'd better have a darn good reason for needing to put one on your page!

Input button with inline JavaScript

<input type="button" value="Go Back From Whence You Came!"  />

This is totally obtrusive, but you could fix that by only appending this button through JavaScript.

PHP

If JavaScript isn't a possibility, you could use the HTTP_REFERER, sanitize it, and echo it out via PHP.

<?php
  $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
  echo "<a href='$url'>back</a>"; 
?>

Reference URL

Tutorial Zero Padded Numbers

by in , 0 

function getZeroPaddedNumber($value, $padding) {
       return str_pad($value, $padding, "0", STR_PAD_LEFT);
}

Usage

echo getZeroPaddedNumber(123, 4);
// outputs "0123"