webtoolkit.info » Experiments

Scrollable HTML table

admin — Mon, 03 Jan 2011 17:27:56 +0000

Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table.

Scrollable HTML table code tested in IE5.0+, FF1.5+.

DEMO

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Scrollable HTML table</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>
 
	<style>
		table {
			text-align: left;
			font-size: 12px;
			font-family: verdana;
			background: #c0c0c0;
		}
 
		table thead  {
			cursor: pointer;
		}
 
		table thead tr,
		table tfoot tr {
			background: #c0c0c0;
		}
 
		table tbody tr {
			background: #f0f0f0;
		}
 
		td, th {
			border: 1px solid white;
		}
	</style>
</head>
 
<body>
 
<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
	<thead>
		<tr>
			<th class="c1">Name</th>
			<th class="c2">Surename</th>
			<th class="c3">Age</th>
		</tr>
	</thead>
 
	<tbody>
		<tr class="r1">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">30</th>
		</tr>
		<tr class="r2">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">31</th>
		</tr>
		<tr class="r1">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">32</th>
		</tr>
		<tr class="r2">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">33</th>
		</tr>
		<tr class="r1">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">34</th>
		</tr>
		<tr class="r2">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">35</th>
		</tr>
		<tr class="r1">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">36</th>
		</tr>
		<tr class="r2">
			<td class="c1">John</th>
			<td class="c2">Smith</th>
			<td class="c3">37</th>
		</tr>
	</tbody>
 
	<tfoot>
		<tr>
			<th class="c1">Name</th>
			<th class="c2">Surename</th>
			<th class="c3">Age</th>
		</tr>
	</tfoot>
</table>
 
<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 100);
</script>
 
</body>
</html>

Source code for webtoolkit.scrollabletable.js

/**
*
*  Scrollable HTML table
*  http://www.webtoolkit.info/
*
**/
 
function ScrollableTable (tableEl, tableHeight, tableWidth) {
 
	this.initIEengine = function () {
 
		this.containerEl.style.overflowY = 'auto';
		if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
			this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
		} else {
			this.containerEl.style.overflowY = 'hidden';
			this.tableEl.style.width = this.newWidth +'px';
		}
 
		if (this.thead) {
			var trs = this.thead.getElementsByTagName('tr');
			for (x=0; x<trs.length; x++) {
				trs[x].style.position ='relative';
				trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
			}
		}
 
		if (this.tfoot) {
			var trs = this.tfoot.getElementsByTagName('tr');
			for (x=0; x<trs.length; x++) {
				trs[x].style.position ='relative';
				trs[x].style.setExpression("bottom",  "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
			}
		}
 
		eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
	};
 
 
	this.initFFengine = function () {
		this.containerEl.style.overflow = 'hidden';
		this.tableEl.style.width = this.newWidth + 'px';
 
		var headHeight = (this.thead) ? this.thead.clientHeight : 0;
		var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
		var bodyHeight = this.tbody.clientHeight;
		var trs = this.tbody.getElementsByTagName('tr');
		if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
			this.tbody.style.overflow = '-moz-scrollbars-vertical';
			for (x=0; x<trs.length; x++) {
				var tds = trs[x].getElementsByTagName('td');
				tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
			}
		} else {
			this.tbody.style.overflow = '-moz-scrollbars-none';
		}
 
		var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
		this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
 
	};
 
	this.tableEl = tableEl;
	this.scrollWidth = 16;
 
	this.originalHeight = this.tableEl.clientHeight;
	this.originalWidth = this.tableEl.clientWidth;
 
	this.newHeight = parseInt(tableHeight);
	this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;
 
	this.tableEl.style.height = 'auto';
	this.tableEl.removeAttribute('height');
 
	this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
	this.containerEl.appendChild(this.tableEl);
	this.containerEl.style.height = this.newHeight + 'px';
	this.containerEl.style.width = this.newWidth + 'px';
 
 
	var thead = this.tableEl.getElementsByTagName('thead');
	this.thead = (thead[0]) ? thead[0] : null;
 
	var tfoot = this.tableEl.getElementsByTagName('tfoot');
	this.tfoot = (tfoot[0]) ? tfoot[0] : null;
 
	var tbody = this.tableEl.getElementsByTagName('tbody');
	this.tbody = (tbody[0]) ? tbody[0] : null;
 
	if (!this.tbody) return;
 
	if (document.all && document.getElementById && !window.opera) this.initIEengine();
	if (!document.all && document.getElementById && !window.opera) this.initFFengine();
 
 
}

CSS vertical align

admin — Mon, 14 Sep 2009 06:59:27 +0000

