Overview
Read: AJAX file upload
Read: CSS shadows without images
This script allows you to build a pie menu. It uses unordered lists (<ul>) to define a menu, which means that not only is it easy to configure, but it will 'gracefully degrade' in older browsers!
Javascript pie menu demo page
View the demo page for this article
View the demo page for this article
Source code for index.html (Download source code)
<!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="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 (Download source code)
/**
*
* 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="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();
Advertise on this website