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
andboundy
are not defined. Looking at the object that’s passed to.css()
(using a breakpoint):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.