In HTML td tag has an attribute named “valign” which can align content vertically. CSS doesnt have such an attribute, so you need to do some magic to achieve such a result. CSS vertical align. Using method described below you will be able to align an element vertically in any height container.

DEMO

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>DEMO: CSS vertical align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
		.v-outer {
			display: table;
			#position: relative;
			overflow: hidden;
			height: 100px;
			background: black;
			color: white;
			width: 100%;
		}
 
			.v-middle {
				display: table-cell;
				#position: absolute;
				#top: 50%;
				vertical-align: middle;
			}
 
				.v-inner {
					#position: relative;
					#top: -50%;
				}
	</style>
</head>
 
<body>
 
	<div class="border v-outer">
	<div class="v-middle">
	<div class="v-inner">
	...content...
	</div>
	</div>
	</div>
 
</body>
</html>

AJAX file upload

admin — Thu, 16 Jul 2009 17:44:17 +0000

Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code.

You need to create a form with file fields you wish to upload and define “onsubmit” event. Look at the example below how to do that.

Tested in IE5.5+, FF1.0+, OP 8.0+

DEMO

Source code for index.html

 
 
 
 
	<script src="webtoolkit.aim.js" type="text/javascript"></script>
	<script type="text/javascript"></script>
 
<form action="index.php" method="post">
 
<div><label>Name:</label>
<input name="form[name]" type="text" /></div>
 
 
<div><label>File:</label>
<input name="form[file]" type="file" /></div>
 
 
<div>
<input type="submit" value="SUBMIT" /></div>
 
</form>
<hr />
 
<div># of submited forms: <span id="nr">0</span></div>
 
 
<div>last submit response (generated by form action - index.php file): 
</div>

Source code for webtoolkit.aim.js

/**
*
*  AJAX IFRAME METHOD (AIM)
*  http://www.webtoolkit.info/
*
**/
 
AIM = {
 
	frame : function(c) {
 
		var n = 'f' + Math.floor(Math.random() * 99999);
		var d = document.createElement('DIV');
		d.innerHTML = '';
		document.body.appendChild(d);
 
		var i = document.getElementById(n);
		if (c &amp;&amp; typeof(c.onComplete) == 'function') {
			i.onComplete = c.onComplete;
		}
 
		return n;
	},
 
	form : function(f, name) {
		f.setAttribute('target', name);
	},
 
	submit : function(f, c) {
		AIM.form(f, AIM.frame(c));
		if (c &amp;&amp; typeof(c.onStart) == 'function') {
			return c.onStart();
		} else {
			return true;
		}
	},
 
	loaded : function(id) {
		var i = document.getElementById(id);
		if (i.contentDocument) {
			var d = i.contentDocument;
		} else if (i.contentWindow) {
			var d = i.contentWindow.document;
		} else {
			var d = window.frames[id].document;
		}
		if (d.location.href == "about:blank") {
			return;
		}
 
		if (typeof(i.onComplete) == 'function') {
			i.onComplete(d.body.innerHTML);
		}
	}
 
}

Source code for index.php

print_r($_REQUEST['form']);

Javascript pie menu

admin — Thu, 18 Jun 2009 18:39:52 +0000

