Post
Ask Question
Venki

Venki

  • NA
  • 20
  • 18.8k

how to resolve the overlapping of dynamically gnerated Tags

Feb 7 2014 4:48 AM
I am Jquery to generate the tags Dynamically on "click" events(Completely Client side). While creating it, one created is over lapping other how can i place it in a place where tag haven't created previosly? only in Jquery or javascript, and HTMl.
 
 
my code is below.,
<script type="text/javascript">
var masterimageLeft = 0;
var masterimageTop = 0;
var masterClick = "";
var p = 0;
var imgid;
window.onload = centeronload;
function centeronload() {
$("#1").center();
}
function Showmenuonplus(e, id) {
imgid = id;
$("#mouse1").show();
masterimageLeft = e.pageX;
masterimageTop = e.pageY;
$("#mouse1").css({
position: "absolute",
top: e.pageY - 18,
left: e.pageX - 20
});
}
function getfbid(idd) {
return false;
}
function showmenu() {
$("#mouse1").show();
}
function hideonmouseout() {
$("#mouse1").hide();
}
jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
return this;
}
function click1(clicked_id) {
var fb_id = $("fb").attr("id");
masterClick = clicked_id;
if (masterClick == "parents" && imgid.title != "HaveParents") {
var lef = masterimageLeft - 340;
var top = masterimageTop - 190;
DynamicFb(lef, top);
var lef = masterimageLeft - 60;
var top = masterimageTop - 190;
DynamicFb(lef, top);
imgid.title = "HaveParents";
}
}
function DynamicFb(lef, top) {
var fb = document.createElement('fb');
var hdnvalue = document.getElementById('hdn').value;
fb.id = "fb" + hdnvalue;
fb.setAttribute("style", "left:" + lef + "px;top:" + top + "px;position:absolute");
document.getElementById('hdn').value = parseInt(hdnvalue) + 1;
document.getElementsByTagName('body')[0].appendChild(fb);
var a = "<div id=" + fb.id + " onmouseover='getfbid(this.id);' class='rectangle' title='NoParents'><table border='0' cellpadding='0' cellspacing='0' width='100%' height='100%'><tr><td width='93%' > <div class='circle'></div><a id=" + fb.id + " title='NoParents'>" + fb.id + "</a></td><td style='vertical-align:bottom;'><img class='AddRelation' onmouseover='javascript:return Showmenuonplus(event,this);' src='Add.gif' /></td></tr></table></div>";
fb.innerHTML = a;
p++;
}
</script>
<body>
<form id="form1" runat="server">
<div>
<fb id="1">
<div class="rectangle" onmouseover="getfbid();" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr>
<td width="93%" > <div class="circle">
</div>
<a>1</a>
</td>
<td style="vertical-align:bottom;">
<img id="img" class="AddRelation" title="NoParents" onmouseover="javascript:return Showmenuonplus(event,this);" src="Add.gif" />
</td>
</tr></table>
</div>
</fb>
<div id="mouseover">
<div id="mouse1" onmouseover="javascript:return showmenu();" onmouseout="javascript:return hideonmouseout();"
style="display: none;">
<ul>
<li id="parents" onclick="javascript:return click1(this.id)">Add Parents</li>
<li id="Spouse" onclick="javascript:return click1(this.id)">Add Spouse</li>
<li id="Children" onclick="javascript:return click1(this.id)">Add Children</li>
<li id="Siblings" onclick="javascript:return click1(this.id)">Add Siblings</li>
<li id="Profile" onclick="javascript:return click1(this.id)">Profile</li>
</ul>
</div>
<input id="hdn" type="hidden" value="0" />
</div>
</div>
</form>
</body>
 

Answers (4)