I have a hidden div in my JSP code that I want to move from one tab to another tab based on the onclick event of the tabs.
<div id="addprojectname" style="-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFFF;
border-color: -moz-use-text-color #AAAAAA #AAAAAA;
border-image: none;
border-radius: 4px 4px 4px 4px;
border-style: none solid solid;
border-width: medium 2px 2px;
box-shadow: 0 0 5px #AAAAAA;
display:none;
width: 328px;">
<form name="frm" action="linkBean.jsp" method="post">
<input type="hidden" id="sl_category" name="sl_no_cat" >
<table style="padding: 5px 0px 0px 8px;">
<tr>
<th colspan="2">
<a onclick= "hidewindows('addprojectname');" href="#"><img alt="AALPINE IT SERVICES" src="images/close.png" style="width:20px; float: right; "></a>
</th>
</tr>
<tr>
<th colspan="2">
<div style="width: width:271px; color:red;" id="projectnamevalidate"></div>
</th>
</tr>
<tr>
<th>Project Name<span>:</span></th><td><input type="text" name="projectname"></td>
</tr>
<tr>
<th>Category Name<span>:</span></th><td><input type="text" id="cost_category" name="category"></td>
</tr>
<tr>
<td colspan="2" style="float:right; padding-top:15px">
<input type="submit" value="Submit" style="width: 60px;">
</td>
</tr>
</table>
</form>
</div>
This is the CSS code:
#addprojectname{
float: right;
margin-left: 214px;
margin-top: 70px;
position: absolute;
This is the JavaScript code to change the margin value dynamically:
function projectname(id1,id2)
{
var userid = document.getElementById(id1).value;
var e = document.getElementById(id2);
var url="NameProject.do?id="+userid;
xmlhttp.open("post", url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
var temp = xmlhttp.responseText;
obj = JSON.parse(temp);
if(temp!="")
{
document.getElementById("cost_category").value=document.getElementById("cost_category").innerHTML=obj.catgoryname;
document.getElementById("sl_category").value=document.getElementById("sl_category").innerHTML=obj.sl_no_cat;
}
if(temp!="")
{
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
if(temp=="")
{
alert("!Data Not existing");
}
}
}
}
}