If anyone is interested, I'm attaching the code I created for this. It can be used in three ways -- to load and animate an existing message widget defined in the page, to animate a dynamic widget driven from your RPG code, and to animate a dynamic widget driven by JavaScript only. There is also a couple of CSS definitions that go with it. Lastly, jQuery™ is required for the fade animation effects.
NOTE: "wob" is the name of our Genie skin so you can change that part to what you want.
To use the dynamic widget driven from your RPG code, you can use something similar to the following in your screen "onload" event -- which this code uses txtMessage as a hidden text box bound to your RPG.
Code: Select all
wob.displayMessageText(null, getObj("txtMessage"), 0, 'center');
To use the dynamic widget driven by JavaScript only, the following is an example using the grid onrowclick event. In my case, the function I call here is one which counts the currently selected grid rows and if more than one is selected the dynamic message function is called.
Code: Select all
window.setTimeout(function()
{
var cnt = wob.countGridRowSelections("ACLKUV1S", "*IN30");
if (cnt > 1)
{
changeElementValue("txtMessage", cnt + " selections active.");
wob.displayMessageText(null, getObj("txtMessage"), 0, "mouse", event);
}
}, 100);
These are the CSS definitions:
Code: Select all
.dropShadow {
-moz-box-shadow: 5px 5px 3px #333;
-webkit-box-shadow: 5px 5px 3px #333;
box-shadow: 5px 5px 3px #333;
}
#dynoInfoBox {
background: no-repeat white;
border: 3px solid green;
border-radius: 3px;
color: black;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px 10px 5px 10px; /* top, left, bottom, right */
z-index: 200;
}
These are all the functions required:
Code: Select all
/* ================================================================================
displayMessageText() sets the value of a widget to the specified message text,
makes the widget visible, and then fades the widget to
invisibility -- ready for the next go-round. If you do
NOT want a fade effect, specify -1 for the fade duration.
Optionally, the first parm can be supplied as null and
this causes a dynamic message box to be built, displayed,
and faded automatically. The position and event parms
apply only to this dynamic message box; where: position
can be specified as 'center', 'top', 'bottom', 'left',
or 'right'. Alternatively, if there is an associated
mouse event, then position may be specified as 'mouse'
to align the popup message with the mouse at the time
the mouse event occurred. Supply the event object parm
in this case.
*/
wob.displayMessageText = function(widgetId, msgSource, fadeDuration, position, event)
{
var messageText = get(msgSource.id); // get any message text
changeElementValue(msgSource.id, ""); // clear any message text
if (messageText <= " ") return; // if no message text, then exit
var fadeDefault = 2000 + (Math.ceil((messageText.split(/\s+/)).length / 2) * 1000);
fadeDuration = (fadeDuration) ? fadeDuration : fadeDefault; // set default if missing
if (widgetId) // if Profound widget identified
{
changeElementValue(widgetId, messageText); // set value of widget
applyProperty(widgetId, "visibility", "visible"); // show the widget
$("#"+widgetId).fadeIn(0); // jQuery method to show object
if (fadeDuration > 0) // if fade out requested
{
$("#"+widgetId).fadeOut(fadeDuration); // jQuery method to fade object
}
}
else // else, create dynamic widget
{
fadeDuration = (fadeDuration > 0) ? fadeDuration : fadeDefault; // force a fadeout
position = (!position) ? 'center'
: (event && position == 'mouse') ? position
: (('top,bottom,left,right,center').indexOf(position) > -1) ? position
: 'center'; // need a default position?
var offsets = wob.getContainerOffsets(msgSource.parentNode, event); // get page and mouse offsets
var dynoId = "dynoInfoBox"; // set id of dynamic widget
var dyno = document.getElementById(dynoId); // get pointer to dynamic widget
if (dyno && dyno.id == dynoId) // if dynamic widget already exists
{
dyno.parentNode.removeChild(dyno); // trash it
}
dyno = document.createElement("div"); // then, (re)create it
dyno.setAttribute("id", dynoId);
dyno.setAttribute("class", "dropShadow");
dyno.style.position = "absolute";
dyno.style.left = "300px";
dyno.style.top = "200px";
if (messageText.length > 50) // if this is a long message
{
dyno.style.width = "280px"; // limit width of message box
dyno.style.whiteSpace = "pre-wrap"; // and perform word wrap
}
else // else default width to length of text
{
dyno.style.whiteSpace = "nowrap"; // and no word wrap
}
dyno.style.visibility = "hidden"; // initial setting to allow repositioning
dyno.innerHTML = '<img style="float: none; width: 16px; height: 16px; vertical-align: text-bottom;"'
+ ' src="/profoundui/proddata/images/icons/information.png"></img> ';
dyno.innerHTML += messageText; // set value of dynamic widget
dyno = msgSource.parentNode.appendChild(dyno); // add to container
switch (position)
{
case 'mouse':
dyno.style.left = (offsets.mouseLeft + 10) + "px";
dyno.style.top = (offsets.mouseTop - dyno.offsetHeight - 10) + "px";
break;
case 'center':
dyno.style.left = (Math.floor(offsets.width / 2) - Math.floor(dyno.offsetWidth / 2)) + "px";
dyno.style.top = (Math.floor(offsets.height / 2) - dyno.offsetHeight) + "px";
break;
case 'top':
dyno.style.left = (Math.floor(offsets.width / 2) - Math.floor(dyno.offsetWidth / 2)) + "px";
dyno.style.top = "5px";
break;
case 'left':
dyno.style.left = "5px";
dyno.style.top = (Math.floor(offsets.height / 2) - dyno.offsetHeight) + "px";
break;
case 'bottom':
dyno.style.left = (Math.floor(offsets.width / 2) - Math.floor(dyno.offsetWidth / 2)) + "px";
dyno.style.top = (offsets.height - dyno.offsetHeight - 5) + "px";
break;
case 'right':
dyno.style.left = (offsets.width - dyno.offsetWidth - 5) + "px";
dyno.style.top = (Math.floor(offsets.height / 2) - dyno.offsetHeight) + "px";
break;
default:
}
dyno.style.visibility = "visible";
$("#" + dynoId).fadeIn(0).fadeOut(fadeDuration); // jQuery method to fade object
}
}
/* ================================================================================
getContainerOffsets() returns an object describing various dimension and
position attributes for the specified container object.
Optionally, if the event object parameter is passed, the
returned object also includes adjusted mouse offsets.
*/
wob.getContainerOffsets = function(container, event)
{
var offsets = wob.browserPageOffsets(); // get scrolled offset of page
offsets.client = wob.browserClientArea(); // get client area of page
var ele = container; // starting from the container
do // calculate container's offsets
{
offsets.left += ele.offsetLeft; // include left offset
offsets.top += ele.offsetTop; // include top offset
}
while (ele = ele.offsetParent); // which includes all offset parents
var coord = pui.getDimensions(container); // get coordinates of effective container dimensions
offsets.width = coord.x2 - coord.x1; // calculate container width
offsets.height = coord.y2 - coord.y1; // calculate container height
if (event) // if an event object was included
{ // then set offset for mouse coordinates
offsets.mouseLeft = getMouseX(event) - offsets.left;
offsets.mouseTop = getMouseY(event) - offsets.top;
}
return offsets; // return offsets to caller
}
/* ================================================================================
browserClientArea() returns the width and height of the displayable area of the
browser page that does not require scrolling.
*/
wob.browserClientArea = function()
{
if (document.documentElement
&& typeof document.documentElement.clientWidth != 'undefined')
{
return { width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight };
}
if (typeof self.innerWidth != 'undefined')
{
return { width: self.innerWidth,
height: self.innerHeight };
}
if (document.body
&& typeof document.body.clientWidth != 'undefined')
{
return { width: document.body.clientWidth,
height: document.body.clientHeight };
}
return null;
}
/* ================================================================================
browserPageOffsets() returns the left, top, width, and height offsets of the
scrolled browser page: where, left and top will be zero
if the page is not scrolled.
*/
wob.browserPageOffsets = function()
{
if (document.documentElement
&& typeof document.documentElement.scrollTop != 'undefined')
{
return { left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop,
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight };
}
if (typeof self.pageXOffset != 'undefined')
{
return { left: self.pageXOffset,
top: self.pageYOffset,
width: document.width,
height: document.height };
}
if (document.body
&& typeof document.body.scrollLeft != 'undefined')
{
return { left: document.body.scrollLeft,
top: document.body.scrollTop,
width: document.body.scrollWidth,
height: document.body.scrollHeight };
}
return null;
}