Develop Reference

Re-sizing Image Width Using JavaScript

I am trying to re-size an image in a popup. The original image is 6000 x 4000. I do a check to see if the image is greater than 500, and if so I just try and set the image to 500. Trying to set it using 'this', makes the pop open in a tab and the image is still its original size. If I try and set the image not using 'this', the pop up works as intended regarding where it is positioned on screen and the size of the box, but the image, is still its original size--6000 x 4000. (PS: I have to use ES5 as well.)
What gives?
Thanks,
CM
<script language="javascript" type="text/javascript"><!--
// let i=0;
function resize() {
console.log("Testing");
let i=0;
if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
} else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
i=0; //This browser is Internet Explorer 6.x
} else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=25; //This browser is Firefox on Windows
} else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=45; //This browser is Mozilla on Windows
} else {
i=80; //This is all other browsers including Mozilla on Linux
}
var imgWidth = document.images[0].width;
var imgHeight = document.images[0].height;
console.log("Original image width is: " + imgWidth);
console.log("Original image height is: " + imgHeight);
if(imgWidth > 500){
//Shrink the image to size of popup frame
this.imgWidth = 500;
this.imgHeight = 500;
console.log("Adjusted image width is: " + imgWidth);
console.log("Adjusted image height is: " + imgHeight);
//Get display/screen width and height
var screenWidth = screen.width;
var screenHeight = screen.height;
console.log("Screen width is: " + screenWidth);
console.log("Screen height is: " + screenHeight);
//Set popup position on display/screen
var leftpos = screenWidth / 2 ;
var toppos = screenHeight / 2 - imgHeight / 2;
console.log("Left position is: " + leftpos);
console.log("Top position is: " + toppos);
//Set popup frame width and height equal to adjusted image width and height
var frameWidth = imgWidth;
var frameHeight = imgHeight+i;
console.log("Frame width is: " + frameWidth);
console.log("Frame height is: " + frameHeight);
window.moveTo(leftpos, toppos);
window.resizeTo(frameWidth,frameHeight+i);
}
else if (document.documentElement && document.documentElement.clientWidth) {
var imgHeight = document.images[0].height + 40 - i;
var imgWidth = document.images[0].width + 20;
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - imgWidth / 2;
var toppos = height / 2 - imgHeight / 2;
frameWidth = imgWidth;
frameHeight = imgHeight + i;
window.moveTo(leftpos, toppos);
window.resizeTo(frameWidth, frameHeight + i);
} else if (document.body) {
window.resizeTo(document.body.clientWidth, document.body.clientHeight - i);
}
self.focus();
}//end resize() function
//--></script>

Use
var imgWidth = document.images[0].style.width;
instead of
var imgWidth = document.images[0].width;

Can not set center position of window edge when using window.open()

I use javascript method :
var left = ((outerWidth / 2) - (w / 2)) + dualScreenLeft - 8;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var param = "width=" + w + ", height=" + h + ", left=" + left + ", top=" + top + ",toolbar=no,menubar=no,scrollbars=no,location=yes,directories=no";
window.open(url, "new window", param);
to open a new window in center screen position. It worked for all browser except Window Edge.
In
window.open(strUrl, strWindowName, [strWindowFeatures])
top and left parameters ignored in strWindowFeatures
Can someone help me ? Thanks

.style.webkitTransform not working in chrome

The following code is working perfectly in Safari to rotate a prism on scroll, but not working in other browsers, like Chrome. I think the problem has to do with the .style.webkitTransform, but I cannot figure out a fix and I've tried everything. PLease help. I'm still learning
Here's a link to the site http://katielabarta.com/projects.html
window.onscroll = function() {
var lower = document.getElementById("lower");
var scroll_length = 230; // for full scroll use 1080
var top = document.body.scrollTop;
if (top < scroll_length) {
lower.style.webkitTransform = "translateZ(-30px) rotateX(" + top / scroll_length*230 + "deg)";
lower.style.msTransform = "translateZ(-30px) rotateX(" + top / scroll_length*230 + "deg)";
lower.style.transform = "translateZ(-30px) rotateX(" + top / scroll_length*230 + "deg)";
} else {
lower.style.webkitTransform = "translateZ(-30px) rotateX(0deg)";
lower.style.msTransform = "translateZ(-30px) rotateX(0deg)";
lower.style.transform = "translateZ(-30px) rotateX(0deg)";
}
};

Cropping an image with a preview using jcrop

I'm using jcrop and trying to make a "live" preview of the cropped area on an image.
The movement of the selected area works perfectly if the "Crop Selection" area is the same height and width as the destination preview div.
Check out the issue here: http://jsfiddle.net/fbaAW/
function showCoords(c)
{
var $this = this.ui.holder;
var original = $this.prev();
var preview = original.parent().find(".image");
var oH = original.height();
var oW = original.width();
var pH = preview.height();
var pW = preview.width();
var sH = c.h;
var sW = c.w;
var differenceH = pH - sH;
var differenceW = pW - sW;
//preview.css('width', c.w);
//preview.css('height', c.h);
//preview.css("background-size", Math.round(oW + differenceW) + "px" + " " + Math.round(oH + differenceH) + "px");
preview.css("background-position", Math.round(c.x) * -1 + "px" + " " + Math.round(c.y) * -1 + "px");
}
As you can see, I've commented out a few of my tests and attempts at getting this code to work properly but I just can't wrap my head around the relationship between the position and the size background properties in order to get this effect to work correctly.

Calculate the horizontal and vertical ratios between the selection size and the preview area size:
var rW = pW / c.w;
var rH = pH / c.h;
Then apply them to the background-size and background-position:
preview.css("background-size", (oW*rW) + "px" + " " + (oH*rH) + "px");
preview.css("background-position", rW * Math.round(c.x) * -1 + "px" + " " + rH * Math.round(c.y) * -1 + "px");
http://jsfiddle.net/fbaAW/1/
So, if the preview size is, say, 3 times the size of your jCrop selection area, it means you have scale the original image by 3, and compensate for the scaling when defining the background position.

JavaScript code works on IE but not Safari (Mac or Windows)

Can anyone tell me why this wouldn't work on Safari?
// Set the height of the iFrame
var avail = document.parentWindow.screen.availHeight;
var screenTop = document.parentWindow.screenTop;
var divHeight = $('.header').css('height').replace('px','');
var divTop = $('.header').position().top;
alert('avail: ' + avail + '\nscreenTop: ' + screenTop + '\ndivHeight: ' + divHeight + '\ndivTop: ' + divTop);
$('#viewerFrame').css('height', (avail - screenTop - divTop - divHeight - 94) + 'px');
In IE, it works exactly as I want (which means it sizes the iFrame to take up all of the screen that's left after I take into account the size of the window, the header, and so forth...). Why doesn't it work in Safari?

document.parentWindow is IE-only.
You may use top or parent instead