Develop Reference

Resize window with smooth transition for different height sizes

Some context:
I'm working on a Chrome Extension where the user can launch it via default "popup.html", or if the user so desires this Extension can be detached from the top right corner and be used on a popup window via window.open
This question will also apply for situations where users create a Shortcut for the extension on Chrome via:
"..." > "More tools" > "Create Shortcut"
Problem:
So what I need is for those cases where users use the extension detached via window.open or through a shortcut, when navigating through different options, for the Height of the window to be resized smoothly.
I somewhat achieve this but the animation is clunky and also the final height is not always the same. Sometimes I need to click twice on the button to resize too because 1 click won't be enough. Another issue is there is also some twitching of the bottom text near the edge of the window when navigating.
Here's what I got so far:
(strWdif and strHdif are used to compensate for some issues with CSS setting proper sizes which I haven't figured out yet.)
const popup = window;
function resizeWindow(popup) {
setTimeout(function () {
var strW = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("width");
var strW2 = strW.slice(0, -2);
var strWdif = 32;
var bodyTargetWidth = (parseFloat(strW2) + parseFloat(strWdif));
var strH = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("height");
var strH2 = strH.slice(0, -2);
var strHdif = 54;
var bodyTargetHeight = (parseFloat(parseInt(strH2)) + parseFloat(strHdif));
var height = window.innerHeight;
console.log("Window Height: ", height, "CSS Height: ", bodyTargetHeight);
var timer = setInterval(function () {
if (height < bodyTargetHeight) {
popup.resizeTo(bodyTargetWidth, height += 5);
if (height >= bodyTargetHeight) {
clearInterval(timer);
}
} else if (height > bodyTargetHeight) {
popup.resizeTo(bodyTargetWidth, height -= 5);
if (height <= bodyTargetHeight) {
clearInterval(timer);
}
} else {
clearInterval(timer);
}
}, 0);
}, 0400);
}
Question:
Is there a way to make this more responsive, and smooth and eliminate all the twitching and clunkiness?
I guess the issue might be that I am increasing/diminishing by 5 pixels at a time but that is the speed I need. Maybe there is another way to increase/decrease by 1px at a faster rate? Could this be the cause of the twitching and clunkiness?
Also, I should add that troubleshooting this is difficult because the browser keeps crashing so there is also a performance issue sometimes when trying different things.
EDIT:
Another option using resizeBy:
function animateClose(time) {
setTimeout(function () {
var strW = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("width");
var strW2 = strW.slice(0, -2);
var strWdif = 32;
var bodyTargetWidth = (parseFloat(strW2) + parseFloat(strWdif));
var strH = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("height");
var strH2 = strH.slice(0, -2);
var strHdif = 54;
var bodyTargetHeight = (parseFloat(parseInt(strH2)) + parseFloat(strHdif));
var w = window.innerWidth; //Get window width
var h = window.innerHeight; //Get window height
var loops = time * 0.1; //Get nb of loops
var widthPercentageMinus = (w / loops) * -0;
var heightPercentageMinus = (h / loops) * -1;
var widthPercentagePlus = (w / loops) * +0;
var heightPercentagePlus = (h / loops) * +1;
console.log("Window Height: ", h, "CSS Height: ", bodyTargetHeight);
var loopInterval = setInterval(function () {
if (h > bodyTargetHeight) {
window.resizeBy(widthPercentageMinus, heightDecrheightPercentageMinuseasePercentageMinus);
} else if (h < bodyTargetHeight) {
window.resizeBy(widthPercentagePlus, heightPercentagePlus);
} else {
clearInterval(loopInterval);
}
}, 1);
}, 0400);
}
This one is a bit more smooth but I can't make it stop at the desired Height. It also is not differentiating between resizing up or down, also crashes the browser sometimes.

maybe with requestAnimationFrame
try something like this (not tested):
function resizeWindow(popup) {
var gcs = getComputedStyle(window.document.querySelector(".body_zero"));
var strW = gcs.getPropertyValue("width");
var strW2 = strW.slice(0, -2);
var strWdif = 32;
var bodyTargetWidth = (parseFloat(strW2) + parseFloat(strWdif));
var strH = gcs.getPropertyValue("height");
var strH2 = strH.slice(0, -2);
var strHdif = 54;
var bodyTargetHeight = (parseFloat(parseInt(strH2)) + parseFloat(strHdif));
var height = window.innerHeight;
console.log("Window Height: ", height, "CSS Height: ", bodyTargetHeight);
window.myRequestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
var hStep = 2; //choose the step. Must be an integer
function internalFunc() {
if (Math.abs(height - bodyTargetHeight) > hStep) {
if (height < bodyTargetHeight)
hStep *= 1;
else if (height > bodyTargetHeight)
hStep *= -1;
popup.resizeBy(0, hStep);
height += hStep;
window.myRequestAnimationFrame(internalFunc)
} else
popup.resizeBy(0, bodyTargetHeight - height)
}
popup.resizeTo(bodyTargetWidth, height);
window.myRequestAnimationFrame(internalFunc)
}

<html>
<head>
<script>
const bodyTargetWidth = 150;
const bodyTargetHeight = 250; //target height
var height; //height at beginning
window.myRequestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
var hStep = 5; //choose the step. Must be an integer
var dir;
var myPopup;
function doResize() {
function internalFunc() {
console.log('height: ', height) ;
if (Math.abs(height - bodyTargetHeight) > hStep) {
dir = Math.sign(bodyTargetHeight - height);
myPopup.resizeBy(0, dir * hStep);
height += dir * hStep;
window.myRequestAnimationFrame(internalFunc)
} else
myPopup.resizeBy(0, bodyTargetHeight - height)
}
if (!myPopup || myPopup?.closed) {
myPopup = window.open("about:blank", "hello", "left=200,top=200,menubar=no,status=no,location=no,toolbar=no");
height = 150;
myPopup.resizeTo(bodyTargetWidth, height);
} else {
myPopup.focus();
height = myPopup.outerHeight
}
myPopup.resizeTo(bodyTargetWidth, height);
window.myRequestAnimationFrame(internalFunc)
}
document.addEventListener('DOMContentLoaded', _ => document.getElementById('myBtn').addEventListener('click', doResize))
</script>
</head>
<body>
<button type="button" id="myBtn">Create popup<br>\<br>Reset popup height</button><br>
<p>First create the popup, then change popup height and click the button above again</p>
</body>
</html>

Element not staying within defined area in javascript

I wrote a basic program that moves a button inside a DIV element. The button is not staying within the area I had intended. On the HTML side I have code that defines the DIV with an id = "page". Here is the js code. Why is the button not staying within the DIV element?
var buttonState = document.getElementById("clickMe");
var maxWidth = document.getElementById("page");
var maxHeight = document.getElementById("page");
var pageWidth = maxWidth.clientWidth;
var pageHeight = maxHeight.clientHeight;
var screenWidth = 0;
var screenHeight = 0;
function moveButton() {
"use strict";
// Find max width and height of screen and set variables to random number within parameters
screenWidth = Math.floor(Math.random() * (pageWidth)) + 1;
screenHeight = Math.floor(Math.random() * (pageHeight)) + 1;
console.log(screenWidth);
console.log(screenHeight);
// Button position
buttonState.style.left = (screenWidth) + "px";
buttonState.style.top = (screenHeight) + "px";
// Button size
buttonState.style.width = buttonSize + "em";
buttonState.style.height = buttonSize + "em";

In your equations for screenWidth and screenHeight you need to take into account the size of the button.
The div is positioned based on the top left pixel so if you end up with Math.random() returning 1 or something very close to it, the button will fall out of the page unless you subtract the button sizes from the maxes.
var buttonWidthPx = buttonState.offsetWidth;
var buttonHeightPx = buttonState.offsetHeight;
screenWidth = Math.floor(Math.random() * (pageWidth - buttonWidthPx)) + 1;
screenHeight = Math.floor(Math.random() * (pageHeight - buttonHeightPx)) + 1;
Also make sure to set the positioning of the button to relative so it positions inside the div and not absolute to the document.

First thought, it is probably more of a css layout issue than javascript or html.
The first clue to this is
buttonState.style.left
buttonState.syyle.top
If you check the buttonState in Chrome DevTools you might find the layout to be: absolute and that would be one good reason why it does not layout as intended. Another would be if layout is set to static.
Here is a link that gives good depth of information on css layout settings: http://alistapart.com/article/css-positioning-101
The first thing I would try would be to open DevTools and deselect (remove) all the styles that buttonState has until you find the layout that is causing the problem.

I don't know the exact problem that you are facing because you didn't provide any HTML/CSS, but check out this fiddle for a working example.
<div id="page">
<button id="clickMe">Click Me</button>
</div>
<button id="move">Move Button</button>
#page {
width:300px;
height: 300px;
background-color: whitesmoke;
}
#clickMe {
position: relative;
top: 0;
left: 0;
}
var page = document.getElementById("page");
var pageWidth = page.clientWidth;
var pageHeight = page.clientHeight;
var button = document.getElementById("clickMe");
var buttonWidth = button.clientWidth;
var buttonHeight = button.clientHeight;
function moveButton() {
var x = Math.floor(Math.random() * (pageWidth - buttonWidth));
var y = Math.floor(Math.random() * (pageHeight - buttonHeight));
button.style.left = x + "px";
button.style.top = y + "px";
}
document.getElementById("move").onclick = moveButton;

