We Keep Coding

How should I code this jQuery code in Javascript?

This exercise I need a function that moves the div randomly inside of the body when I click with the left button mouse.
I'm having some difficulties to swap this code(jquery) into javascript. How would it be?
var counter = 0;
var div = document.getElementsByClassName('a');
function click() {
if (counter < 1) {
var pos = makeNewPosition();
this.style.left = pos[1] + 'px';
this.style.top = pos[0] + 'px';
}
}
function makeNewPosition() {
// Get viewport dimensions (remove the dimension of the div)
var h = window.innerHeight = -50;
var w = window.innerWidth = -50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
<div onclick="click()" class="a">Click</div>
This is the jQuery that I wanted to code in javascript.
$(document).ready(function(){
var counter = 0;
$('.a').click( function () {
if (counter < 1 ) {
var pos = makeNewPosition();
this.style.left = pos[1] +'px';
this.style.top = pos[0] +'px';
}
});
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}

JavaScript:
window.addEventListener("load", function() {
var counter = 0,
div = document.querySelector(".a");
div.addEventListener("click", function() {
if (counter < 1) {
var pos = makeNewPosition();
this.style.left = pos[1] + 'px';
this.style.ltop = pos[0] + 'px';
}
counter++;
});
});
function makeNewPosition() {
// Get viewport dimensions (remove the dimension of the div)
var h = window.innerHeight -50;
var w = window.innerWidth -50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
.a {
position: absolute;
top: 100;
left: 100
}
<div class="a">Click</div>
Based on this jQuery:
$(function() {
var counter = 0;
$('.a').click(function() {
if (counter < 1) {
var pos = makeNewPosition();
$(this).css({
"left": pos[1] + 'px',
"top": pos[0] + 'px'
});
}
counter++;
});
});
function makeNewPosition() {
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
.a {
position: absolute;
top: 100;
left: 100
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a">Click</div>

The most idiomatic way would be to first get a reference to the element
const div = document.getElementsByClassName('a')[0];
then add an event listener to the element
div.addEventListener('click', click); //Attach your handler function to the event

Move multiple images on a page in different directions

I have multiple images on a page that are loaded dynamically using PHP. I want them to all move in different directions across the screen.
So far what I have, the images move in a random direction but all in the same position.
PHP:
<?php foreach($logos as $logo) {
$logoName = $logo['Logo_Link']; ?>
<img class="imglogo" src="images/<?php echo $logoName ?>" />
<?php } ?>
JS:
$(document).ready(function() {
animateDiv();
});
function makeNewPosition($container) {
// Get viewport dimensions (remove the dimension of the div)
$container = ($container || $(window));
var h = $container.height() - 50;
var w = $container.width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv() {
var $target = $('.imglogo');
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.imglogo').animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv();
});
}
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}

I just made a loop in the animateDiv function
animateDiv();
function makeNewPosition($container) {
// Get viewport dimensions (remove the dimension of the div)
$container = ($container || $(window));
var h = $container.height() - 50;
var w = $container.width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv() {
var $target = $('.imglogo');
for(let i=0; i<$target.length; i++){
var newq = makeNewPosition($($target[0]).parent());
var oldq = $($target[0]).offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$($('.imglogo')[i]).animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv();
});
}
}
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}
.imglogo{
width: 40px;
height: 40px;
background-color: blue;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imglogo"></div>
<div class="imglogo"></div>
<div class="imglogo"></div>
<div class="imglogo"></div>
<div class="imglogo"></div>
<div class="imglogo"></div>
<div class="imglogo"></div>

JQuery Animate setTimeout

As the subject, how can I set timeout for below jQuery?? Thank you
$(document).ready(function(){
animateM();
});
function newPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateM(){
var newq = newPosition();
$('.animateM').animate({ top: newq[0], left: newq[1] }, function(){
animateM();
});
};

In a basic scenario, the preferred, cross-browser way to pass parameters to a callback executed by setTimeout is by using an anonymous function as the first argument.:
function newPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
$(document).ready(function(){
var newq = newPosition();
setTimeout(function() {
$('.animateM').animate({
top: newq[0],
left: newq[1],
});
, 2000 ); // 2000 is duration
});

Try This
$(document).ready(function(){
var newq = newPosition();
$(".animateM").animate({left:newq[1]}, "2000")
.animate({top:newq[0]}, "5000");
});
function newPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animateM" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Jquery/javascript: circulate an image [duplicate]

I have an image (red, below), that I want to make travel along a circular path. The red image should always end in the same spot as it started.
Notes:
The grey circular path is invisible. I am just highlighting the path it will follow.
What is the best method/library to achieve this technique?

Do you really need a library, it's not that hard to do
$(document).ready(function (e) {
var startAngle = 0;
var unit = 215;
var animate = function () {
var rad = startAngle * (Math.PI / 180);
$('.circle').css({
left: 250 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
startAngle--;
}
var timer = setInterval(animate, 10);
});
FIDDLE
Here's one that does one loop, stops at the same place etc.
$(document).ready(function (e) {
var startAngle = 180;
var unit = 215;
var animate = function () {
if (startAngle > -180) {
var rad = startAngle * (Math.PI / 180);
$('.circle').css({
left: 250 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
startAngle--;
setTimeout(animate, 10);
}
}
$('.circle').on('click', function() {
startAngle = 180;
animate();
});
});
FIDDLE

Please look into these links:
CSS Technique
Stackoverflow Answers : Answer 1 || Answer 2
JSFiddle : Fiddle 1
var t = 0;
function moveit() {
t += 0.05;
var r = 100;
var xcenter = 100;
var ycenter = 100;
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));
$('#friends').animate({
top: newTop,
left: newLeft,
}, 1, function() {
moveit();
});
}
$(document).ready(function() {
moveit();
});

stopping rotating images when popup dialog box is active

I am using javascript functions to rotate images in an orbital manner. I also have created a popup dialog box as well. What I am trying to do is have it so that when the dialog box is active, the images stop even if i were to mouseout from the image.
Here is my javascript functions I have made:
var popupStatus = 0;
var timer = null;
var m = {
Z : 100,
xm : 0,
xmm : .25,
ymm : 0,
ym : 0,
mx : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
xR : 0,
nI : 0,
scr : 0,
img : 0,
run : function () {
m.xm += (m.xmm - m.xm) * .1;
if (m.ym < m.nw * .15) m.ym++;
m.xR += m.xm;
for (var i = 0; i < m.nI; i++){
var A = (i * 360 / m.nI) + m.xR;
var x = Math.cos(A * (Math.PI / 180));
var y = Math.sin(A * (Math.PI / 180));
var a = m.img[i];
a.style.width = ''.concat(Math.round(Math.abs(y * m.ym) + y * m.Z), 'px');
a.style.left = ''.concat(Math.round((m.nw * .5) + x * ((m.nw * .5) - (m.nw * .05)) - ((Math.abs(y * m.ym) + y * m.Z) * .5)), 'px');
a.style.height = ''.concat(Math.round(m.ym + y * m.Z), 'px');
a.style.top = ''.concat(Math.round((m.nh * .5) - (m.ym * .5) - x * (m.Z * .5) - (m.ymm * y)), 'px');
a.style.zIndex = 600 + Math.round(y);
m.setOpacity(a, (y * 50) + 100);
}
timer = setTimeout(m.run, 30);
},
resize : function () {
m.nx = m.scr.offsetLeft;
m.ny = m.scr.offsetTop;
m.nw = m.scr.offsetWidth;
m.nh = m.scr.offsetHeight;
},
mousemove : function (e) {
if (window.event) e = window.event;
m.xmm = (m.nx + (m.nw * .5) - (e.x || e.clientX)) / (m.nw * .25);
m.ymm = (m.ny + (m.nh * .5) - (e.y || e.clientY)) / (m.nh * .005);
},
setOpacity : function (obj, a) {
if (a < 0) a = 0; else if (a > 100) a = 100;
if (obj.filters) obj.filters.alpha.opacity = a;
else obj.style.opacity = a / 100;
},
init : function () {
m.scr = document.getElementById("screen");
m.img = m.scr.getElementsByTagName("img");
m.nI = m.img.length;
window.onresize = m.resize;
m.resize();
m.ym = m.Z;
m.run();
}
}
function stop(){
clearTimeout(timer);
}
onload = function() {
m.init();
}
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
();
}
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function posPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/350,
"left": windowWidth/2-popupWidth/8
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
posPopup();
//load popup
loadPopup();
stop();
});
});