This script allows you to build a pie menu. It uses unordered lists (

DEMO

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>My project</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="webtoolkit.piemenu.js"></script>
    <script type="text/javascript">
    PieContextMenu.attach('container', 'menu1');
    </script>
</head>
<body>
 
    <ul id="menu1" class="PieContextMenu" style="display: none;">
        <li><a href="#"><img src="icon1.gif" alt="" /></a></li>
        <li><a href="#"><img src="icon2.gif" alt="" /></a></li>
        <li><a href="#"><img src="icon3.gif" alt="" /></a></li>
        <li><a href="#"><img src="icon4.gif" alt="" /></a></li>
        <li><a href="#"><img src="icon5.gif" alt="" /></a></li>
        <li><a href="#"><img src="icon6.gif" alt="" /></a></li>
        <li><a href="#"><img src="icon7.gif" alt="" /></a></li>
    </ul>
 
    <div class="container">Cointainer1</div>
 
</body>
</html>

Source code for webtoolkit.piemenu.js

/**
*
*  Javascript pie menu
*  http://www.webtoolkit.info/
*
**/
 
var PieContextMenu = {
 
	// private properties.
	itemWidth : 34,
	itemHeight : 34,
	menuClassName : 'PieContextMenu',
	menus : new Array,
	menuElement : null,
	menuElementId : null,
 
	// private properties. Browser detect. Do not touch! :)
	IE : ( document.all && document.getElementById && !window.opera ),
	FF : (!document.all && document.getElementById && !window.opera),
 
 
	// private method. Initialize
	init : function () {
 
		if ( PieContextMenu.FF ) {
			document.addEventListener("DOMContentLoaded", PieContextMenu.domReady, false);
		}
 
		if ( PieContextMenu.IE ) {
 
			document.write(" + "ipt id=__ieinit_PieContextMenu defer=true " +
				"src=//:><\/script>");
 
			var script = document.getElementById("__ieinit_PieContextMenu");
			script.onreadystatechange = function() {
				if ( this.readyState != "complete" ) return;
				this.parentNode.removeChild( this );
				PieContextMenu.domReady();
			};
 
			script = null;
		}
 
	},
 
 
	// private method. Initialize all menus.
	domReady : function () {
 
		var menus = document.body.getElementsByTagName('ul');
 
		for(var i = 0; i < menus.length; i++) {
			var className = menus[i].className.replace(/^\s+/g, "").replace(/\s+$/g, "");
			var classArray = className.split(/[ ]+/g);
 
			for (var k = 0; k < classArray.length; k++) {
				if (classArray[k] == PieContextMenu.menuClassName && menus[i].id) {
					PieContextMenu.initMenu(menus[i].id);
				}
			}
		}
 
		PieContextMenu.initEvents();
 
	},
 
 
	// private method.
	initMenu : function (menuId) {
 
		var list = document.getElementById(menuId);
		list.style.position = "absolute";
		list.style.margin = "0px";
		list.style.padding = "0px";
		list.style.listStyleType = "none";
 
		var items = list.getElementsByTagName('li');
		var images = list.getElementsByTagName('img');
 
		for(var i=0; i<images.length; i++) {
			images[i].style.border = "0px";
			if (document.all && document.getElementById && !window.opera) {
				images[i].style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icon-bg.png", sizingMethod="crop")';
			} else {
				images[i].style.background = "url(icon-bg.png)";
			}
		}
 
		var step = (2.0 * Math.PI) / (1.0 * (items.length));
		var rotation = (90 / 180) * Math.PI;
		var radius = Math.sqrt(this.itemWidth) * Math.sqrt(items.length) * 2.5;
 
		for(var i=0; i<items.length; i++) {
			var x = Math.cos(i*step - rotation) * radius - (this.itemWidth / 2);
			var y = Math.sin(i*step - rotation) * radius - (this.itemHeight / 2);
			items[i].style.position = "absolute";
			items[i].style.display = "block";
			items[i].style.fontSize = "0px";
			items[i].style.left = Math.round(x) + "px";
			items[i].style.top = Math.round(y) + "px";
		}
 
	},
 
 
	// public method. Attaches context menus to specific class names
	attach : function (classNames, menuId) {
 
		if (typeof(classNames) == "string") {
			PieContextMenu.menus[classNames] = menuId;
		}
 
		if (typeof(classNames) == "object") {
			for (x = 0; x < classNames.length; x++) {
				PieContextMenu.menus[classNames[x]] = menuId;
			}
		}
 
	},
 
 
	// public method. Sets up events
	initEvents : function () {
 
		if ( PieContextMenu.IE || PieContextMenu.FF ) {
 
			document.oncontextmenu = PieContextMenu.show;
			document.onclick = PieContextMenu.hide;
 
		}
 
	},
 
 
	// private method. Shows context menu
	show : function (e) {
 
		PieContextMenu.hide();
		var menuElementId = PieContextMenu.getMenuElementId(e);
 
		if (menuElementId) {
			var m = PieContextMenu.getMousePosition(e);
			var s = PieContextMenu.getScrollPosition(e);
			PieContextMenu.menuElement = document.getElementById(menuElementId);
			PieContextMenu.menuElement.style.left = m.x + s.x + 'px';
			PieContextMenu.menuElement.style.top = m.y + s.y + 'px';
			PieContextMenu.menuElement.style.display = 'block';
			return false;
		}
 
		return false;
 
	},
 
 
	// private method. Hides context menu
	hide : function () {
 
		if (PieContextMenu.menuElement) {
			PieContextMenu.menuElement.style.display = 'none';
			PieContextMenu.menuElement = null;
		}
 
	},
 
 
	// private method. Get which context menu to show
	getMenuElementId : function (e) {
 
		if (PieContextMenu.IE) {
			PieContextMenu.attachedElement = event.srcElement;
		} else {
			PieContextMenu.attachedElement = e.target;
		}
 
		while(PieContextMenu.attachedElement != null) {
			var className = PieContextMenu.attachedElement.className;
 
			if (typeof(className) != "undefined") {
				className = className.replace(/^\s+/g, "").replace(/\s+$/g, "")
				var classArray = className.split(/[ ]+/g);
 
				for (i = 0; i < classArray.length; i++) {
					if (PieContextMenu.menus[classArray[i]]) {
						return PieContextMenu.menus[classArray[i]];
					}
				}
			}
 
			if (PieContextMenu.IE) {
				PieContextMenu.attachedElement = PieContextMenu.attachedElement.parentElement;
			} else {
				PieContextMenu.attachedElement = PieContextMenu.attachedElement.parentNode;
			}
		}
 
		return null;
 
	},
 
 
	// private method. Returns mouse position
	getMousePosition : function (e) {
 
		e = e ? e : window.event;
		var position = {
			'x' : e.clientX,
			'y' : e.clientY
		}
 
		return position;
 
	},
 
 
	// private method. Get document scroll position
	getScrollPosition : function () {
 
		var x = 0;
		var y = 0;
 
		if( typeof( window.pageYOffset ) == 'number' ) {
			x = window.pageXOffset;
			y = window.pageYOffset;
		} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
			x = document.documentElement.scrollLeft;
			y = document.documentElement.scrollTop;
		} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
			x = document.body.scrollLeft;
			y = document.body.scrollTop;
		}
 
		var position = {
			'x' : x,
			'y' : y
		}
 
		return position;
 
	}
 
}
 
