2

I have the following code that works fine in IE and in Firefox, but doesn't work correctly in Opera or Chrome. The code basically creates a DIV that is inserted directly after the input. In IE and Firefox, the new div will appear overlapping the input. However in both Opera and Chrome the div will appear next to the lower right corner of the input, the positioning isn't working correctly. Any suggestions?

Edit: I've included an image of what I want it to look like, it isn't doing this in Chrome and Opera. The overlap is deliberate. In Chrome/Opera the green div is placed at the lower right corner, this is a starting place, but the position CSS class should modify that.

Working correctly
(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>
2
  • Where do you want the div to be? On top of the input? Wouldn't it be easier to just set the position to absolute and set top and left to be the same as the input?
    – MrOBrian
    Aug 25, 2012 at 0:04
  • I'm not doing absolute, becase in the full code I'm allowing the user to select which corner to use as a starting point, and then the position css is used to adjust it.
    – yougotiger
    Aug 25, 2012 at 4:22

4 Answers 4

0

the problem is overriding top and left in the "Position" class in the CSS

<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();

here you can put the top instead of in the CSS style

                var iTopOffset = -4;
                if (c.css("top") != "auto")
                    iTopOffset = parseInt(c.css("top").substring(0, c.css("top").indexOf("px")));

here you can put the Left instead of in the CSS style

                var iLeftOffset = -100;
                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">

here there is a change "top: -4px; left: -100px;" removed from ".position { }"

        .position { 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>

2
  • Actually I WANT it to be specified in the CSS class so that it can be defined in CSS. I can apply the position class to the div and it works perfectly in IE and Firefox, but doesn't work in Chrome or Opera. The position just ends up in the lower right, my starting point.
    – yougotiger
    Sep 14, 2012 at 19:44
  • Tried in in JS Fiddle, and it works just like it's supposed to. So I still don't know why it doesn't work correctly in Chrome.
    – yougotiger
    Sep 17, 2012 at 14:14
0

Even

jQuery('#someelementid').css('left', '155'); 

doesn't work on an element with position:relative in Chrome (does in IE), so that may be the root cause of your problem.

jQuery's .offset() worked in all browsers for me, though:

//jQuery('#ProgressIcon').css('left', '155');       // didn't work in chrome
var position = jQuery('#ProgressIcon').offset();
position.left += 133;       //155 210
jQuery('#ProgressIcon').offset(position);
0
0

use .appendTo() function instead of .after()

$("<div class='" + className + "'>The Div</div>").appendTo($(MainDiv));

-edit fixed a typo-

0

Yes, even in Oct 2015 the JQuery CSS method does not work properly in Chrome but does in IE (in my case anyway.)

So for me, using Razor CSHTML/MVC, Chrome is ignoring the "top style" property when using JQuery in that it is not set in the html styling for the element in question. So this does not work properly in Chrome:

$("#@tileid").css({ "top": top, "left": left  });

For some reason Chrome will acknowledge the left setting but ignore the top setting.

My workaround was to attack the html directly and this worked in both IE and Chrome:

 <div id="@tileid" class="tile" style="clear:both;top:@toppx; position:absolute;left:@leftpx;">

Of course I am using CSHTML variables which allows me to get way with this. If you are not using CSHTML/MVC then at least you know that setting the HTML directly is a workaround you can try.

I just can't believe Chrome cannot properly process such a fundamental JQuery CSS method in the year 2015.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.