Aiuto nella programmazione, risposte alle domande / jquery / jQuery non aggiorna l'altezza CSS e la larghezza dell'elemento - jquery, css, wordpress, jcrop

jQuery non aggiorna l'altezza e la larghezza dell'elemento CSS: jquery, css, wordpress, jcrop

Ho avuto molti problemi a ottenere ilfunzionalità di questa applicazione per funzionare al 100% in Wordpress. Ho una versione funzionante dell'applicazione sul server al di fuori di Wordpress, tuttavia quando Wordpress viene coinvolto le cose diventano funky.

Il problema che sto riscontrando in questo momento è il secondo passo del processo, quando un utente può ritagliare una parte dell'immagine da visualizzare al centro del codice qr. Qui puoi vedere l'esempio funzionante e cosa dovrebbe accadere, e Qui puoi vedere dove si rompe al secondo passaggio. Immagino che ci sia un conflitto CSS da qualche parte nel tema Wordpress, dal momento che jQuery sembra funzionare bene. L'elemento Inspect mostra che nell'esempio funzionante, i margini e l'altezza / larghezza vengono regolati al volo con la selezione ritagliata, ma nell'esempio rotto l'altezza / larghezza non vengono affatto regolate. Ho provato a disabilitare tutti i file CSS presenti sul tema, ma senza risultati.

Ecco il jQuery che stiamo usando per aggiornare ilimmagine a destra quando l'immagine a sinistra viene ritagliata. Il plugin che stiamo usando è jcrop. Il problema è che sulla versione funzionante, l'altezza e la larghezza vengono aggiornate correttamente con CSS incorporato, ma sulla versione rotta questi valori non funzionano, tuttavia i margini funzionano correttamente su entrambe le versioni.

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

risposte:

2 per risposta № 1

Il problema è legato al fatto che boundx e boundy non sono definiti. Guardando l'oggetto a cui è passato .css() (utilizzando un punto di interruzione):

> 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

Guardando perché questo è ora.

Aha:

inserisci la descrizione dell'immagine qui