PieContextMenu.init();

Javascript custom cursor

admin — Thu, 18 Jun 2009 18:32:06 +0000

This script will add a fancy custom crosshair mouse cursor to your website. You can modify this custom mouse cursor script anyway you want to add functionality and special effects. You can even change the shape and color of the mouse cursor by changing the image (skin) file.

Skins

DEMO

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>My project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="webtoolkit.cursor.js"></script>
</head>
<body>
 
</body>
</html>

Example how to remove gaps

/**
*
*  skinable crossbrowser cursor
*  http://www.webtoolkit.info/
*
**/
 
var skinableCursor = {
 
 
	// public property. Skin path. You can change this one.
	skinPath : 'skin.gif',
 
 
	// private properties. Browser detect. Do not touch! :)
	IE : ( document.all && document.getElementById && !window.opera ),
	FF : (!document.all && document.getElementById && !window.opera),
	OP : (document.all && document.getElementById && window.opera),
 
 
	// private properties. Cursor attributes. Do not touch! :)
	cursor : {
		lt : { x : '0px',	y : '0px',	w : '19px',	h : '26px' ,	dx : -22,	dy : -22 },
		rt : { x : '19px',	y : '0px',	w : '26px',	h : '19px' ,	dx : -3,	dy : -22 },
		rb : { x : '26px',	y : '19px',	w : '19px',	h : '26px' ,	dx : 4,		dy : -3 },
		lb : { x : '0px',	y : '26px',	w : '26px',	h : '19px' ,	dx : -22,	dy : 4 }
	},
 
 
	// private method. Initialize
	init : function () {
 
		skinableCursor.cursor.browserDelta = (skinableCursor.IE ? 2 : 0);
 
		if ( skinableCursor.FF || skinableCursor.OP ) {
			document.addEventListener("DOMContentLoaded", skinableCursor.domReady, false);
		}
 
		if ( skinableCursor.IE ) {
 
			document.write(" + "ipt id=__ieinit defer=true " +
				"src=//:><\/script>");
 
			var script = document.getElementById("__ieinit");
			script.onreadystatechange = function() {
				if ( this.readyState != "complete" ) return;
				this.parentNode.removeChild( this );
				skinableCursor.domReady();
			};
 
			script = null;
		}
	},
 
 
	// private method.
	domReady : function () {
 
		skinableCursor.create();
 
		if ( skinableCursor.FF || skinableCursor.OP ) {
			var s = document.createElement('style');
			s.innerHTML = '* { cursor: inherit; } html { height: 100%; } body, html { cursor: crosshair; }';
			document.body.appendChild(s);
			document.addEventListener('mousemove', skinableCursor.move, false);
		}
 
		if ( skinableCursor.IE ) {
			var s = document.createStyleSheet()
			s.addRule("*", "cursor: inherit");
			s.addRule("body", "cursor: crosshair");
			s.addRule("html", "cursor: crosshair");
			document.attachEvent('onmousemove', skinableCursor.move);
		}
 
		var anchors = document.getElementsByTagName('a');
		for (x = 0; x < anchors.length; x++) {
			if ( skinableCursor.FF || skinableCursor.OP ) {
				anchors[x].addEventListener('mousemove', skinableCursor.events.anchor, false);
				anchors[x].addEventListener('mouseout', skinableCursor.events.show, false);
			}
 
			if ( skinableCursor.IE ) {
				anchors[x].attachEvent('onmousemove', skinableCursor.events.anchor);
				anchors[x].attachEvent('onmouseout', skinableCursor.events.show);
			}
		}
 
	},
 
 
	// private method. Create cursor
	create : function () {
 
		function create(el, d) {
			el.style.position = 'absolute';
			el.style.overflow = 'hidden';
			el.style.display = 'none';
			el.style.left = d.x;
			el.style.top = d.y;
			el.style.width = d.w;
			el.style.height = d.h;
			if ( skinableCursor.IE ) {
				el.innerHTML = ' + skinableCursor.skinPath + '" style="margin: -' + d.y + ' 0px 0px -' + d.x + '">';
			} else {
				el.style.background = 'url(' + skinableCursor.skinPath + ') -' + d.x + ' -' + d.y;
			}
			return el;
		}
 
		var c = skinableCursor.cursor;
		c.lt.el = create(document.createElement('div'), c.lt);
		c.rt.el = create(document.createElement('div'), c.rt);
		c.rb.el = create(document.createElement('div'), c.rb);
		c.lb.el = create(document.createElement('div'), c.lb);
 
		document.body.appendChild(c.lt.el);
		document.body.appendChild(c.rt.el);
		document.body.appendChild(c.rb.el);
		document.body.appendChild(c.lb.el);
 
	},
 
 
	// private method. Move cursor
	move : function (e) {
 
		function pos(el, x, y) {
			el.el.style.left = x + el.dx + 'px';
			el.el.style.top = y + el.dy + 'px';
		}
 
		function hide(el, x, y) {
			var w = document.documentElement.clientWidth;
			var h = document.documentElement.clientHeight;
			var deltaX = w - (x + el.dx + parseInt(el.w) - skinableCursor.cursor.browserDelta);
			var deltaY = h - (y + el.dy + parseInt(el.h) - skinableCursor.cursor.browserDelta);
			if (!skinableCursor.noSkin) {
				el.el.style.display = deltaX > 0 ? (deltaY > 0 ? 'block' : 'none') : 'none';
			}
		}
 
		var p = skinableCursor.getMousePosition(e);
		var s = skinableCursor.getScrollPosition();
		var c = skinableCursor.cursor;
		var x = p.x + s.x - c.browserDelta;
		var y = p.y + s.y - c.browserDelta;
 
		hide(c.lt, p.x, p.y);
		hide(c.rt, p.x, p.y);
		hide(c.rb, p.x, p.y);
		hide(c.lb, p.x, p.y);
 
		pos(c.lt, x, y);
		pos(c.rt, x, y);
		pos(c.rb, x, y);
		pos(c.lb, x, y);
 
	},
 
 
	// private method. Returns mouse position
	getMousePosition : function (e) {
 
		e = e ? e : window.event;
		var position = {
			'x' : e.clientX,
			'y' : e.clientY
		}
 
		return position;
 
	},
 
 
	// private method. Get document scroll position
	getScrollPosition : function () {
 
		var x = 0;
		var y = 0;
 
		if( typeof( window.pageYOffset ) == 'number' ) {
			x = window.pageXOffset;
			y = window.pageYOffset;
		} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
			x = document.documentElement.scrollLeft;
			y = document.documentElement.scrollTop;
		} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
			x = document.body.scrollLeft;
			y = document.body.scrollTop;
		}
 
		var position = {
			'x' : x,
			'y' : y
		}
 
		return position;
 
	},
 
 
	// private property / methods.
	events : {
 
		anchor : function (e) {
			skinableCursor.noSkin = true;
			document.body.style.cursor = 'pointer';
 
			var c = skinableCursor.cursor;
			c.lt.el.style.display = 'none';
			c.rt.el.style.display = 'none';
			c.rb.el.style.display = 'none';
			c.lb.el.style.display = 'none';
 
		},
 
		show : function () {
			skinableCursor.noSkin = false;
			document.body.style.cursor = 'crosshair';
		}
 
	}
 
}
 
