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>

<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

Code:

<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

Code:

<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:

Code:

<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:

HTML Code:

<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:

HTML Code:

<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:

HTML Code:

<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:

Code:

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

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

into this:

Code:

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

Works great!! Thanks again!

Thread: Swap div

Thread Tools

Search Thread

Swap div

The Following User Says Thank You to ggalan For This Useful Post:

Swap multiple divs?

Bookmarks

Bookmarks

Posting Permissions