0

I have a dropdown that opens when you click an icon (the little black filter thing that is in fact a link) in a grid that's inside a dialog. It is positioned perfectly in Chrome if I get the co-ordinates from target.position().

Here is a screenshot of what it looks like in Chrome using target.position():

scope.showFilterMenu = function ($event, id) {
   var modal = $('div[kendo-window]');
   var target = $($event.currentTarget);
   var offset = target.position(); // THIS WORKS FOR CHROME BUT NOT IE
   var offset = target.offset(); // THIS WORKS FOR IE BUT NOT CHROME
   var top = offset.top;
   var left = offset.left + 25; // 25 is extra buffer
   modal.append(filterMenu);               
   var filterMenu = $('ul[sgid=' + id + ']'); // the dropdown menu is a ul list             
   filterMenu.css({
      'width': 50 + 'px',
      'top': dd_top + 'px',
      'position': 'fixed', // must be fixed so that it follows the window contract and expand
      'left': left // align LHS with filter icon
   });

}

enter image description here

But using target.position() in IE throws it off completely and I have to use target.offset() instead. Does anyone know how I can find a solution for both browsers please?

enter image description here

Tone
  • 990
  • 4
  • 14
  • 31

1 Answers1

0

Why dont you make a simple if condition? Like if(IE) {X} else {Y}

var IE = (document.all) ? true : false;

Edit:

In addition you can check this too:

var ie_browser = jQuery.browser.msie;

Ok, ignore this one. It was removed in jQuery 1.9.

Maybe this helps: There is a IE 11 update included. Check if user is using IE with jQuery

Community
  • 1
  • 1
Der Vampyr
  • 941
  • 1
  • 7
  • 13
  • Thanks. Yes, I did think of that. Have to run it by my boss first :-( Is that a completely fail-safe check, (document.all)? – Tone Dec 04 '14 at 12:55
  • 1
    I don´t know if it is 100% save. Maybe you have to check it for IE11. 10 and lower should work fine. See my edit. – Der Vampyr Dec 04 '14 at 12:58