2:49 p.m.
Author: eallen
Date: 2008-10-30 15:49:47 -0400 (Thu, 30 Oct 2008)
New Revision: 2707
Modified:
mgmt/trunk/cumin/python/cumin/pool.strings
mgmt/trunk/cumin/python/cumin/stat.strings
Log:
Ensure the grid popup doesn't extend past the right side of the page on Firefox and
IE
Modified: mgmt/trunk/cumin/python/cumin/pool.strings
===================================================================
--- mgmt/trunk/cumin/python/cumin/pool.strings 2008-10-30 00:23:51 UTC (rev 2706)
+++ mgmt/trunk/cumin/python/cumin/pool.strings 2008-10-30 19:49:47 UTC (rev 2707)
@@ -28,7 +28,7 @@
{general}
</div>
</div>
-<div style="width: 25%; float: left; margin-left: 4em;">
+<div style="float: left; margin-left: 4em;">
<h2>Job Activity</h2>
{job_grid}
</div>
Modified: mgmt/trunk/cumin/python/cumin/stat.strings
===================================================================
--- mgmt/trunk/cumin/python/cumin/stat.strings 2008-10-30 00:23:51 UTC (rev 2706)
+++ mgmt/trunk/cumin/python/cumin/stat.strings 2008-10-30 19:49:47 UTC (rev 2707)
@@ -165,6 +165,81 @@
<span class="ph" statname="{stat_name}"
statmode="{mode}">{stat_value}</span>
</li>
+[StatUtilizationGrid.javascript]
+/* called on page resize to make sure
+ the grid popup notes don't go
+ off the edge of the page */
+function ensure_notes_visible() {
+ // see if the current rule will show the note off the page
+
+ this.find_rule = function() {
+ if (document.styleSheets) {
+ for (var i=0; i<document.styleSheets.length; i++) {
+ sheet = document.styleSheets[i];
+ if (sheet.href.indexOf("cumin.css") != -1) {
+ rules = sheet.rules ? sheet.rules : sheet.cssRules;
+ if (rules[0].selectorText) { // IE
+ for (var j=0; j<rules.length; j++) {
+ if (rules[j].selectorText.indexOf("sticky_note") != -1) {
+ if (rules[j].selectorText.indexOf("position") != -1) {
+ return rules[j];
+ }
+ }
+ }
+ } else {
+ for (var j=0; j<rules.length; j++) {
+ if (rules[j].cssText.indexOf("div.sticky_note.position") != -1) {
+ return rules[j];
+ }
+ }
+ }
+ }
+ }
+ }
+ return null;
+ }
+
+ this.get_left = function (o) {
+ var p = o.offsetParent;
+ var true_left = o.offsetLeft;
+
+ while (p != null) {
+ tag = p.tagName;
+ if (p.clientLeft) {
+ if ( (tag != "TABLE") && (tag != "BODY") ) {
+ true_left += p.clientLeft;
+ }
+ }
+ true_left += p.offsetLeft;
+ p = p.offsetParent;
+ }
+ return true_left;
+ }
+
+ var oGrid = document.getElementById("StatGrid");
+ if (oGrid) {
+ var left = this.get_left(oGrid);
+ var right = left + oGrid.offsetWidth;
+ var rule = this.find_rule();
+ if (rule) {
+ if (window.innerWidth)
+ wwidth = window.innerWidth;
+ else if (document.documentElement)
+ wwidth = document.documentElement.clientWidth;
+ else
+ wwidth = 9999;
+ if (right + 310 > wwidth) {
+ rule.style.left = "";
+ rule.style.right = "50%";
+ }
+ }
+ }
+
+
+}
+addEvent(window, "resize", ensure_notes_visible);
+addEvent(window, "load", ensure_notes_visible);
+
[StatUtilizationGrid.css]
div.StatGrid{
width: 10em;
@@ -199,10 +274,10 @@
div.grid_cell div.sticky_note {
display: none;
+ font-size: 0.8em;
position: absolute;
- top: 60%;
- left: 100%;
- width: 24em;
+ top: 120%;
+ width: 25em;
padding: 1em;
background-color: #ffffaa;
background-image: url(resource?name=shade.png);
@@ -211,6 +286,12 @@
border: 1px solid #cccc99;
z-index: 1;
}
+/* this rule is separated in order to make it easier
+ to change only this attribute in the onresize handler */
+div.grid_cell div.sticky_note.position {
+ left: 50%;
+}
+
div.sticky_names {
float: left;
font-weight: bold;
@@ -235,7 +316,7 @@
<div class="StatUtilizationGrid" id="{id}">
<div class="visualization">
<h2>{title}</h2>
- <div class="StatGrid" {override_style}>
+ <div id="StatGrid" class="StatGrid" {override_style}>
{grid}
</div>
<div style="clear:left;"><!-- --></div>
@@ -256,7 +337,7 @@
onmouseover="document.getElementById('note_{cell_id}').style.display='block';"
onmouseout="document.getElementById('note_{cell_id}').style.display='none';">
<a href="#"><button id="button_{cell_id}" class="btn
{color}" >{contents}</button></a>
- <div id="note_{cell_id}" class="sticky_note">
+ <div id="note_{cell_id}" class="sticky_note position">
<div class="sticky_names">
{sticky_names}
</div>