Limiting an element from appearing out of the screen

I'm trying to make a square appear at random positions of the screen. I have set it's position property to be absolute and in javascript i'm running a random number between 0 to 100, this will then be assigned as a percentage to top and left property. however if the random number was ~100 or a bit less the square will appear out of the screen. How do I fix this problem?
var shape1 = document.getElementById("shape1");
//creating random number to 100
function randomNum() {
var r = Math.random();
var y = (r * (100 - 0 + 1)) + 0;
var x = Math.floor(y);
console.log(x);
return x;
}
//reappear at random position
function reappear(object) {
object.style.left = randomNum().toString() + "%";
object.style.top = randomNum().toString() + "%";
object.style.display = "block";
}
reappear(shape1);
code: https://jsfiddle.net/y3m4ygow/1/

You can call the getBoundingClientRect method (MDN reference) on the object and check to see if its bottom property is bigger than window.innerHeight (means it's falling outside the window height), or if its right property is bigger than window.innerWidth (means it's falling outside the window width), and if so, call the reappear function again:
function reappear(object) {
object.style.left = randomNum().toString() + "%";
object.style.top = randomNum().toString() + "%";
object.style.display = "block";
var rect = object.getBoundingClientRect();
if(rect.right > window.innerWidth || rect.bottom > window.innerHeight)
reappear(object);
}
Fiddle update: https://jsfiddle.net/y3m4ygow/2/