skinableCursor.init();

Dynamic favicon

admin — Thu, 18 Jun 2009 18:10:42 +0000

Wikipedia quote: “A favicon (short for “favorites icon”), also known as a page icon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many graphical web browsers—such as recent versions of Internet Explorer, Firefox, Mozilla, Opera, Safari, iCab, AOL Explorer, Epiphany, Konqueror, and Flock—can then make use of them.”

Here, you will learn a method how to change page favicon dynamically while the page is already loaded. This method is supported by FF 1.0+ and OP 8.0+ no exploder though :(

DEMO

Source code for webtoolkit.favicon.js

/**
*
*  Dynamic favicon
*  http://www.webtoolkit.info/
*
**/
 
var DynFavIco = {
 
	// private properties. Browser detect. Do not touch! :)
	IE : ( document.all && document.getElementById && !window.opera ),
	FF : (!document.all && document.getElementById && !window.opera ),
	el : null,
 
	// private method.
	init : function () {
 
		if ( DynFavIco.FF ) {
			document.addEventListener("DOMContentLoaded", DynFavIco.domReady, false);
		} else {
			if ( DynFavIco.IE ) {
 
				document.write(" + "ipt id=__ieinit_DynFavIco defer=true " +
					"src=//:><\/script>");
 
				var script = document.getElementById("__ieinit_DynFavIco");
				script.onreadystatechange = function() {
					if ( this.readyState != "complete" ) return;
					this.parentNode.removeChild( this );
					DynFavIco.domReady();
				};
 
				script = null;
			} else {
				window.onload = DynFavIco.domReady;
			}
		}
 
	},
 
 
	// private method.
	domReady : function () {
 
		DynFavIco.el = document.createElement('span');
		DynFavIco.el.style.display = 'none';
		document.body.appendChild(DynFavIco.el);
 
	},
 
 
	// public method.
	change : function (icon) {
 
		DynFavIco.el.innerHTML = '+icon+'">';
 
	}
 
}
 
DynFavIco.init();

Scrollable HTML table plugin for jQuery

admin — Thu, 18 Jun 2009 17:35:26 +0000

This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section.

Include the webtoolkit.scrollabletable.js, latest jquery.js library, and webtoolkit.jscrollable.js jQuery plugin for scrollable tables.

DEMO

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Scrollable HTML table plugin for jQuery</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="webtoolkit.jscrollable.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			jQuery('table').Scrollable(200, 800);
		});
 	</script>
 
	<style>
		table {
			text-align: left;
			font-size: 12px;
			font-family: verdana;
			background: #c0c0c0;
		}
 
		table thead tr,
		table tfoot tr {
			background: #c0c0c0;
		}
 
		table tbody tr {
			background: #f0f0f0;
		}
 
		td, th {
			border: 1px solid white;
		}
	</style>
