showing all div on same position

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
dumlee
Forum Commoner
Posts: 33
Joined: Mon Jun 30, 2008 12:06 am

showing all div on same position

Post by dumlee »

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>
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: showing all div on same position

Post by omniuni »

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&#058;show1('1');" onClick="hideAll();show1('1');">Show 1</a>,
<a href="javascript&#058;show1('2');" onClick="hideAll();show1('2');">Show 2</a>,
<a href="javascript&#058;show1('3');" onClick="hideAll();show1('3');">Show 3</a>,
<a href="javascript&#058;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> 
 
dumlee
Forum Commoner
Posts: 33
Joined: Mon Jun 30, 2008 12:06 am

Re: showing all div on same position

Post by dumlee »

Its working but following error is thrown immediately after showing contents

The requested URL /javascript& 058;show1('2'); was not found on this server.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: showing all div on same position

Post by omniuni »

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?
Post Reply