As you can see what's happening here is sometimes the object falling out of the document because (the width or height of it + the randomized percentage) is more than document width or height.
For example, say that document width is 1000px and the random number turned out to be 90% (=900px), since the box width is 200px, so you will have 100px out of the screen.
Now you have two solutions:
First: As #Sidd noted, you can check whether the box is in or out using getBoundingClientRect this will return a variable for you having two properties one is bottom which is the distance of the box from the upper edge of the document, the other property is height which is the distance of the box from the left border of the screen.
Now what you can do is compare those two values with the document width and height.
Now by adding those three lines you'll have your problem solved:
var rect = object.getBoundingClientRect(); // getting the properties
if(rect.right > window.innerWidth // comparing width
|| rect.bottom > window.innerHeight) // comparing height
{reappear(object);} // re-randomizing
https://jsfiddle.net/y3m4ygow/2/
this WILL work, but it might produce some flickering with some browsers, and i'm not very comfortable about calling a function inside itself.
Second Solution is: which is what I would prefer you to do, is by not using a percentage, but using a fixed height and width values.
you can get the current height and weight values from the window object and substract your box dimensions from it:
var cHeight = window.innerHeight - 200;
var cWidth = window.innerWidth - 200;
set those two as the maximum value for the top and the right.
function topRandomNum() {
var r = Math.random();
var y = (r * (cHeight - 0 + 1)) + 0;
var x = Math.floor(y);
return x;
}
function rightRandomNum() {
var r = Math.random();
var y = (r * (cWidth - 0 + 1)) + 0;
var x = Math.floor(y);
return x;
}
and here's the fiddle for the second solution: https://jsfiddle.net/uL24u0e4/

How to update position of div with javascript

This is my first time posting here so I hope I'm doing it right. I appreciate any help I can get.
I am trying to update the position of a div using a Javascript function that, when called by the click of a button, calculates random numbers and then uses these numbers to change the position of the div. Unfortunately, clicking the button does not change the position of the div.
This is my HTML:
<body>
<p>Want to see something cool?</p>
<button id = "funbutton" onclick="SeeWhatHappens()">Click here!</button>
<div id = "newdiv" class="a"></div>
</body>
And this is my Javascript function:
function SeeWhatHappens() {
var numRand = Math.floor(Math.random() * 501);
var divsize = 50;
var posx = (Math.random() * document.width() - divsize).toFixed();
var posy = (Math.random() * document.height() - divsize).toFixed();
var div = document.getElementById('newdiv');
div.style.left = posx;
div.style.top = posy;
}
Here is my full code:
http://jsfiddle.net/6hnLx6qc/
What am I doing wrong?

You have two problems. The first one is that there is no such methods width and height on document object. You can use window.innerWidth/innerHeight instead. And the second one, you need to use px units for style.left/top values:
function SeeWhatHappens() {
var numRand = Math.floor(Math.random() * 501);
var divsize = 50;
var posx = (Math.random() * window.innerWidth - divsize).toFixed();
var posy = (Math.random() * window.innerHeight - divsize).toFixed();
var div = document.getElementById('newdiv');
div.style.left = posx + 'px';
div.style.top = posy + 'px';
}
Demo: http://jsfiddle.net/6hnLx6qc/7/

