Camandros Camandros - 4 months ago 8
Javascript Question

Remove jQuery dependecy

I am writing a small HTML page, which holds an image with zoom-in capabilities.

<div id="zoom-container">
<div id="img_wrapper" class="img-wrapper">
<img id="img_place" src="Figures/Species_copy_number.png" onclick="cenas()" />
</div>
</div>


I use jQuery only in the following code:

window.zoomedIn = false;
function cenas() {
var el = this, elp = $("#zoom-container");
var zoomContainer = $("#img_wrapper");

if (window.zoomedIn) {
zoomContainer.css("transform", "");
elp.css("overflow", "auto");
window.zoomedIn = false;
} else {
var top = el.offsetTop;
var left = el.offsetLeft - 0.25*zoomContainer[0].clientWidth;
var tro = (Math.abs(elp.offsetTop - el.offsetTop) > 0) ? "bottom" : "top";
tro += (Math.abs(elp.offsetLeft - el.offsetLeft) > 0) ? " right" : " left";
zoomContainer.css({"transform-origin": tro, "transform": "scale(2)"});
window.zoomedIn = true;
}
}


It seems useless to import a huge file for one js function. I tried to remove it and make everything working using native js. So far I have this:

window.zoomedIn = false;
function cenas() {
var el = this, elp = document.getElementById("zoom-container");
var zoomContainer = document.getElementById("img_wrapper");

if (window.zoomedIn) {
elp.setAttribute("overflow", "auto");
window.zoomedIn = false;
} else {
var top = el.offsetTop;
var left = el.offsetLeft - 0.25*zoomContainer.clientWidth;
var tro = (Math.abs(elp.offsetTop - el.offsetTop) > 0) ? "bottom" : "top";
tro += (Math.abs(elp.offsetLeft - el.offsetLeft) > 0) ? " right" : " left";
zoomContainer.setAttribute("transform-origin", tro + " 0px; transform: scale(2);");
window.zoomedIn = true;
}
}


Which seems to perform the correct css tranformations, but nothing happens.

Can someone help me remove the jquery dependency?

Thanks

EDIT: working as:

window.zoomedIn = false;
function cenas() {
var el = this, elp = document.getElementById("zoom-container");
var zoomContainer = document.getElementById("img_wrapper");

if (window.zoomedIn) {
elp.setAttribute("style", "overflow: auto");
zoomContainer.setAttribute("style", "transform :\"\"");
window.zoomedIn = false;
} else {
var top = el.offsetTop;
var left = el.offsetLeft - 0.25*zoomContainer.clientWidth;
var tro = (Math.abs(elp.offsetTop - el.offsetTop) > 0) ? "bottom" : "top";
tro += (Math.abs(elp.offsetLeft - el.offsetLeft) > 0) ? " right" : " left";
zoomContainer.setAttribute("style", "transform-origin: "+ tro + " 0px; transform: scale(2);");
window.zoomedIn = true;
}
}

Answer

"transform-origin" is not an attribute. "style" is the attribute you want to set.

Comments