Javascript function to move a div tag

S

S

I want a javascript function that will place a div tag that is
invisible currently into a div tag that is visible.

here is my test app

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>

<script id="jsScript" type="text/javascript"
language="javascript">

function changeDiv(hide, show)
{
var d = new Object();
d = document.getElementById(hide);
d.style.visibility = "hidden";

d = document.getElementById(show);
d.style.visibility = "visible";


}
</script>

</head>
<body>
<form id="form1" >
<div id="div1" style="float: left; clear: none; display: inline;">
<input id="Button1" type="button" value="button 1"
onclick="javascript:changeDiv('div1', 'div2');" />
<input id="Button2" type="button" value="button 2"
onclick="javascript:changeDiv('div2', 'div1');"/>
</div>
</form>
</body>
</html>

What I want is button 1 to be replaced with button 2 then when I
click button 2 then button 1 is back.
prefer to do this with out absolute position.
 
P

pr

S said:
I want a javascript function that will place a div tag that is
invisible currently into a div tag that is visible.

here is my test app

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>

<script id="jsScript" type="text/javascript"
language="javascript">

function changeDiv(hide, show)
{
var d = new Object();
d = document.getElementById(hide);
d.style.visibility = "hidden";

d = document.getElementById(show);
d.style.visibility = "visible";


}
</script>

</head>
<body>
<form id="form1" >
<div id="div1" style="float: left; clear: none; display: inline;">
<input id="Button1" type="button" value="button 1"
onclick="javascript:changeDiv('div1', 'div2');" />
</div>
<div id="div2" style="float: left; clear: none; display: inline;"
<input id="Button2" type="button" value="button 2"
onclick="javascript:changeDiv('div2', 'div1');"/>
</div>
</form>
</body>
</html>

What I want is button 1 to be replaced with button 2 then when I
click button 2 then button 1 is back.
prefer to do this with out absolute position.

<input type="button" value="Button 1" onclick="this.value = 'Button '
+ (1 + (this.value == 'Button 1'));"/>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,046
Latest member
Gavizuho

Latest Threads

Top