Active Widgets Problem
Hello, I use the latest version of AW and included in my project I have the prototype JS library & protoload which can be found on google search. (Can be added if needed)
I'm trying to create a loading effect when the page is loading but the grid disapear when the loading is finish.
I have created a page with tabs and two grids.
Copy the code below (included JS library) in notepad etc... test it, after five seconds you will see the problem.
Reply if you need other source
I'm trying to create a loading effect when the page is loading but the grid disapear when the loading is finish.
I have created a page with tabs and two grids.
Copy the code below (included JS library) in notepad etc... test it, after five seconds you will see the problem.
Reply if you need other source
<HTML><HEAD><TITLE>Grid</TITLE>
<script src="object/runtime/lib/aw.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="protoload.js"></script>
<link href="object/runtime/styles/xp/aw.css" rel="stylesheet"></link>
<STYLE type=text/css>
body {background-position:center; background-image: url(); background-color: #FFFFFF;}
#myGrid {height: 300px; width:665px}
.aw-grid-control {height: 300px; width:665px; margin: 0px; font: menu;}
.aw-row-selector {text-align: center}
.aw-mouseover-row {background: #ccc}
.aw-column-0 {width: 100px;}
.aw-column-1 {width: 100px;}
.aw-column-2 {text-align: left;}
.aw-column-3 {text-align: left;}
.aw-column-4 {text-align: left;}
.aw-grid-cell {border-right: 1px solid threedlightshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#myTabs {width: 100%}
.aw-image-normal {background:url(normal.gif) 1px 1px no-repeat}
.aw-image-detailled {background:url(detailled.gif) 1px 1px no-repeat}
.loading {width:400px; height:20px; background:url(loading.gif) no-repeat;}
.line, .line2 {color: #009; font-family: Tahoma, MS Sans Serif, helvetica;font-weight: bold;font-size: 11px;margin-bottom: 5px;}
.line2 {font-weight: normal;}
.waiting {background-image:url('images/waiting.gif');background-repeat:no-repeat; background-position:center center;background-color:white;} .bigWaiting {background-image:url('images/bigWaiting.gif');background-repeat:no-repeat; background-position:center 20%;background-color:white;} .blackWaiting {background-image:url('images/blackWaiting.gif');background-repeat:no-repeat; background-position:center center;background-color:black;} .bigBlackWaiting {background-image:url('images/bigWaiting.gif');background-repeat:no-repeat; background-position:center center;background-color:black;} .thebox {font-weight:normal;color:#5f5f5f;display:block;background-color:#ffffff;padding:10px;margin-bottom:10px;} div.box {padding:10px;margin:0 auto;text-align:left;position:relative;}
</STYLE>
<script>
function script(){ProtoloadExamples[1].start()}
function fivesec(){setTimeout('script()',5000);}
</script>
</HEAD>
<!--BODY text=#000000 leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" onLoad="javascript:ProtoloadExamples[1].start();"!-->
<BODY text=#000000 leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" onLoad="javascript:fivesec();">
<TABLE width="100%" height="100%" border=0 align=center cellspacing="0" bordercolor="#EDEEEC" bgcolor="#FFFFFF"><TBODY><TR><TD width=190 height="576" valign="top" bordercolor="#EDEEEC" bgcolor="#EDEEEC"><table width="190" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#EDEEEC" bgcolor="#EDEEEC"><tr>
<td height="480" valign="top"> </td>
<td valign="top" bgcolor="#A8A8A8" width="1"></td></tr></table></TD>
<TD width="832" valign="top"><table width="789" border="0" align="left">
<tr><td width="783" height="450" valign="top"><div class="box" id="d"><table class="thebox" id="sndBox" width="783" height="79"><tr><td width="775" height="73"><p align="center">
<span id="myTabs"></span>
<div id="myContent" style="border: 1px solid #aaa; height: 300px; padding: 10px">
<div id="div1" style="display:none">
<table width="700" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#cccccc" bordercolorlight="#cccccc" bordercolordark="#ffffff" bgcolor="#ffffff">
<tr align="right">
<tr align="right">
<td height="67" colspan="7" align="left">
<br>
<script>
var myHeaders = ["1","2","3","4","5","6","7"];
var myCells = [
["11/3/2007 18:14:36","BBB","CCC","DDD","EEE","FFF","GGG"],
["11/3/2007 18:14:36","BBB","CCC","DDD","EEE","FFF","GGG"],
["11/3/2007 18:14:36","BBB","CCC","DDD","EEE","FFF","GGG"]
];
var obj = new AW.UI.Grid;
obj.setHeaderText(myHeaders);
obj.setCellText(myCells);
obj.setColumnWidth(150, 4);
obj.setTopImage("domain");
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
obj.setColumnCount(myHeaders.length);
obj.setRowCount(myCells.length);
document.write(obj);
</script>
</table>
</div>
<div id="div2" style="display:none">
<table width="700" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#cccccc" bordercolorlight="#cccccc" bordercolordark="#ffffff" bgcolor="#ffffff"><tr align="right">
<td width="690" height="67" align="left">
<br>
<script>
var myHeaders2 = ["1","2","3","4","5"];
var myCells2 = [
["11/6/2007 16:36:42","BBB","CCC","DDD","EEE"],
["11/6/2007 16:36:42","BBB","CCC","DDD","EEE"]
];
var obj2 = new AW.UI.Grid;
obj2.setHeaderText(myHeaders2);
obj2.setCellText(myCells2);
obj2.setColumnWidth(150, 3);
obj2.setSelectorVisible(true);
obj2.setSelectorWidth(25);
obj2.setColumnCount(myHeaders2.length);
obj2.setRowCount(myCells2.length);
document.write(obj2);
</script>
</table>
</div>
</div>
<script>
var names = ["Tab 1 ", "Tab 2"];
var values = ["div1", "div2"];
var icons = ["normal", "detailled"];
var tabs = new AW.UI.Tabs;
tabs.setId("myTabs");
tabs.setItemImage(icons);
tabs.setItemText(names);
tabs.setItemValue(values);
tabs.setItemCount(2);
tabs.refresh();
</script>
<script>
tabs.onSelectedItemsChanged = function(selected){
var i, divs = document.getElementById("myContent").childNodes;
for(i=0; i<divs.length;i++){
if (divs[i].style) {
divs[i].style.display = "none";
}
}
var index = selected[0];
var value = this.getItemValue(index);
document.getElementById(value).style.display = "block";
}
tabs.setSelectedItems([0]);
</script>
</p></td></tr></table>
</div></td></tr></table></TD></TR></TBODY></TABLE></BODY></HTML>Ang3l
November 11,