Смещение Jquery не дает ожидаемого значения, если в IE используется маржа body - PullRequest
Новая
       7

Смещение Jquery не дает ожидаемого значения, если в IE используется маржа body

0 голосов
/ 22 января 2019

Я пытаюсь установить позицию contextMenu и использую Jquery jquery.ui.position.Для ContextMenu я использую эту библиотеку: -

https://swisnl.github.io/jQuery-contextMenu/demo

Я пытаюсь расположить ContextMenu следующим образом: - 

$(document).ready(function() {

    $.contextMenu({
        selector: 'td[id="tdMenu"]',
        trigger: 'left',
        position: function (opt, x, y) {

            try {

                opt.$menu.position({
                    my: 'right top',
                    at: 'right bottom',
                    of: $("#tdDiv")
                });

            } catch (e) {

            }

        },
        items: {

            "0": { name: "Hi" },
        }
    });
});

HTML являетсяследующим образом: - 

<table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td id="tdDiv" style="background-color: yellow;">
                Menu Div
            </td>
        </tr>
         <tr>
            <td id="tdMenu">
                Click Here
            </td>
        </tr>
    </table>

В IE 11 после загрузки страницы и после нажатия кнопки td с идентификатором tdMenu jquery.ui.position неправильно вычисляет смещение.При втором нажатии он вычисляется правильно.

То, что я нашел, находится внутри jquery.ui.position, его вычисление смещения выполняется следующим образом: - 

function getDimensions( elem ) {
    var raw = elem[0];
    return {
        width: elem.outerWidth(),
        height: elem.outerHeight(),
        offset: elem.offset() // On first click its calculating wrong value and on second it calculates correctly.
    };
}

Я также дал поле для тела как: - 

<body style="margin: 0px;">

Если я уберу это поле, оно будет правильно рассчитано и при первом клике.

Я не могу удалить поле тела.Что может быть обходным путем для этого?

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Удалить стиль тела до события contextMenu show и сбросить стиль тела после события activated.

Вы можете попробовать что-то вроде: 

$(document).ready(function() {
    var bodystyle = '';
    $.contextMenu({
        selector: 'td[id="tdMenu"]',
        trigger: 'left',
        events: {
               show : function(options){
                    bodystyle = $('body').attr('style');   
                    $('body').attr('style','');            
               },

               activated : function(options){
                    $('body').attr('style', bodystyle ) ;            
               }
        }
        position: function (opt, x, y) {

            try {

                opt.$menu.position({
                    my: 'right top',
                    at: 'right bottom',
                    of: $("#tdDiv")
                });

            } catch (e) {

            }

        },
        items: {

            "0": { name: "Hi" },
        }
    });
});
0 голосов
/ 18 марта 2019

Из того, что вы опубликовали, это выглядит как классический случай вычисления значения offset до того, как страница закончит загрузку всех стилей и содержимого, что приведет к неправильному значению смещения во время инициализации contextMenu.

Замена 

$(document).ready(function() {
  // executes when DOM parser reaches </html> tag

  $.contextMenu({/* your stuff here */})
});

на 

$(window).on('load', function() {
  // executes when all external resources/references (images, scripts,
  // stylesheets, iframes, etc...) have finished loading

  $.contextMenu({/* your stuff here */ })
});

может решить вашу проблему, но без Минимального, Полного и Проверяемого примера это невозможночтобы проверить и убедиться, что он работает для вашего случая.

Примечание: Приведенное выше решение задержит инициализацию $.contextMenu() до загрузки страницы.Если вашей странице требуется много времени для загрузки всех ее ресурсов, и вы хотите, чтобы $.contextMenu инициализировались до этого момента, обходной путь должен инициировать ее на $(document).ready и обновить ее на $(window).load: 

function cMenu() {
    $.contextMenu({
      /* your stuff here */ 
    });
}
$(document).ready(cMenu);
$(window).on('load', cMenu);

В действительности, есть вероятность, что на странице есть только один элемент, который влияет на это смещение (скорее всего, таблица стилей).Если вы какой это (исключая, отключая материал на своей странице), вам даже не нужно ждать загрузки остальных, вы можете просто связать повторный запуск вашей функции для события onload этих элементов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...