</head>
 
<body>
 
<table cellspacing="1">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Sex</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Sex</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
		<tr>
			<td>Student04</td>
			<td>Languages</td>
			<td>male</td>
			<td>60</td>
			<td>55</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Student05</td>
			<td>Languages</td>
			<td>female</td>
			<td>68</td>
			<td>80</td>
			<td>95</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student06</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>100</td>
			<td>99</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student07</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>85</td>
			<td>68</td>
			<td>90</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student08</td>
			<td>Languages</td>
			<td>male</td>
			<td>100</td>
			<td>90</td>
			<td>90</td>
			<td>85</td>
		</tr>
		<tr>
			<td>Student09</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>80</td>
			<td>50</td>
			<td>65</td>
			<td>75</td>
		</tr>
		<tr>
			<td>Student10</td>
			<td>Languages</td>
			<td>male</td>
			<td>85</td>
			<td>100</td>
			<td>100</td>
			<td>90</td>
		</tr>
		<tr>
			<td>Student11</td>
			<td>Languages</td>
			<td>male</td>
			<td>86</td>
			<td>85</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Student12</td>
			<td>Mathematics</td>
			<td>female</td>
			<td>100</td>
			<td>75</td>
			<td>70</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
 
</body>
</html>

Source code for webtoolkit.jscrollable.js

/**
*
*  Scrollable HTML table plugin for jQuery
*  http://www.webtoolkit.info/
*
**/
 
jQuery.fn.Scrollable = function(tableHeight, tableWidth) {
	this.each(function(){
		if (jQuery.browser.msie || jQuery.browser.mozilla) {
			var table = new ScrollableTable(this, tableHeight, tableWidth);
		}
	});
};

CSS drop shadow

admin — Thu, 18 Jun 2009 17:22:25 +0000

Technique to build flexible CSS drop shadows applied to arbitrary block elements. Most of the existing techniques for creating element shadows use images, this one doesn’t. IT uses plain simple CSS. Have a look below.

First include the style sheet at the top of your code. Do it in tag, then you can write your code.

DEMO

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>My project</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.shadow.css" />
 
	<style>
		body {
			margin: 0px;
			padding: 20px;
			font-family: verdana;
			font-size: 12px;
		}
	</style>
 
