The post Scrollable HTML table appeared first on webtoolkit.info.
]]>Scrollable HTML table code tested in IE5.0+, FF1.5+.
Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="/experiments/feed/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();
}
The post Scrollable HTML table appeared first on webtoolkit.info.
]]>The post CSS vertical align appeared first on webtoolkit.info.
]]>Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
The post CSS vertical align appeared first on webtoolkit.info.
]]>The post AJAX file upload appeared first on webtoolkit.info.
]]>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+
Source code for index.html
<script src="/experiments/feed/webtoolkit.aim.js" type="text/javascript"><!--mce:0--></script> <script type="text/javascript"><!--mce:1--></script> <form action="/experiments/feed/index.html" 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 && 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 && 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']);
The post AJAX file upload appeared first on webtoolkit.info.
]]>The post Javascript pie menu appeared first on webtoolkit.info.
]]>Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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="/experiments/feed/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="/experiments/feed/icon1.gif" alt="" /></a></li>
<li><a href="#"><img src="/experiments/feed/icon2.gif" alt="" /></a></li>
<li><a href="#"><img src="/experiments/feed/icon3.gif" alt="" /></a></li>
<li><a href="#"><img src="/experiments/feed/icon4.gif" alt="" /></a></li>
<li><a href="#"><img src="/experiments/feed/icon5.gif" alt="" /></a></li>
<li><a href="#"><img src="/experiments/feed/icon6.gif" alt="" /></a></li>
<li><a href="#"><img src="/experiments/feed/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("<scr" + "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="/experiments/feed/icon_bg.png", sizingMethod="crop")';
} else {
images[i].style.background = "url(/experiments/feed/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();
The post Javascript pie menu appeared first on webtoolkit.info.
]]>The post Javascript custom cursor appeared first on webtoolkit.info.
]]>Skins
Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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="/experiments/feed/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 : '/experiments/feed/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("<scr" + "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 = '<img src="' + 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();
The post Javascript custom cursor appeared first on webtoolkit.info.
]]>The post Dynamic favicon appeared first on webtoolkit.info.
]]>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 :(
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("<scr" + "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 = '<link rel="shortcut icon" href="'+icon+'">';
}
}
DynFavIco.init();
The post Dynamic favicon appeared first on webtoolkit.info.
]]>The post Scrollable HTML table plugin for jQuery appeared first on webtoolkit.info.
]]>Include the webtoolkit.scrollabletable.js, latest jquery.js library, and webtoolkit.jscrollable.js jQuery plugin for scrollable tables.
Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="/experiments/feed/webtoolkit.scrollabletable.js"></script>
<script type="text/javascript" src="/experiments/feed/jquery.js"></script>
<script type="text/javascript" src="/experiments/feed/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);
}
});
};
The post Scrollable HTML table plugin for jQuery appeared first on webtoolkit.info.
]]>The post CSS drop shadow appeared first on webtoolkit.info.
]]>First include the style sheet at the top of your code. Do it in
tag, then you can write your code.Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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="/experiments/feed/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;
}
The post CSS drop shadow appeared first on webtoolkit.info.
]]>The post CSS rounded buttons appeared first on webtoolkit.info.
]]>This method was tested on these common browsers:
- Internet Explorer
- Mozilla Firefox
- Opera
- Safary
- Google Chrome
Download full example with images here.
Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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="/experiments/feed/webtoolkit.rbuttons.css" /> </head> <body> <a class="rbutton red" href="/index.html"><span>Red</span></a> <a class="rbutton green" href="/index.html"><span>Green</span></a> <a class="rbutton blue" href="/index.html"><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(/experiments/feed/buttons/red_left.gif);
}
.red span {
background-image: url(/experiments/feed/buttons/red_right.gif);
}
.green {
background-image: url(/experiments/feed/buttons/green_left.gif);
}
.green span {
background-image: url(/experiments/feed/buttons/green_right.gif);
}
.blue {
background-image: url(/experiments/feed/buttons/blue_left.gif);
}
.blue span {
background-image: url(/experiments/feed/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;
}
The post CSS rounded buttons appeared first on webtoolkit.info.
]]>The post PHP AdSense account monitor appeared first on webtoolkit.info.
]]>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
/**
* 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/index.html';
/**
* 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('<input type="hidden" name="(.*?)" value="(.*?)">', 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("/.*<a target=\"_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 nowrap valign="top" style="text-align:right" class="">(.*?)<\/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
<?php
include('/experiments/feed/AdSense.html');
$adsense = new AdSense();
if ($adsense->connect('username', 'password')) {
$data = $adsense->sincelastpayment();
} else {
die('Could not login to AdSense account.');
};
?>
The post PHP AdSense account monitor appeared first on webtoolkit.info.
]]>