Develop Reference

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

getting mouse coordinates correct when zooming the picture

Im trying to develop script where I can click on image and get the X/Y of the click. This part Ive implemented, the problem Im having occurs when I try to zoom the picture. Subseqent clicks on zoomed picture should return the same coordinates, and thats where I fail to success.
clicked(event) {
let pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
let pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
let offsetLeft = document.getElementById("textLayer").offsetWidth;
let offsetTop = document.getElementById("textLayer").offsetHeight;
console.log("zoom " + this.zoom);
console.log("pozycja x " + event.clientX/this.zoom);
console.log("pozycja y " + event.clientY/this.zoom);
console.log("szerokosc elementu " + offsetLeft);
console.log("wysokosc elementu " + offsetTop);
}
zoomView(): void {
this.zoom = this.zoom + 2.0;
}
this is what ihve wrote. And the template to the component:
<pdf-viewer style="position: absolute" id="textLayer" [src]="'http://localhost:8080/get.pdf'"
[page]="page"
[original-size]="true"
style="display: block;"
[zoom]="[zoom]"
(click)="clicked($event)"
></pdf-viewer>

since Ive found a solution =>
var x = event.pageX - (document.getElementById("textLayer").offsetLeft);
var y = event.pageY - (document.getElementById("textLayer").offsetTop);
console.log("zoom " + this.zoom);
console.log("pozycja x " + x/this.zoom);
console.log("pozycja y " + y/this.zoom);
console.log("szerokosc elementu " + offsetLeft);
console.log("wysokosc elementu " + offsetTop);
console.log("wysokosc elementussssssssssssss " + offsetTop);

Fabricjs get RGB pixel value after zoom or pan

I'm having trouble getting the correct mouse coordinates on the canvas after preforming pan or zoom.
I have this code for sampling coordinates and RGB:
canvas1.on('mouse:move', function (e) {
//allowing pan only if the image is zoomed.
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas1.relativePan(delta);
} else {//Read the RGB value of the mouse point
var mouse = canvas1.getPointer(e.e);
var x = parseInt(mouse.x);
var y = parseInt(mouse.y);
// get the color array for the pixel under the mouse
var px = ctx.getImageData(x, y, 1, 1).data;
// report that pixel data
results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
}
});
problem is that after zoom/pan the coordinates are 'wrong',
for example the top left corner in not (0, 0) but (-someX, -someY)...
any help will be appreciated
EDIT: I've found the mistake,
this will fix it. hope it will be useful for someone else
var x = e.e.offsetX;//parseInt(mouse.x);
var y = e.e.offsetY;//parseInt(mouse.y);

This code solves it,
Hope it could be useful for others.
canvas1.on('mouse:move', function (e) {
//allowing pan only if the image is zoomed.
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas1.relativePan(delta);
} else {//Read the RGB value of the mouse point
var mouse = canvas1.getPointer(e.e);
var x = e.e.offsetX;//parseInt(mouse.x);
var y = e.e.offsetY;//parseInt(mouse.y);
// get the color array for the pixel under the mouse
var px = ctx.getImageData(x, y, 1, 1).data;
// report that pixel data
results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';
}
});

jquery .css() not applying -webkit-transform

I cannot see what is wrong with this code. Calculate center position of window then transform-translate div there (have to use translate for what i am doing).
Just getting this working for Chrome for a start, hence the -webkit- prefix).
Very confused as to why jQuery does not apply the inline style to the .logo div. Have included my other trouble-shooting experiments, commented out.
A syntax problem? jsfiddle here.
var centerPosition = '';
function centerLogo(){
var w_width = $(window).width();
var w_height = $(window).height();
var hCenter = (w_width / 2) - 150;
var vCenter = (w_height / 2) - 150;
console.log(hCenter);
console.log(vCenter);
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
console.log(centerPosition);
$('.logo').css('-webkit-transform', centerPosition);
// Try uncommenting the three examples below - they all work ...
// $('.logo').css('background', 'blue');
// centerPosition = 'blue';
// $('.logo').css('background', centerPosition);
// $('.logo').css('-webkit-transform', 'translate(10.85px, 45.56px)');
}
jQuery(document).ready(function($){
centerLogo();
});

