Develop Reference

The if condition only works with an alert and the position is reset?

The code is that the player goes to where the user clicks, but now I want the character to look at the X axis where it goes.
The problem is that it only works when you have an alert, but only if the alert gives an error because if the alert does not give an error it does not work.
The other problem is that the transform translate3d is deleted then the player returns to the same position although the scaleX changes.
I'm new to jquery and I have no idea.
$(document).on("click mousedown", "#Park", function(e) {
var x = e.clientX;
var y = e.clientY;
var newposX = x - 60;
var newposY = y - 60;
var n = $(".circle").offset()
if (newposX < n.left) {
$(".circle").css("transform", "scaleX(-1)");
alert(ok)
}
$(".circle").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)");
setTimeout(function() {
$(".circle3").css("display", "none");
$(".circle2").css("display", "block");
}, 2000);
$(".circle2").css("display", "none");
$(".circle3").css("display", "block");
});

Immediately after the conditional, you're overwriting the transform with a new value, which means the scaleX() is immediately overwritten unless your code breaks at the alert().
Instead, write your conditional like this, to ensure the scaleX() doesn't get overwritten when you set the translate3d():
if (newposX < n.left) {
$(".circle").css("transform", "scaleX(-1) translate3d(" + newposX + "px," + newposY + "px,0px)");
} else {
$(".circle").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)");
}
Alternatively, you could write it like this, which is easier to read in my opinion:
let transform = `translate3d(${newposX}px, ${newposY}px, 0px)`;
if (newposX < n.left) {
transform = 'scaleX(-1) ' + transform;
}
$('.circle').css('transform', transform);

How to scale an entire website proportionally?

I found this blog post with a neat way of scaling a whole website up proportionally:
https://northstreetcreative.com/notes/full-screen-website-zoom-using-css-transform-and-jquery/
Here's the key code:
jQuery(document).ready(function($){
nsZoomZoom();
$( window ).resize(function() {
nsZoomZoom();
});
function nsZoomZoom() {
htmlWidth = $('html').innerWidth();
bodyWidth = 1000;
if (htmlWidth < bodyWidth)
scale = 1
else {
scale = htmlWidth / bodyWidth;
}
// Req for IE9
$("body").css('-ms-transform', 'scale(' + scale + ')');
$("body").css('transform', 'scale(' + scale + ')');
}
});
The problem is this no longer works in Safari or Chrome.
Does anybody know a fix that will work in 2018?
Thanks in advance

Resize in firefox not working

Can someone tell me why resizing does not work in firefox but it works in internet explorer? I cannot figure out how to force it in all browsers. I am trying to resize the width to 800 and height to 475. Then I am trying to make it where you can not maximize the browser (disabling it). As well as removing all toolbars from showing and URL as well.
function OpenWindow(url, width, height)
{
var features = 'resizable:no;status:yes;dialogwidth:' + width + 'px;dialogheight:' + height + 'px;help:no';
features = features + ';dialogtop:' + (window.screen.availHeight - height) /2;
features = features + ';dialogleft:' + (window.screen.availWidth - width) /2;
window.showModalDialog(url, this, features);
}
function Resize(width, height)
{
var availWidth = window.screen.availWidth;
var availHeight = window.screen.availHeight;
var top = (availHeight - height) / 2;
var left = (availWidth - width) / 2;
if (window.dialogHeight)
{
window.dialogHeight = height + 'px';
window.dialogWidth = width + 'px';
window.dialogLeft = left;
window.dialogTop = top;
}
else
{
var _win;
if(window.parent) _win = window.parent;
else _win = window;
_win.resizeTo(width, height);
_win.moveTo(left, top);
}
}
Resize(800, 475);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Any advice will help. I do not understand why things work in certain browsers and not in others.

As you can see here, it's not been allowed in Firefox at all since Firefox 7. Sorry but you won't be able to resize the window in Firefox.

Image slider is choppy

I have put together a plain javascript/css image slider, started out as just a learning exercise but am now looking to apply it in the real world. The problem is that the animation is choppy on my desktop (which is a v. high spec gaming rig) - and even worse on a mobile (to the degree it's not really an animation anymore)
You can see it in action here:
www.chrishowie.co.uk/sands/
jsfiddle isolates much of the pertinent code - it's not a "this doesn't work" issue, so hopefully the fiddle gives enough to help optimize it.
http://jsfiddle.net/9aozrxy8/5/
In summary: I have a DIV with 4 images in a row, each image is 100% the width of the page. I use javascript to translateX (I have tried translate3d as heard this uses GPU, but didnt make much diff) and I set CSS transitions to ease-in the transform.
I also thought that potentially I am just trying to do too much on this site - but then I look at some other sites doing a heck of a lot more and it's smooth as silk. So I guess I'm missing something.
function slideRight() {
if (sliding) {
return false
};
window.sliding = true;
el = document.getElementById("slider");
cst = getComputedStyle(el);
transformst = cst.transform || cst.webkitTransform || cst.mozTransform;
widthst = cst.width;
widthst = widthst.replace("px", ""); // computed width of slider (7680px)
slidewidth = widthst / 4;
transformst = transformst.replace("matrix(", "");
transformst = transformst.replace(")", "");
transformst = transformst.split(",");
transformst = transformst[4]; // returns current transform in px without unit (px)
if (!transformst) {
transformst = 0;
}
var activebtn = "sldr" + Math.round((Number(transformst) / (-1 * slidewidth)));
document.getElementById(activebtn).classList.remove("sliderbuttonactive");
if (activebtn != "sldr3") {
document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.visibility = "visible";
document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.display = "initial";
document.getElementById("slider").style.transform = "translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-webkit-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-moz-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-ms-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("leftslidebtn").style.visibility = "visible";
document.getElementById("leftslidebtn").style.display = "block";
}
activebtn = activebtn.replace("sldr", "");
activebtn = "sldr" + (1 + Number(activebtn));
document.getElementById(activebtn).classList.add("sliderbuttonactive");
if (Number(activebtn.replace("sldr", "")) == 3) {
document.getElementById("rightslidebtn").style.visibility = "hidden";
document.getElementById("rightslidebtn").style.display = "none";
}
setTimeout(function () {
window.sliding = false
}, 2000);
}
update: still not resolved but on mobile I have made it usable by reducing the image size for small screens and also not displaying images that are off-screen. Not perfectly smooth but getting there.
Thanks a lot,
C

Like Jeremy mentioned, that the "transition" in your JSFiddle caused the problem, it's also causing it on your website.
In your "Main.css" in line 221. Remove the "transition: top ease 2s;" from class .slide
Everything works fine then on Win8.1/Google Chrome/i7

Chrome Javascript popup on dual monitors is off

I'm trying to open a javascript popup that is centered based on where the current window is. I have dual monitor setup and it works in every other browser but chrome. For some reason when chrome is on my 2nd monitor the popup is way to the right.
var winX = (document.all) ? window.screenLeft : window.screenX;
var winY = (document.all) ? window.screenTop : window.screenY;
var newWindowWidth = 650;
var newWindowHeight = 700;
var currentWindowWidth = $(window).width();
var currentWindowHeight = $(window).height();
var newWindowX = (winX + (currentWindowWidth / 2)) - (newWindowWidth / 2);
var newWindowY = (winY + (currentWindowHeight / 2)) - (newWindowHeight / 2);
window.open("", "configurationWindow", "scrollbars=1,resizable=yes,width=" + newWindowWidth + ",height=" + newWindowHeight + ",top=" + newWindowY + ",left=" + newWindowX);

This is a known Chrome bug, id #73353. If you have a Google account you can star it to keep track of its status.