You had some issues with getting the width and height of the document. I switched it to use window.innerHeight and .innerWidth instead.
http://jsfiddle.net/6hnLx6qc/8/

javascript (making collage from images)

javascript code for making collage through images working in mozilla but chrome
$(document).ready(function() {
var canvaswidth = $('.rc-contentholder').width();
var canvasheight = $('.rc-contentholder').height();
function setleftandtop(noofdivision) {
var elements = document.getElementsByClassName('rc-singlecontentholder');
var noofelements = elements.length;
//place the first row
currentelementid = elements[0].id;
$("#" + currentelementid).css('left', '0px');
$("#" + currentelementid).css('top', '0px');
for (j = 1; j < noofdivision; j++) {
previousleft = parseFloat(elements[j - 1].style.left);
top = 0;
previouswidth = parseFloat(elements[j - 1].style.width);
elements[j].style.left = (previousleft + previouswidth) + "px";
elements[j].style.top = 0;
}
//place the remaining rows
for (i = noofdivision; i < noofelements; i++) {
currentid = elements[i - noofdivision].id;
left = parseFloat(elements[i - noofdivision].style.left);
uppertop = parseFloat(elements[i - noofdivision].style.top);
console.log(uppertop)
height = $("#" + currentid).height();
console.log("id" + "=" + currentid + " " + "height" + "=" + ($("#" + currentid).height()));
elements[i].style.left = left + "px";
elements[i].style.top = (uppertop + height) + "px";
}
}
if (canvaswidth >= 1200) {
noofdivision = 5;
singlecontentholderwidth = canvaswidth / noofdivision;
$('.rc-singlecontentholder').css('width', singlecontentholderwidth);
setleftandtop(noofdivision);
} else if (canvaswidth >= 900) {
noofdivision = 4;
singlecontentholderwidth = canvaswidth / noofdivision;
$('.rc-singlecontentholder').css('width', singlecontentholderwidth);
setleftandtop(noofdivision);
} else if (canvaswidth >= 550) {
noofdivision = 3;
singlecontentholderwidth = canvaswidth / noofdivision;
$('.rc-singlecontentholder').css('width', singlecontentholderwidth);
setleftandtop(noofdivision);
} else if (canvaswidth >= 480) {
noofdivision = 2
singlecontentholderwidth = canvaswidth / noofdivision;
$('.rc-singlecontentholder').css('width', singlecontentholderwidth);
setleftandtop(noofdivision);
} else if (canvaswidth < 480) {
noofdivision = 1;
singlecontentholderwidth = canvaswidth / noofdivision;
$('.rc-singlecontentholder').css('width', singlecontentholderwidth);
setleftandtop(noofdivision);
}
});
in chrome the height of the division rc-singlecontentholder keeps changing dont know what is happening please help me. Help would be appreciated.

As a rule of thumb you should always provide a standalone example/snippet/jsfiddle, so it is easy for others to figure out exactly what your problem is. In your code the markup(HTML) is missing and several of your variables are not defined. However I will try to give you a push in the right direction from the information you have provided.
I deduced that you want to determine the amount of images your canvas can fit from an element with class 'rc-containerwidth'. The first thing I want to address is that if you iterate from
var j = 0
you can just use
elements[j]
but this is just a minor esthetic.
I am assuming that you have classes called 'rc-singlecontentholder' with actual content, that would make the divs have a width and a height. With this in mind the real problem I see with your code is that the first for loop sets the first n=(noofdivision-1) elements with class 'rc-singlecontentholder' to have top=0.
The second for loop starts at element number n=i-noofdivison. Since it starts at
var i = noofdivison;
this effectively starts at n=0, which means you are looping over the same elements as in the first loop. You then calculate the variable upperTop as the elements top position which will be 0.
upperTop = top = 0;
and finally sets the top of this element as top + height
elements[i].style.top = (upperTop + height) + 'px';
Which will cause the different elements to be positioned at the height of their container. This will happen to the first n=(noofdivison-1) elements and the rest will be placed depending on what your original css for these elements are, which are hard to guess from your question. These factors coupled together is likely what is causing the height in chrome to be different from the height of the divs in firefox. Hope this can point you in the right direction to bandage your code.
There are several improvements that can be done to the code apart from this, but this could be a good task to solve if you are in the stages of learning JavaScript.
If learning JavaScript is not of the essence then I suggest trying to reuse some of the libraries that already exists for image collages, which should be more robust and time-saving than creating your own.
You can check out one alternative called H5P Collage or check out how we used JavaScript to make it at github. Disclosure: I am one of the developers on the H5P team.