</head>
 
<body>
 
	<div id="shadow-container">
		<div class="shadow1">
			<div class="shadow2">
				<div class="shadow3">
					<div class="container">
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</div>
				</div>
			</div>
		</div>
	</div>
 
</body>
</html>

Source code for webtoolkit.shadow.css

#shadow-container {
	position: relative;
	left: 3px;
	top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
}
 
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
	position: relative;
	left: -1px;
	top: -1px;
}
 
	#shadow-container .shadow1 {
		background: #F1F0F1;
	}
 
	#shadow-container .shadow2 {
		background: #DBDADB;
	}
 
	#shadow-container .shadow3 {
		background: #B8B6B8;
	}
 
	#shadow-container .container {
		background: #ffffff;
		border: 1px solid #848284;
		padding: 10px;
	}

CSS rounded buttons

admin — Thu, 18 Jun 2009 15:26:38 +0000

This technique is simple and effective way to have buttons with nice rounded edges using plain CSS without any Javascript usage.

This method was tested on these common browsers:

Internet Explorer
Mozilla Firefox
Opera
Safary
Google Chrome

DEMO

Download full example with images here.

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>My project</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.rbuttons.css" />
</head>
 
<body>
 
	<a class="rbutton red" href="http://www.webtoolkit.info/"><span>Red</span></a>
	<a class="rbutton green" href="http://www.webtoolkit.info/"><span>Green</span></a>
	<a class="rbutton blue" href="http://www.webtoolkit.info/"><span>Blue</span></a>
 
</body>
</html>

Source code for webtoolkit.shadow.css

/* do not change */
.rbutton {
	cursor: pointer;
	display: -moz-inline-box;
	display: inline-block;
	padding-left: 5px;
	padding-bottom: 1px;
	line-height: 19px;
	background-position: lef top;
	background-repeat: no-repeat;
}
 
	.rbutton span {
		padding-left: 10px;
		display: -moz-inline-box;
		display: inline-block;
		padding-right: 15px;
		padding-bottom: 1px;
		line-height: 19px;
		background-position: right top;
		background-repeat: no-repeat;
	}
 
/* skin */
.red {
	background-image: url(buttons/red-left.gif);
}
	.red span {
		background-image: url(buttons/red-right.gif);
	}
 
.green {
	background-image: url(buttons/green-left.gif);
}
	.green span {
		background-image: url(buttons/green-right.gif);
	}
 
.blue {
	background-image: url(buttons/blue-left.gif);
}
	.blue span {
		background-image: url(buttons/blue-right.gif);
	}
 
/* font size and family */
.rbutton {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
}

PHP AdSense account monitor

admin — Thu, 18 Jun 2009 07:16:55 +0000

PHP AdSense account monitor class, can retrieve data from your AdSense account (impressions, clicks, ctr, ecpm, earnings).

This class can retrieve (for now) only “AdSense for Content” data, for different periods of time (see class methods for more details). You can implement this PHP class in your own applications.

Note: this code is absolete. Check new project at http://code.google.com/p/php-adsense-account-library/

Source code for AdSense.php


 
/**
 * PHP class ment to collect AdSense account data
 * It can return various data for different periods of time
 *
 * @copyright	Copyright © 2007
 * @package		AdSense
 */
