jQuery not updating CSS height and width of element

I've had a lot of trouble getting the functionality of this application to work 100% in Wordpress. I have a working version of the application on the server outside of Wordpress, however when Wordpress gets involved things get funky.

The issue that I am having right now is on the second step of the process, when a user can crop a portion of the image to be displayed in the center of the qr code. Here you can see the working example and what should happen, and here you can see where it breaks on the second step. I'm guessing there is a CSS conflict somewhere in the Wordpress theme, since jQuery seems to be working alright. Inspect element shows that on the working example, the margins and height/width are being adjusted on the fly with the cropped selection, but on the broken example the height/width aren't being adjusted at all. I've tried disabling all of the CSS files that are on the theme, but to no avail.

Here is the jQuery we are using to update the image on the right as the image on the left is cropped. The plugin we are using is jcrop. The issue is that on the working version, the height and width are updated correctly with inline css, but on the broken version these values are not, however the margins are working correctly on both versions.

//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;
            });
        });
    });
});  

---

The problem is related to the fact that boundx and boundy are not defined. Looking at the object that's passed to .css() (using a breakpoint):

> 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

Looking into why that is now.

---

Aha:

The JavaScript on the two pages is not identical!

---

Now it looks like the Jcrop callback function isn't called at all. Not sure why.

---

The two pages are also using different versions of Jcrop. The working implementation has v0.9.9, and the not-working is using what appears to be 0.9.8.

链接地址: http://www.djcxy.com/p/78170.html

上一篇: Chrome在使用jcrop时显示全尺寸图像

下一篇: jQuery不更新元素的CSS高度和宽度