My code is functioning correctly in IE and Firefox, but not in Opera or Chrome. Essentially, it generates a DIV that is placed right after the input field. In IE and Firefox, the new div overlaps the input, but in Opera and Chrome, it appears next to the lower right corner of the input, which is not the desired positioning. Any ideas on how to fix this?
Edit: I have attached an image showing the desired layout, which is not being achieved in Chrome and Opera. The intentional overlap is not happening in these browsers - instead, the green div is positioned at the lower right corner. Although this serves as a starting point, the position CSS class should be modifying it.
https://i.sstatic.net/WcJPP.jpg
(source: aspadvice.com)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.makeDiv = function () {
$(this).each(function () {
var className = "wFWn";
$(this).after("<div class='" + className + "'>The Div</div>");
var c = $(this).next("." + className);
var topStartPosition = $(this).outerHeight();
var leftStartPosition = $(this).outerWidth();
c.addClass('green');
c.addClass('position');
var pos = $(this).offset();
var iTopOffset = 0;
if (c.css("top") != "auto")
iTopOffset = parseInt(c.css("top").substring(0, c.css("top").indexOf("px")));
var iLeftOffset = 0;
if (c.css("left") != "auto")
iLeftOffset = parseInt(c.css("left").substring(0, c.css("left").indexOf("px")));
c.offset({ top: pos.top + topStartPosition + iTopOffset, left: pos.left + leftStartPosition + iLeftOffset });
c.css("position", "relative");
});
return this;
};
$(document).ready(function () {
$("#txtTest2").makeDiv();
});
</script>
<style type="text/css">
.position {top: -4px; left: -100px; width: 140px; font-size: 11px; }
.green { background-color: lime; border: solid 1px black;}
</style>
</head>
<body>
<div id="two">
<input name="txtTest2" type="text" maxlength="10" id="txtTest2" /><br />
</div>
</body>
</html>