tab control with same position
-
I am developing website...I want to display 3 table details using Tab control...I am using following code..but its displaying different position..i wnt to display with same position... function VisibleMe(no) { //alert("test"); document.getElementById("div1").style.visibility = "hidden"; document.getElementById("div2").style.visibility = "hidden"; document.getElementById("div"+no).style.visibility = "Visible"; document.getElementById("div"+no).style.left = 0+"px"; document.getElementById("div"+no).style.top = 0+"px"; //document.getElementById("tabtd").innerHTML=document.getElementById("div"+no).innerHTML; } <table> <tr><td> <div id="div1" style="overflow:scroll;width:814px;position:absolute;"> <table width="1600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td valign="middle" width="110"><div class="client">PublisherName</div></td> <td valign="middle" width="110"><div class="client">AdName</div></td> <td valign="middle" width="120"><div class="client">ServedImpressions</div></td></tr> </table></div> <div style="overflow:scroll;width:814px;position:absolute;" id="div2"> <table width="2000" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td valign="middle" width="110"><div class="client">PublisherName</div></td> <td valign="middle" width="110"><div class="client">InteractionRate</div></td> <td valign="middle" width="170"><div class="client">InteractionAverageDuration</div></td></tr> </table></div> </div> <table border="0"> <tr> <td id="td1" onclick="VisibleMe(1)"><b>Creative Summary</b></td> <td id="td2" onclick="VisibleMe(2)"><b>Engagement</b></td> </tr> <tr><td valign="top" align="left" bgcolor="#FCFCFC" colspan="3"> <span id="tabtd"></span> </td> </tr> </table> </td></tr></table> if anybody knows..plz reply me.. Thanks
Raaj
-
I am developing website...I want to display 3 table details using Tab control...I am using following code..but its displaying different position..i wnt to display with same position... function VisibleMe(no) { //alert("test"); document.getElementById("div1").style.visibility = "hidden"; document.getElementById("div2").style.visibility = "hidden"; document.getElementById("div"+no).style.visibility = "Visible"; document.getElementById("div"+no).style.left = 0+"px"; document.getElementById("div"+no).style.top = 0+"px"; //document.getElementById("tabtd").innerHTML=document.getElementById("div"+no).innerHTML; } <table> <tr><td> <div id="div1" style="overflow:scroll;width:814px;position:absolute;"> <table width="1600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td valign="middle" width="110"><div class="client">PublisherName</div></td> <td valign="middle" width="110"><div class="client">AdName</div></td> <td valign="middle" width="120"><div class="client">ServedImpressions</div></td></tr> </table></div> <div style="overflow:scroll;width:814px;position:absolute;" id="div2"> <table width="2000" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td valign="middle" width="110"><div class="client">PublisherName</div></td> <td valign="middle" width="110"><div class="client">InteractionRate</div></td> <td valign="middle" width="170"><div class="client">InteractionAverageDuration</div></td></tr> </table></div> </div> <table border="0"> <tr> <td id="td1" onclick="VisibleMe(1)"><b>Creative Summary</b></td> <td id="td2" onclick="VisibleMe(2)"><b>Engagement</b></td> </tr> <tr><td valign="top" align="left" bgcolor="#FCFCFC" colspan="3"> <span id="tabtd"></span> </td> </tr> </table> </td></tr></table> if anybody knows..plz reply me.. Thanks
Raaj
-
Try to change the
display
style. Even if you change the visibility of the control, it will occupy the area for rendering it.*jaans