i have one fixed div and that is placed on page using css. i have another div which is dynamically generated and added into form and position at center of page. this div added when click occur on document.
the problem is when i click on document the div dynamically added onto page and position properly but the static div position getting change. i just do not understand why it happens.
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 run my code and see the effect. static div called “static_dv” getting re-position when i click on document but i did not write any code to do so. i want static div should change its position. what will be the fix. thanks
You’re not actually centering the newly created DIV, but the whole form, try with this little change: