We Keep Coding

Condense my JavaScript into lesser code

I have some JavaScript code and it's working (kind of). I'd like to condense it somehow, maybe grab both the CSS selectors at once and iterate through them with a forEach() loop of some kind.
Right now, the top value for both stars gets the same value, eg style="top: 60%". I'd like to have them get different random values for the top, left, right and transform.
I realize the querySelectorAll will return a NodeList, and can be converted to an array, but I cannot figure out how to do this and have it so the .shooting-star-right gets different values using the Math.random section.
I've tried this:
var stars = document.querySelectorAll('.shooting-star, .shooting-star-right');
for (let el of stars) {
shootingStar();
}
I've also tried this:
var stars = document.querySelectorAll('.shooting-star, .shooting-star-right');
stars.forEach(function() {
shootingStar();
});
Here is my working (although quite messy) code => any help is much appreciated :)
init: () => {
let star = document.querySelector('.shooting-star');
let starRight = document.querySelector('.shooting-star-right');
const shootingStar = () => {
setInterval(() => {
let topPos = Math.floor(Math.random() * 80) + 1,
topPosRight = Math.floor(Math.random() * 80) + 1,
leftPos = Math.floor(Math.random() * 20) + 1,
rightPos = Math.floor(Math.random() * 20 + 1),
trans = Math.floor(Math.random() * 180) + 1,
transRight = Math.floor(Math.random() * 220) + 1;
topPos = topPos + '%',
topPosRight = topPosRight + '%',
leftPos = leftPos + '%',
rightPos = rightPos + '%',
trans = trans + 'deg',
transRight = transRight + 'deg';
star.style.top = topPos,
star.style.left = leftPos,
star.style.transform = 'rotate(' + '-' + trans + ')';
starRight.style.top = topPosRight,
starRight.style.right = rightPos,
starRight.style.transform = 'rotate(' + transRight + ')';
}, 9000);
};
shootingStar();
}

The element el has to be used in the forEach or for of loop. For example (not tested):
function setStyles(name, style) {
for (let el of document.getElementsByClassName(name)) el.style = style;
// or document.getElementsByClassName(name).forEach(el => el.style = style);
}
const r = n => Math.random() * n | 0 + 1;
setStyles('shooting-star', `top:${r(80)}%,left:${r(20)}%,transform:rotate(-${r(180)}deg)`);
setStyles('shooting-star-right', `top:${r(80)}%,right:${r(20)},transform:rotate(${r(220)}deg)`);

Well, this is lesser code:
star.style.top = (Math.floor(Math.random() * 80) + 1) +"%";
star.style.left = (Math.floor(Math.random() * 20) + 1) +"%;
etc.
Also, since you already use transform, you might as well use it for positioning. It works much better than setting left and top when used for animation.
let leftPos = Math.floor(Math.random() * 80) + 1
let topPos = Math.floor(Math.random() * 20) + 1
star.style.transform = 'translate('+ leftPos +'px, '+topPos +'px) rotate(' + '-' + trans + ')';

If you guys are interested, I ended up taking both your comments and finding a solution. I think this looks pretty good.
I really appreciate the assistance
const randomNum = (low, high) => {
let r = Math.floor(Math.random() * (high - low + 1)) + low;
return r;
};
const shootingStars = (name) => {
const stars = document.querySelectorAll(name);
const starsArray = [...stars];
setInterval(() => {
starsArray.forEach(el => {
el.style.cssText = 'transform: rotate(' + randomNum(0, 180) + 'deg' + ') translateY(' + randomNum(0, 200) + 'px' + ')';
});
}, 9000);
};
shootingStars('.shooting-star');
shootingStars('.shooting-star-right');

Trying to use range slider to populate a graph?

I have range slider which animates a graph. The problem that I have is:
The slider start at height 0 under the min-height and ends at height 100% above min-height.
What I want is for the slider to start at min-height and end at max-height. But I'm stuck on how to do this.
Below is the JS code I'm struggling with and a JSFiddle
onSlide: function(position, value){
var $rangeSlider = $('.rangeslider');
var fullWidth = ($rangeSlider.width() - 42) ;
var heightOfSaving = ((position / fullWidth) * 100);
$savingGraph.css('height', heightOfSaving + '%');
$($rateOnlineBedrijfsmakelaar).css('top', $savingGraph.height() + 'px');
$output.html(value);
}
https://jsfiddle.net/vexstrx6/

Just change the caculation!
That is a simple math question more than a coding question...
(function( $ ) {
'use strict';
var $output = $('#getright-besparing-output');
var $range = $('input[type="range"]');
var $savingGraph = $('.graph-bar.saving');
var $rateOnlineBedrijfsmakelaar = $('#rateOnlineBedrijfsmakelaar');
$(function(){
$range.rangeslider({
polyfill: false,
onInit: function(){
$output.html($range.val());
},
onSlide: function(position, value){
var $rangeSlider = $('.rangeslider');
var fullWidth = ($rangeSlider.width() - 42) ;
var minH = parseInt($savingGraph.css("min-height"));
var maxH = parseInt($savingGraph.css("max-height"));
var heightOfSaving = minH +((position / fullWidth) * (maxH - minH)); //((position / fullWidth) * 100);
console.log(heightOfSaving);
$savingGraph.css('height', heightOfSaving + 'px'); // 'px' intead of '%'
$($rateOnlineBedrijfsmakelaar).css('top', $savingGraph.height() + 'px');
$output.html(value);
}
});
});
})( jQuery );
CodePen

Multiple timers on a single HTML page

I have the following JavaScript code to update tiles on a page:
var delayMinimum = 1000;
var delayMaximum = 5000;
function UpdateTiles()
{
var width = 0;
var delay = 0;
var percent = 0;
var divNameLabel = "";
var divNameValue = "";
var divNameProgress = "";
if (Math.floor((Math.random() * 100) + 1) > 30)
{
percent = Math.floor((Math.random() * 100) + 1);
width = Math.floor(80 * percent / 100);
divNameLabel = "DivDashboardTileTemplatesLabel";
divNameValue = "DivDashboardTileTemplatesValue";
divNameProgress = "DivDashboardTileTemplatesProgress";
document.getElementById(divNameValue).innerText = percent.toString() + "%";
$("div#" + divNameProgress).animate({ width: (width.toString() + "px"), }, delayMinimum);
}
if (Math.floor((Math.random() * 100) + 1) > 30)
{
percent = Math.floor((Math.random() * 100) + 1);
width = Math.floor(80 * percent / 100);
divNameLabel = "DivDashboardTileDocumentsLabel";
divNameValue = "DivDashboardTileDocumentsValue";
divNameProgress = "DivDashboardTileDocumentsProgress";
document.getElementById(divNameValue).innerText = percent.toString() + "%";
$("div#" + divNameProgress).animate({ width: (width.toString() + "px"), }, delayMinimum);
}
if (Math.floor((Math.random() * 100) + 1) > 30)
{
percent = Math.floor((Math.random() * 100) + 1);
width = Math.floor(80 * percent / 100);
divNameLabel = "DivDashboardTileFormsLabel";
divNameValue = "DivDashboardTileFormsValue";
divNameProgress = "DivDashboardTileFormsProgress";
document.getElementById(divNameValue).innerText = percent.toString() + "%";
$("div#" + divNameProgress).animate({ width: (width.toString() + "px"), }, delayMinimum);
}
delay = Math.floor((Math.random() * (delayMaximum - delayMinimum)) + delayMinimum);
window.setTimeout(UpdateTiles, delay);
}
$(document).ready(UpdateTiles);
This works but any tiles updated in every iteration are updated all at once. How could I have independent timers with different intervals for each update?

Consider the following JSFiddle as a solution.
I have simplified it by using 1 function for all 3 calls and they now update at different (random) times. The key to recalling the update is the following line.
setTimeout(function () {updateTileSet(label,value,progress)}, delay);

You only have one timer: window.setTimeout(UpdateTiles, delay), add more timers as you need i order to have multiple timers.
Why did you duplicate the code 3 times?
Use functions instead and set the timeout in each one of them.

Get correct click position on scaled image

This is how I get the click position when clicking on an image to do some image transformation. But my problem is, that the image has the CSS attribute max-width: 1000px. So the code works only for images which are smaller. For larger images the position result is not the real pixel which was clicked on.
My question is, if it is possible to calculate the correct click position for the natural sized image. An alternative would be to set some data attributes with the real image size like data-width: '1200px' and data-height: '1000px'. But still I have to do some calculation.
parentPosition = getPosition(event.currentTarget),
x = event.clientX - parentPosition.x,
y = event.clientY - parentPosition.y;
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}

If you know natural size and current size, i think you can just do this:
naturalClickPosX = (naturalWidth / currentWidth) * currentClickPosX;
naturalClickPosY = (naturalHeight / currentHeight) * currentClickPosY;
Have a look at this JSFiddle
HTML
<img src="http://placehold.it/1200x1000" width="1000">
JavaScript
$('img').on("click", function(e){
var $img = $(this);
var currentClickPosX = e.pageX - $img.offset().left;
var currentClickPosY = e.pageY - $img.offset().top;
var currentWidth = $img.width();
var currentHeight = $img.height();
var naturalWidth = this.naturalWidth;
var naturalHeight = this.naturalHeight;
var naturalClickPosX = ((naturalWidth / currentWidth) * currentClickPosX).toFixed(0);
var naturalClickPosY = ((naturalHeight / currentHeight) * currentClickPosY).toFixed(0);
alert("Current X: " + currentClickPosX + " Current Y: " + currentClickPosY +
"\r\nNatural X: " + naturalClickPosX + " Natural Y: " + naturalClickPosY);
});

try this , will work on all sizes
$('.img-coordinate').click(function(e){
var parentOffset = $(e.target).parent().offset();
// here the X and Y on Click
X = e.pageX - $(e.target).offset().left;
Y = e.pageY - $(e.target).offset().top;
alert(X + ' , ' + Y );
});
working fiddel : https://jsfiddle.net/h09kfsoo/

Adjusting height & width of pop up window on resize to maintain the aspect ratio

I am opening a pop up window using window.open function
window.open('some_page.htm','','width=950,height=500');
Now what I want is when user tries to resize the window, the aspect ratio should be maintained i.e., if width is reduced then accordingly height should also get reduced and vice versa. I just want to calculate the new dimensions. So far I have tried this
function ResizeWindow()
{
var iOrignalWidth = 950;
var iOrignalHeight = 500;
var iOuterHeight = window.outerHeight;
var iOuterWidth = window.outerWidth;
var iNewOuterWidth = Math.round((iOrignalWidth / iOrignalHeight) * iOuterHeight);
var iNewOuterHeight = Math.round((iOrignalHeight / iOrignalWidth) * iNewOuterWidth);
alert("New Width: "+ iNewOuterWidth + "\t" + "New Height" + iNewOuterHeight);
}
I know that there's something wrong up there since I am not getting desired results. ANy solution on this ?

You'll want to either adjust the width to the height or visa versa, not both.
In this code, I assumed you want the width adjusted to the height:
function ResizeWindow()
{
var iOrignalWidth = 1000;
var iOrignalHeight = 500;
var iOrginalRatio = iOrignalWidth/iOrignalHeight; // 2
var iOuterWidth = window.outerWidth; // example: 1083
var iOuterHeight = window.outerHeight; //example: 600
var iNewOuterHeight = iOuterHeight; // 600
var iNewOuterWidth = Math.round(iNewOuterHeight*iOrginalRatio); //600 * 2 = 1200
alert("New Width: "+ iNewOuterWidth + "\t" + "New Height" + iNewOuterHeight);
}​
I changed to original width to 1000 for the example, but you can change that back in your actual code.

You should do to accoording to one resize for maintain the aspect ratio. For example:
function ResizeWindow()
{
var iOrignalWidth = 950;
var iOrignalHeight = 500;
var iOuterHeight = window.outerHeight;
var iOuterWidth = window.outerWidth;
var w = (window.outerWidth - iOrignalWidth) / iOrignalWidth; // for exam: (1280-950) / 950= 0.34
var h = (window.outerHeight - iOrignalHeight) / iOrignalHeight; // for exam : (800 - 500) / 500= 0.60
var newWidth;
var newHeight;
if (w<h)
{
// If percentage of width is less than percentage of height, Resize should be according to percentage of width.
newWidth = iOrignalWidth * w * 100;
newHeight = iOrignalHeight * w *100;
}
else
{
// If percentage of height is less than percentage of width, Resize should be according to percentage of height.
newWidth = iOrignalWidth * h * 100;
newHeight = iOrignalHeight * h *100;
}
alert("New Width: "+ newWidth + "\t" + "New Height" + newHeight );
}
So that maintain the aspect ratio is always preserved.