I have a fixed div positioned on the page using CSS. Another div is dynamically generated and added to the form in the center of the page when a click event occurs on the document.
The issue arises when I click on the document to add the dynamic div, its position is correct but the static div's position changes unexpectedly. I am unsure why this is happening. Here is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (e) {
// Check for left button click
if (e.button == 0) {
$('form').append('<div id="dvfloat" class="float_div">Welcome</div>').center().fadeIn('slow');
}
});
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;
}
});
</script>
<style type="text/css">
.login_div {
background-color: Yellow;
margin-left: 50px;
position: absolute;
width: 100px;
}
.float_div {
background-color: Green;
width: 100px;
height:50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="static_dv" class="login_div"> hi how r u ? </div>
</form>
</body>
</html>
Please test my code to observe the issue. The static div named "static_dv" repositions when clicking on the document without any explicit code causing it. I would appreciate any suggestions on fixing this unexpected behavior. Thank you