PDA

View Full Version : Swap div



saloio
01-19-2011, 09:18 PM
Hi
I don't know how to use javascript and i got this code from internet to swap DIVs:


<body>
<p>
<a href="javascript: swapin('swap1');">Show swap1.</a>
<a href="javascript: swapin('swap2');">Show swap2.</a>
<a href="javascript: swapin('swap3');">Show swap3.</a>
</p>
<div>
<!-- By having this div here, it ensures that all the 'swappable' divs will get displayed in the same place. -->
<div id="swap1" style="display: none;"> One of your swappable layers. </div>
<div id="swap2" style="display: none;"> And here's another. </div>
<div id="swap3" style="display: none;"> And a third for good measure. </div>
</div>
<script type="text/javascript">
var currentDiv = null;

function swapin(divName)
{
if(currentDiv != null)
{
document.getElementById(currentDiv).style.display = "none";
}
currentDiv = divName;
document.getElementById(currentDiv).style.display = "block";
}
</script>
</body>

It doesn't show any DIV at first.
how can I show "swap1" when the page is loaded? And keep the swap function.

Thanks!

ggalan
01-19-2011, 10:34 PM
<script type="text/javascript">
var currentDiv = null;

function swapin(divName){
if(currentDiv != null){
document.getElementById(currentDiv).style.display = "none";

}
currentDiv = divName;
document.getElementById(currentDiv).style.display = "block";
}
window.onload = function(){
document.getElementById('swap1').style.display = "block";
}
</script>

saloio
01-19-2011, 10:50 PM
Thanks ggalan! :)

It shows the div swap1.. but if I click on "Show swap2", the div swap2 goes under the div swap1. the swap goes normal when i click on "Show swap1"

do you know how to fix it?

Thanks again

ggalan
01-20-2011, 12:06 AM
oops, try this



<script type="text/javascript">
var currentDiv = null;

function swapin(divName){
if(currentDiv != null){
document.getElementById(currentDiv).style.display = "none";
}
if(document.getElementById != 'swap1'){
document.getElementById('swap1').style.display = "none";
}
currentDiv = divName;
document.getElementById(currentDiv).style.display = "block";
}
window.onload = function(){
document.getElementById('swap1').style.display = "block";
}
</script>

saloio
01-20-2011, 02:22 AM
Thank you ggalan!
It's working

Perfect!

tippyTeapot
08-19-2011, 06:11 PM
Hello,

I found your swap div code very helpful.

What I am trying to do is create a list of links in the left div that navigate through content in the right div. I would like, for example, when the user clicks 'Link B' at the top, that 'Menu B' appears in the left div and 'Content B' appears in the right div, etc. Also, I would like the first option (A) to automatically appear in both divs.

Almost everything works - my only problem now is that the left div default content doesn't show on load.

Here is my javascript:


<script type="text/javascript">
var currentDiv = null;
var currentDivB = null;
function swapin(divName){


if(currentDiv != null){
document.getElementById(currentDiv).style.display = "none";
}
if(document.getElementById != 'm1'){
document.getElementById('m1').style.display = "none";
}
currentDiv = divName;
document.getElementById(currentDiv).style.display = "block";
}
window.onload = function(){
document.getElementById('m1').style.display = "block";
}


function swapinB(divNameB){

if(currentDivB != null){
document.getElementById(currentDivB).style.display = "none";
}
if(document.getElementById != 'c1'){
document.getElementById('c1').style.display = "none";
}
currentDivB = divNameB;
document.getElementById(currentDivB).style.display = "block";
}
window.onload = function(){
document.getElementById('c1').style.display = "block";
}
</script>

Here is my code for the menu:

<div id="m1" style="display: none;"> A Links <!-- end #m1 --></div>
<div id="m2" style="display: none;"> B Links <!-- end #m2 --></div>
<div id="m3" style="display: none;"> C Links <!-- end #m3 --></div>

Here is my code for the content:


<div id="c1" style="display: none;"> A Content <!-- end #c1 --></div>
<div id="c2" style="display: none;"> B Content <!-- end #c2 --></div>
<div id="c3" style="display: none;"> C Content <!-- end #c3 --></div>

And this is how the swaps are called:


<a href="javascript: swapin('m1'); swapinB('c1')">A</a>
<a href="javascript: swapin('m2'); swapinB('c2')">B</a>
<a href="javascript: swapin('m3'); swapinB('c3')">C</a>

When the page loads, "C1" appears in the right place but the place holder for "M1" is empty. All buttons work properly. Any suggestions?

Thanks much!

tippyTeapot
08-19-2011, 06:51 PM
Hi again,

I'm a dolt - I found my error. The page is only listening to one 'onLoad' so I just needed to combine these:


window.onload = function(){
document.getElementById('m1').style.display = "block";
}

window.onload = function(){
document.getElementById('c1').style.display = "block";
}

into this:


window.onload = function(){
document.getElementById('c1').style.display = "block";
document.getElementById('m1').style.display = "block";
}

Works great!! Thanks again!