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>
showing all div on same position
Moderator: General Moderators
Re: showing all div on same position
Let me know if this works for you...
Code: Select all
<html>
<head>
<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>
<style>
<!--
.contentbox{
position: absolute;
top: 100px;
left: 100px;
width: 40%;
height: 250px;
}
-->
</style>
</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 class="contentbox" id="1">One.</div>
<div class="contentbox" id="2" style="visibility: hidden;">Two.</div>
<div class="contentbox" id="3" style="visibility: hidden;">Three.</div>
<div class="contentbox" id="4" style="visibility: hidden;">Four.</div>
</body>
</html>
Re: showing all div on same position
Its working but following error is thrown immediately after showing contents
The requested URL /javascript& 058;show1('2'); was not found on this server.
The requested URL /javascript& 058;show1('2'); was not found on this server.
Re: showing all div on same position
I have tested this in Konqueror and Firefox 3, and it works for me without error:
http://d-site.net/stuff/test/divs.php
It does not work in IE6, nor Opera, but it does not produce said error either. Does it still do that for you on the one hosted on d-site?
http://d-site.net/stuff/test/divs.php
It does not work in IE6, nor Opera, but it does not produce said error either. Does it still do that for you on the one hosted on d-site?