showing all div on same position
Posted: Thu Jul 17, 2008 12:18 am
I have designed some divs and not showing to user all of them at one time.
I want to show all the divs at same position but I am not able to do that.
Its always showing separately in different blocks.I have tried relative position and absolute also but in vain.
Pls help.
Providing you the complete html.
<script language="javascript">
<!--
function init(){
// alert ("Running Init");
if (document.layers) {
// alert ("Running Netscape 4");
layerRef="document.layers";
styleSwitch="";
visibleVar="show";
what ="ns4";
}else if(document.all){
// alert ("Running IE");
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
what ="ie";
}else if(document.getElementById){
// alert ("Running Netscape 6");
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what="moz";
}else{
//alert("Older than 4.0 browser.");
what="none";
newbrowser = false;
}
window.status='Yeah.';
check = true;
}
// Turns the layers on and off
function show1(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "moz"){
document.getElementById(layerName).style.visibility="visible";
}
}
else {// alert ("Please wait for the page to finish loading.");
return;}
}
function hideLayer(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "moz"){
document.getElementById(layerName).style.visibility="hidden";
}
}
else {// alert ("Please wait for the page to finish loading.");
return;}
}
function hideAll(){
hideLayer('1');
hideLayer('2');
hideLayer('3');
hideLayer('4');
}
-->
</script>
</head>
<body onLoad="init();">
<a href="javascript:show1('1');" onClick="hideAll();show1('1');">Show 1</a>,
<a href="javascript:show1('2');" onClick="hideAll();show1('2');">Show 2</a>,
<a href="javascript:show1('3');" onClick="hideAll();show1('3');">Show 3</a>,
<a href="javascript:show1('4');" onClick="hideAll();show1('4');">Show 4</a>.
<div id="1" style="width:200px; height:200px;z-index:0;visibility: visible;">
One.
</div>,
<div id="2" style="width:200px; height:200px;z-index:0;visibility: hidden;" >Two.</div>,
<div id="3" style="width:200px; height:200px;z-index:0;visibility: hidden;">Three.</div>,
<div id="4" style="width:200px; height:200px;z-index:0;visibility: hidden;">Four.</div>,
</body>
</html>
I want to show all the divs at same position but I am not able to do that.
Its always showing separately in different blocks.I have tried relative position and absolute also but in vain.
Pls help.
Providing you the complete html.
<script language="javascript">
<!--
function init(){
// alert ("Running Init");
if (document.layers) {
// alert ("Running Netscape 4");
layerRef="document.layers";
styleSwitch="";
visibleVar="show";
what ="ns4";
}else if(document.all){
// alert ("Running IE");
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
what ="ie";
}else if(document.getElementById){
// alert ("Running Netscape 6");
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what="moz";
}else{
//alert("Older than 4.0 browser.");
what="none";
newbrowser = false;
}
window.status='Yeah.';
check = true;
}
// Turns the layers on and off
function show1(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "moz"){
document.getElementById(layerName).style.visibility="visible";
}
}
else {// alert ("Please wait for the page to finish loading.");
return;}
}
function hideLayer(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "moz"){
document.getElementById(layerName).style.visibility="hidden";
}
}
else {// alert ("Please wait for the page to finish loading.");
return;}
}
function hideAll(){
hideLayer('1');
hideLayer('2');
hideLayer('3');
hideLayer('4');
}
-->
</script>
</head>
<body onLoad="init();">
<a href="javascript:show1('1');" onClick="hideAll();show1('1');">Show 1</a>,
<a href="javascript:show1('2');" onClick="hideAll();show1('2');">Show 2</a>,
<a href="javascript:show1('3');" onClick="hideAll();show1('3');">Show 3</a>,
<a href="javascript:show1('4');" onClick="hideAll();show1('4');">Show 4</a>.
<div id="1" style="width:200px; height:200px;z-index:0;visibility: visible;">
One.
</div>,
<div id="2" style="width:200px; height:200px;z-index:0;visibility: hidden;" >Two.</div>,
<div id="3" style="width:200px; height:200px;z-index:0;visibility: hidden;">Three.</div>,
<div id="4" style="width:200px; height:200px;z-index:0;visibility: hidden;">Four.</div>,
</body>
</html>