1

I have started at a new company and they've given me some jQuery that breaks in IE. For some reason the position of the tooltip isn't recalculating once you scroll up or down the page in Internet Explorer only. There's a lot going on in the file but here is the section I believe is most relevant for help:

reposition: function (target, tip, classes) {
                var width, nub, nubHeight, nubWidth, row, objPos;
                tip.css('visibility', 'hidden').show();
                width = target.data('width');
                nub = tip.children('.nub');
                nubHeight = nub.outerHeight();
                nubWidth = nub.outerWidth();
                objPos = function (obj, top, right, bottom, left, width) {
                    return obj.css({
                        'top': top,
                        'bottom': bottom,
                        'left': left,
                        'right': right,
                        'width': (width) ? width : 'auto'
                    }).end()
                };

                objPos(tip, (target.offset().top - tip.outerHeight() - nubHeight), 'auto', 'auto', target.offset().left, width);
                objPos(nub, 'auto', 'auto', -nubHeight, 'auto');  


                 <!--Some code here only if the window is less than 767px-->


   show: function ($target) {
            var $tip = methods.getTip($target);
            methods.reposition($target, $tip, $target.attr('class'));
            $tip.fadeIn(150)
        },

The nub is referring to the little tail at the bottom of the tooltip so it appears to look like a quote bubble.

UPDATE I created an alert for scrollTop and it kept coming up at 0 in IE while the other browsers would recalculate correctly. So thanks to this post I was able to get it to recalculate. Now my code looks like this (changes marked with asterisks):

 reposition: function (target, tip, classes) {
                var width, nub, nubHeight, nubWidth, row, objPos;
                tip.css('visibility', 'hidden').show();
                width = target.data('width');
                nub = tip.children('.nub');
                nubHeight = nub.outerHeight();
                nubWidth = nub.outerWidth();
            **pageTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;**          
                objPos = function (obj, top, right, bottom, left, width) {
                    return obj.css({
                        'top': top,
                        'bottom': bottom,
                        'left': left,
                        'right': right,
                        'width': (width) ? width : 'auto'
                    }).end()
                };

                **objPos(tip, (pageTop + (target.offset().top - tip.outerHeight() - nubHeight)), 'auto', 'auto', target.offset().left, width);**
                objPos(nub, 'auto', 'auto', -nubHeight, 'auto');

So it works in IE (yay) but now it's off in Firefox and Chrome. I'm getting closer. I can feel it. If anyone can help me at this point, I'd appreciate it, otherwise I'll get to it as time allows.

UPDATE 2: I have now updated my pageTop variable:

 pageTop = $('html').scrollTop();

This works in IE8 AND Chrome, but alas, Firefox doesn't like it. I have also tried

 pageTop = $('body,html').scrollTop();

but it doesn't do anything either and it's longer so I took it out.

The battle continues.

Community
  • 1
  • 1
Fletchling
  • 177
  • 10

0 Answers0