P
pamelafluente
Hi guys,
I have just finished to write the action selector which I will attach
to the cell of my reports to send interaction commands to the ASP.NET
engine. It has been quite painful to put it together, continusly
browsing the answers in the group to understand how to do things, as
this is practically my first javascript. The result, while seems to be
(somehow) working, is ugly indeed.
I'd welcome code or suggestions to make it look better. Here is the
complete code: both html page and JS file. Watch out for possible line
breaks.
// JScript File: DynamicMenu.js
// onclick on the menuItem return coded info on the action
// and on the cell: MenuItem.id + "," + myCell.id
var currentCell;
var mouseIsOnCellorMenu;
var PreviousStyle;
var UserActions=new Array();
UserActions[0]= "DRILL DOWN this value" ;
UserActions[1]= "DRILL DOWN All values";
UserActions[2]= "DRILL DOWN parent value";
UserActions[3]= "DRILL DOWN include next dimension";
UserActions[4]= "ROLL UP this value";
UserActions[5]= "ROLL UP all values";
UserActions[6]= "ROLL UP parent value";
UserActions[7]= "ROLL UP exclude next dimension";
document.onmousedown = mMouseDownOnDoc;
function cellClick(event, myCell) {
currentCell = myCell;
var FormID = document.getElementById("messengerInput");
if (myCell.id != null) {
var flags = myCell.getAttribute("enabledActions");
var Menu = document.getElementById("Menu");
var actionCodes = flags.split(",")
var menuItemContainer =
document.getElementById("menuItemContainer");
menuItemContainer.innerHTML = "";
for ( var i = 0; i < actionCodes.length; i++ ) {
var actionCode = parseInt(actionCodes)
menuItemContainer.innerHTML += "<div id=" + actionCodes
+
" class=menuItemStyle" +
" onmouseover='mOver(this)'
onmouseout='mOut(this)' onclick='mClick(this)'>" +
"   " + UserActions[actionCode] + "
 </div>"
}
if (event == null) event = window.event;
var scrollTop = document.body.scrollTop ?
document.body.scrollTop : document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft ?
document.body.scrollLeft : document.documentElement.scrollLeft;
Menu.style.left = event.clientX + scrollLeft + 'px';
Menu.style.top = event.clientY + scrollTop + 'px';
Menu.style.display = 'block';
}
}
function mOver(MyDiv) {
mouseIsOnCellorMenu = true;
PreviousStyle = MyDiv.style.borderStyle;
MyDiv.style.borderStyle = "double";
}
function mOut(MyDiv) {
mouseIsOnCellorMenu = false;
MyDiv.style.borderStyle = PreviousStyle;
}
function mMouseDownOnDoc() {
if (!mouseIsOnCellorMenu) {
Menu.style.display = 'none';
}
}
function mClick(MyDiv) {
alert("Clicked " + MyDiv.id + "," + currentCell.id );
}
----------------------------------------------------------------------------------------------------------
<!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" >
<head>
<title>Dynamic Menu Demo</title>
<style type="text/css" media="screen">
.menuItemStyle{
background:#FFE4E1;border-width:1px;border-style:inset;font-family:Arial;font-size:11px
}
</style>
</head>
<body id="body" >
<script language="javascript" src="DynamicMenu.js"></script>
<div id="RG1,16,0" enabledActions="0,1,2,3,4,5,6,7" onclick =
"cellClick(event,this)" >
<div style="width: 50px; height: 50px; background-color:green"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>
<br /> <br /> <br />
<div id="RG1,5,0" enabledActions="0,1,2,3" onclick =
"cellClick(event,this)" >
<div style="width: 50px; height: 50px; background-color:red"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>
<!--Container for dynamic menu-->
<div id="Menu" style="position:absolute; display: none" >
<table >
<tr>
<td bgcolor="#cc3366" style="width: 15px" > </td>
<td id="menuItemContainer" ></td>
</tr>
</table>
</div>
</body>
</html>
Thanks.
-Pam
I have just finished to write the action selector which I will attach
to the cell of my reports to send interaction commands to the ASP.NET
engine. It has been quite painful to put it together, continusly
browsing the answers in the group to understand how to do things, as
this is practically my first javascript. The result, while seems to be
(somehow) working, is ugly indeed.
I'd welcome code or suggestions to make it look better. Here is the
complete code: both html page and JS file. Watch out for possible line
breaks.
// JScript File: DynamicMenu.js
// onclick on the menuItem return coded info on the action
// and on the cell: MenuItem.id + "," + myCell.id
var currentCell;
var mouseIsOnCellorMenu;
var PreviousStyle;
var UserActions=new Array();
UserActions[0]= "DRILL DOWN this value" ;
UserActions[1]= "DRILL DOWN All values";
UserActions[2]= "DRILL DOWN parent value";
UserActions[3]= "DRILL DOWN include next dimension";
UserActions[4]= "ROLL UP this value";
UserActions[5]= "ROLL UP all values";
UserActions[6]= "ROLL UP parent value";
UserActions[7]= "ROLL UP exclude next dimension";
document.onmousedown = mMouseDownOnDoc;
function cellClick(event, myCell) {
currentCell = myCell;
var FormID = document.getElementById("messengerInput");
if (myCell.id != null) {
var flags = myCell.getAttribute("enabledActions");
var Menu = document.getElementById("Menu");
var actionCodes = flags.split(",")
var menuItemContainer =
document.getElementById("menuItemContainer");
menuItemContainer.innerHTML = "";
for ( var i = 0; i < actionCodes.length; i++ ) {
var actionCode = parseInt(actionCodes)
menuItemContainer.innerHTML += "<div id=" + actionCodes
+
" class=menuItemStyle" +
" onmouseover='mOver(this)'
onmouseout='mOut(this)' onclick='mClick(this)'>" +
"   " + UserActions[actionCode] + "
 </div>"
}
if (event == null) event = window.event;
var scrollTop = document.body.scrollTop ?
document.body.scrollTop : document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft ?
document.body.scrollLeft : document.documentElement.scrollLeft;
Menu.style.left = event.clientX + scrollLeft + 'px';
Menu.style.top = event.clientY + scrollTop + 'px';
Menu.style.display = 'block';
}
}
function mOver(MyDiv) {
mouseIsOnCellorMenu = true;
PreviousStyle = MyDiv.style.borderStyle;
MyDiv.style.borderStyle = "double";
}
function mOut(MyDiv) {
mouseIsOnCellorMenu = false;
MyDiv.style.borderStyle = PreviousStyle;
}
function mMouseDownOnDoc() {
if (!mouseIsOnCellorMenu) {
Menu.style.display = 'none';
}
}
function mClick(MyDiv) {
alert("Clicked " + MyDiv.id + "," + currentCell.id );
}
----------------------------------------------------------------------------------------------------------
<!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" >
<head>
<title>Dynamic Menu Demo</title>
<style type="text/css" media="screen">
.menuItemStyle{
background:#FFE4E1;border-width:1px;border-style:inset;font-family:Arial;font-size:11px
}
</style>
</head>
<body id="body" >
<script language="javascript" src="DynamicMenu.js"></script>
<div id="RG1,16,0" enabledActions="0,1,2,3,4,5,6,7" onclick =
"cellClick(event,this)" >
<div style="width: 50px; height: 50px; background-color:green"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>
<br /> <br /> <br />
<div id="RG1,5,0" enabledActions="0,1,2,3" onclick =
"cellClick(event,this)" >
<div style="width: 50px; height: 50px; background-color:red"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>
<!--Container for dynamic menu-->
<div id="Menu" style="position:absolute; display: none" >
<table >
<tr>
<td bgcolor="#cc3366" style="width: 15px" > </td>
<td id="menuItemContainer" ></td>
</tr>
</table>
</div>
</body>
</html>
Thanks.
-Pam