The correcy syntax of $('.logo').css('-webkit-transform', centerPosition); does not have semi colons inside the Strings. Try changing this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
to this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px)';
Should work: http://jsfiddle.net/7f7rt/6/

This Will Sure Work.
var posElem = document.getElementById('logo'); // set id to div
var newStyle = '-webkit-transform: translate(' + hCenter + 'px, ' + vCenter + 'px);' +
'transform: translate(' + hCenter + 'px, ' + vCenter + 'px);';
posElem.setAttribute('style',newStyle);

How do I dynamically scale elements in a specific Javascript that only uses pixels?

I am trying to use the jQuery plugin: Floating boxes with easing and motion-blur in jQuery By: Marcell Jusztin.
I have it working just fine and understand how to tweak most attributes, but I am a Javascript rookie and really do not understand the mechanics involved in changing how it uses math to place the elements I want to animate. What I want to do is change the set x and y offset coordinates (which are in pixels of course) to a set of percentages so that the elements will dynamically scale in position based on screen resolution. Here is the script in its entirety:
jQuery.fn.floatingBox = function ( userOptions ) {
options = jQuery.extend ({
parent : 'backdrop',
stage : 'backdrop',
scale : 0.3,
xOffset : 0,
yOffset : 0,
blur : false,
isText : false,
blurColor : '#888',
frameRate : 40,
}, userOptions);
var parent = options.parent;
var stage = options.stage;
var scale = options.scale;
var xOffset = options.xOffset;
var yOffset = options.yOffset;
var blur = options.blur;
var isText = options.isText;
var blurColor = options.blurColor;
var frameRate = options.frameRate;
var midX = $('#' + stage).width() / 2;
var midY = $('#' + stage).height() / 2;
var _x = midX;
var _y = midY;
var xx = midX;
var yy = midY;
var objectId = $(this).attr('id');
$('#' + objectId).css('position','absolute');
shadowAmount = 0;
window["timer" + objectId] = window.setInterval(update,frameRate);
$('#' + parent).mousemove(function(event){
_x = event.pageX;
_y = event.pageY;
if( shadowAmount < 5 && blur == true ) shadowAmount += scale;
});
factor = scale * 0.5;
function update() {
xx += (((_x - midX) * -scale) - xx) * factor;
yy += (((_y - midY) * -scale) - yy) * factor;
$('#' + objectId).css('left', xx + xOffset + $('#' + parent).position().left);
$('#' + objectId).css('top', yy + yOffset + $('#' + parent).position().top);
if(blur){
if(!isText){
$('#' + objectId).css('box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
$('#' + objectId).css('-moz-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
$('#' + objectId).css('-webkit-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
$('#' + objectId).css('-o-box-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
}else{
$('#' + objectId).css('text-shadow', '0px 0px ' + shadowAmount + 'px ' + blurColor );
}
if(shadowAmount > 0 ) shadowAmount -= scale;
}
}
}
Here is the script that initiates the javascript in the HTML document:
<script type="text/javascript">
jQuery(function(){
$('#biglogo').floatingBox({
scale : 0.09,
blur : false,
isText : false,
xOffset : 400,
yOffset: 200,
});
$('#biglogo2').floatingBox({
scale : 0.08,
blur : false,
isText : false,
xOffset : 405,
yOffset: 205,
});
});
</script>
I have two transparent png files that are layered over each other with a minor offset of 5 pixels (or maybe its considered 10), but would rather the two images be centered in all browser windows and not just mine. The scale indicates how fast and far the elements move. The xOffset and yOffset parameters are of course fixed numbers that don't scale based on browser window size.
I have attempted to research this but ultimately, I'm neither finding that it can't be done, nor that it can because no one response seems to address the specific issue I am having. Perhaps I am not wording it correctly.
Thanks!

From the looks of the script I would say that it already takes the necessary calculations into accout. Try setting the parent and stage options and leave out the offset parameters. I.e
$('#biglogo').floatingBox({
parent: 'container-id',
stage: 'container-id',
scale: 0.09,
blur: false,
isText: false
});
Edit: I created a fiddle with some modifications to the plugin that shows how to get centering working, http://jsfiddle.net/wwBJt/