I have had lots of trouble obtaining the functionality of the application to operate 100% in Wordpress. I've got a working version from the application around the server outdoors of Wordpress, however, if Wordpress will get involved things get funky.

The problem that i'm getting at this time is around the next step from the process, whenever a user can crop a area of the image to become displayed in the heart of the qr code. Here you can observe the significant example and what should happen, and here you can observe where it breaks around the next step. I am speculating there's a CSS conflict somewhere within the Wordpress theme, since jQuery appears to become working okay. Inspect element implies that around the working example, the margins and height/width are now being modified quickly using the popped selection, but around the damaged example the peakOrthickness aren't being modified whatsoever. I have attempted crippling all the CSS files which are on the party's theme, but with no success.

This is actually the jQuery we're using to update the look around the right because the image around the left is popped. The wordpress plugin we're using is jcrop. The problem is the fact that around the working version, the peak and width are up-to-date properly with inline css, but around the damaged version these values aren't, nevertheless the margins will work properly on versions.

//function to update preview divs
    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;

                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(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;

Try adding quotes within this part:

    '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'

Hope it will help

The issue is related that boundx and boundy aren't defined. Searching in the object that's passed to .css() (utilizing 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

Considering why that's now.


enter image description here

The JavaScript around the two pages isn't identical!

Now it appears such as the Jcrop callback function is not known as whatsoever. Unsure why.

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