jQuery не обновляет CSS высоту и ширину элемента - PullRequest
Новая
       2

jQuery не обновляет CSS высоту и ширину элемента

3 голосов
/ 23 ноября 2011

У меня было много проблем, чтобы функциональность этого приложения работала на 100% в Wordpress. У меня есть рабочая версия приложения на сервере за пределами Wordpress, однако, когда Wordpress включается, вещи становятся забавными.

Проблема, с которой я столкнулся сейчас, связана со вторым этапом процесса, когда пользователь может обрезать часть изображения, отображаемую в центре кода qr. Здесь вы можете увидеть рабочий пример и то, что должно произойти, а здесь вы можете увидеть, где он ломается на втором шаге. Я предполагаю, что где-то в теме Wordpress есть конфликт CSS, так как jQuery, кажется, работает нормально. Элемент проверки показывает, что в рабочем примере поля и высота / ширина корректируются на лету с помощью обрезанного выделения, но в разбитом примере высота / ширина вообще не корректируются. I попробовал отключить все CSS-файлы, которые есть в теме, но безрезультатно.

Вот jQuery, который мы используем для обновления изображения справа, так как изображение слева обрезается. Плагин, который мы используем, это jcrop. Проблема заключается в том, что в рабочей версии высота и ширина корректно обновляются с помощью встроенного CSS, но в сломанной версии эти значения отсутствуют, однако поля работают правильно в обеих версиях. 

//function to update preview divs
jQuery(function($){
    var jcrop_api, boundx, boundy; //set jcrop variables

    function updatePreview(c)
    {
        if (parseInt(c.w) > 0)
        {
            var rx = 73 / c.w;
            var ry = 73 / c.h;

            jQuery('#preview').css({
                width: Math.round(rx * boundx) + 'px !important',
                height: Math.round(ry * boundy) + 'px !important',
                marginLeft: '-' + Math.round(rx * c.x) + 'px !important',
                marginTop: '-' + Math.round(ry * c.y) + 'px !important'
            });
        }
    };

    //function to update coordinates
    function updateCoords(c)
    {
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
    };

    jQuery(window).load(function () {
        var PathToFile = jQuery('#cropImageDisplay').attr("name");
        jQuery('#cropImageDisplay').load("/wp-content/themes/howfarqr/resources/php/uploadedImage.php?fn="+PathToFile).hide().fadeIn('slow', function() {
            jQuery('#cropbox').Jcrop({ //jcrop selector
                onChange: updatePreview, //function to execute onChange
                onSelect: updateCoords, //function to execute onSelect
                aspectRatio: 1 //asepct ratio
            },function(){ //callback function
                    var bounds = this.getBounds(); // get the real image size
                boundx = bounds[0]; //assign x
                boundy = bounds[1]; //assign y
                //store jcrop api as jcrop variable
                jcrop_api = this;
            });
        });
    });
});

1 Ответ

2 голосов
/ 23 ноября 2011

Проблема связана с тем, что boundx и boundy не определены. Просмотр объекта, который передан в .css() (с использованием точки останова): 

> console.log({
    width: Math.round(rx * boundx) + 'px',
    height: Math.round(ry * boundy) + 'px',
    marginLeft: '-' + Math.round(rx * c.x) + 'px',
    marginTop: '-' + Math.round(ry * c.y) + 'px'
})
▼ Object
    height: "NaNpx"
    marginLeft: "-25px"
    marginTop: "-9px"
    width: "NaNpx"
    __proto__: Object
> boundx
undefined

Глядя на это сейчас.

Aha:

enter image description here

JavaScript на двух страницах не идентичен!

Теперь похоже, что функция обратного вызова Jcrop вообще не вызывается. Не знаю почему.

На двух страницах также используются разные версии Jcrop. Рабочая реализация имеет v0.9.9 , а нерабочий использует , что выглядит как 0.9.8 .

...