class AdSense {
 
 
	/**
	 * Stores curl connection handle
	 *
	 * @var resource
	 */
	var $curl = null;
 
 
	/**
	 * Stores TMP folder path
	 * This folder must be writeble
	 *
	 * @var string
	 */
	var $tmpPath = '/tmp';
 
 
	/**
	 * AdSense::AdSense()
	 * AdSense class constructor
	 */
	function AdSense(){
		$this->coockieFile = tempnam($this->tmpPath, 'cookie');
 
		$this->curl = curl_init();
		curl_setopt($this->curl, CURLOPT_HEADER, false);
		curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, true);
		curl_setopt($this->curl, CURLOPT_SSL_VERIFYPEER, false);
		curl_setopt($this->curl, CURLOPT_SSL_VERIFYHOST, false);
		curl_setopt($this->curl, CURLOPT_FOLLOWLOCATION, true);
		curl_setopt($this->curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
		curl_setopt($this->curl, CURLOPT_COOKIEFILE, $cookieFile);
		curl_setopt($this->curl, CURLOPT_COOKIEJAR, $cookieFile);
 
		register_shutdown_function(array(&$this, '__destructor'));
	}
 
 
	/**
	 * AdSense::__destructor()
	 * AdSense class destructor
	 */
	function __destructor(){
		@curl_close($this->curl);
		@unlink($this->coockieFile);
	}
 
 
	/**
	 * AdSense::connect()
	 * Connects to AdSense account using supplied credentials
	 * Returns true on unsuccessful connection, false otherwise
	 *
	 * @param string $username AdSense username
	 * @param string $password AdSense password
	 * @return boolean
	 */
	function connect($username, $password){
		// phase 1
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/accounts/ServiceLoginAuth?service=adsense&hl=en-US<mpl=login&ifr=true&passive=true&rm=hide&nui=3&alwf=true&continue=https%3A%2F%2Fwww.google.com%2Fadsense%2Fgaiaauth&followup=https%3A%2F%2Fwww.google.com%2Fadsense%2Fgaiaauth");
		preg_match_all('', curl_exec($this->curl), $out);
		$params = array();
		foreach($out[1] as $key=>$name) { $params[] = $name . '=' . urlencode($out[2][$key]); }
		$params[] = 'Email=' . urlencode($username);
		$params[] = 'Passwd=' . urlencode($password);
		$params[] = 'null=' . urlencode('Sign in');
 
		// phase 2
		curl_setopt($this->curl, CURLOPT_POST, true);
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/accounts/ServiceLoginAuth");
		curl_setopt($this->curl, CURLOPT_POSTFIELDS, join('&', $params));
		preg_match("/.*\"_top\" href=\"(.*)\" style.*/", curl_exec($this->curl), $matches);
 
		// phase 3
		curl_setopt($this->curl, CURLOPT_POST, false);
		curl_setopt($this->curl, CURLOPT_URL, $matches[1]);
 
		// did we login ?
		if (eregi("Log out",  curl_exec($this->curl))) {
			return true;
		} else {
			return false;
		};
	}
 
 
	/**
	 * AdSense::parse()
	 * Parses AdSense page and gets all stats
	 * Returns associative array with collected data
	 *
	 * @param string $content AdSense page content
	 * @return array
	 */
	function parse($content){
		preg_match_all('/(.*?)<\/td>/', $content, $matches);
		return array(
			"impressions" => $matches[1][0],
			"clicks" => $matches[1][1],
			"ctr" => $matches[1][2],
			"ecpm" => $matches[1][3],
			"earnings" => $matches[1][4]
		);
 
	}
 
 
	/**
	 * AdSense::today()
	 * Gets AdSense data for the period: today
	 * Returns associative array with collected data
	 *
	 * @return array
	 */
	function today(){
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/adsense/report/overview?timePeriod=today");
		return $this->parse(curl_exec($this->curl));
	}
 
 
	/**
	 * AdSense::yesterday()
	 * Gets AdSense data for the period: yesterday
	 * Returns associative array with collected data
	 *
	 * @return array
	 */
	function yesterday(){
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/adsense/report/overview?timePeriod=yesterday");
		return $this->parse(curl_exec($this->curl));
	}
 
 
	/**
	 * AdSense::last7days()
	 * Gets AdSense data for the period: last7days
	 * Returns associative array with collected data
	 *
	 * @return array
	 */
	function last7days(){
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/adsense/report/overview?timePeriod=last7days");
		return $this->parse(curl_exec($this->curl));
	}
 
 
	/**
	 * AdSense::lastmonth()
	 * Gets AdSense data for the period: lastmonth
	 * Returns associative array with collected data
	 *
	 * @return array
	 */
	function lastmonth(){
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/adsense/report/overview?timePeriod=lastmonth");
		return $this->parse(curl_exec($this->curl));
	}
 
 
	/**
	 * AdSense::thismonth()
	 * Gets AdSense data for the period: thismonth
	 * Returns associative array with collected data
	 *
	 * @return array
	 */
	function thismonth(){
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/adsense/report/overview?timePeriod=thismonth");
		return $this->parse(curl_exec($this->curl));
	}
 
 
	/**
	 * AdSense::sincelastpayment()
	 * Gets AdSense data for the period: sincelastpayment
	 * Returns associative array with collected data
	 *
	 * @return array
	 */
	function sincelastpayment(){
		curl_setopt($this->curl, CURLOPT_URL, "https://www.google.com/adsense/report/overview?timePeriod=sincelastpayment");
		return $this->parse(curl_exec($this->curl));
	}
 
}
 
?>

Source code for example.php


 
include('AdSense.php');
 
$adsense = new AdSense();
if ($adsense->connect('username', 'password')) {
	$data = $adsense->sincelastpayment();
} else {
	die('Could not login to AdSense account.');
};
 
?>