Positioning style.left for DIV with javascript does not work

Question

I just want to make a DIV jiggle on mouse stop. So I thought I'd set the style.left property using javascript and some timers. To simulate a mouse stop even, I created a timer that is set and cleared as long as the mouse is moving. When the mouse stops, the timer is no longer cleared, and the simulated event "fires." This sets up three more timers. First timer moves the DIV left by 5 pixels. Next timer moves the DIV right by 5 pixels. Final timer moves DIV back to original position.

Sounds easy, and the style.left property of the DIV gets written to the console, which reports the correct values.

But...I never see the DIV move. Why????

The complete code is:

 var jLeft = document.getElementById('jiggle').style.left; function myMoveFunction() { //Keep clearing and setting the timeout event as long as the mouse is in motion. //When the mouse stops, the timeout event will fire. if (typeof touchTimeout == 'undefined') { touchTimeout = setTimeout(myTimeOut, 50); } else { clearTimeout(touchTimeout); touchTimeout = setTimeout(myTimeOut, 50); } //If the mouse is in motion, clear all jiggling events if (typeof jigLeft !== 'undefined') clearTimeout(jigLeft); if (typeof jigRight !== 'undefined') clearTimeout(jigRight); if (typeof jigZero !== 'undefined') clearTimeout(jigZero); console.clear(); } function myTimeOut() { //set up all jiggling events setTimeout(jigLeft(), 1); setTimeout(jigRight(), 50); setTimeout(jigZero(), 99); } function jigLeft() { jLeft = '45px'; console.log('Move Left: ' + jLeft); } function jigRight() { jLeft = '55px'; console.log('Move Right: ' + jLeft); } function jigZero() { jLeft = '50px'; console.log('Move Zero: ' + jLeft); }

 DIV#jiggle { position: absolute; left: 50px; top: 10px; width: 500px; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id='jiggle' onmousemove="myMoveFunction()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id libero a enim semper bibendum. Suspendisse sodales vulputate posuere. Nulla ac blandit neque, ultricies molestie eros. Donec mauris dolor, rhoncus ac varius sit amet, condimentum sed libero. Nunc pellentesque quam odio, sit amet vulputate justo blandit sit amet. Sed lorem eros, aliquet at ex quis, cursus gravida urna. Aliquam erat volutpat. Suspendisse rhoncus vulputate nisi non ornare. Proin tincidunt sollicitudin elit, eget aliquam nisi bibendum at. Duis eget lectus nisi. Praesent nec purus efficitur, pharetra felis sit amet, varius magna. Donec eu justo pretium metus sagittis congue id et lacus. Fusce posuere lacinia nulla a elementum. Nulla consequat mauris orci, ullamcorper viverra arcu tincidunt sed. Morbi a sem porta est tincidunt semper eu sit amet quam. Integer placerat non risus et elementum. Phasellus eu orci viverra, aliquet est id, condimentum leo. Nunc ac interdum nunc. Morbi at risus nunc. Morbi semper turpis elit, vel lacinia elit congue id. Maecenas cursus, tellus condimentum pulvinar viverra, ante orci placerat erat, vitae pharetra urna neque quis sem. Nullam non sollicitudin ante, at iaculis sem. Mauris sagittis eros dolor, vitae tempus libero gravida in. Suspendisse et placerat urna, sed tincidunt nulla. Nam tincidunt pulvinar nisi in condimentum. Sed sem ante, scelerisque eget nulla vitae, elementum mattis turpis. Vestibulum in imperdiet risus. Vestibulum aliquam augue nec tristique pretium. Nullam vestibulum, felis ut iaculis interdum, ante enim suscipit justo, ac consequat lacus nulla vel turpis. Sed lacinia, leo vel hendrerit aliquet, elit lectus tempor augue, tincidunt condimentum turpis erat eget ipsum. Nam lectus nibh, laoreet sed accumsan nec, ullamcorper suscipit lectus. Cras faucibus in elit vitae interdum. Morbi vulputate sapien lacus, vel aliquet erat posuere nec. Suspendisse non nibh sapien. Nullam pulvinar diam a aliquam placerat. Donec porttitor commodo nulla, vel egestas libero facilisis sit amet. Donec eget justo pretium, sagittis ligula in, aliquam orci. Pellentesque ornare purus ut nisi accumsan vehicula. Sed imperdiet dictum odio, in tempor diam rhoncus ut. Mauris vel urna vel turpis cursus facilisis. Suspendisse eget posuere dolor, eget vulputate massa. Mauris eget ante ac ante accumsan luctus. Curabitur imperdiet condimentum felis, eget faucibus nisl dapibus eu. Curabitur aliquet consectetur dolor, dapibus hendrerit lectus bibendum in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ligula nisl, malesuada at tortor at, faucibus maximus dolor. Vivamus condimentum mi at est lobortis, quis pulvinar justo consectetur. Cras eu nunc quis velit placerat consectetur. Quisque dui felis, placerat id tempor eget, maximus ut lacus. In ante lacus, luctus vel turpis lobortis, dictum dictum massa. Curabitur rutrum dolor ut tincidunt venenatis. Vivamus aliquam ante quam, non cursus enim sollicitudin vitae. Sed rhoncus metus tempor scelerisque interdum. Pellentesque metus mi, varius ac purus et, euismod commodo purus. Donec eu purus consequat, gravida ipsum quis, efficitur eros. Nulla ornare turpis et nulla consectetur feugiat. </div> </body> </html>

Answer 1

In case you're looking for the fixed code, here it is

HTML

<div id='jiggle' onmousemove="myMoveFunction()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id libero a enim semper bibendum. Suspendisse sodales vulputate posuere. Nulla ac blandit neque, ultricies molestie eros. Donec mauris dolor, rhoncus ac varius sit amet, condimentum sed libero. Nunc pellentesque quam odio, sit amet vulputate justo blandit sit amet. Sed lorem eros, aliquet at ex quis, cursus gravida urna. Aliquam erat volutpat. Suspendisse rhoncus vulputate nisi non ornare. Proin tincidunt sollicitudin elit, eget aliquam nisi bibendum at. Duis eget lectus nisi. Praesent nec purus efficitur, pharetra felis sit amet, varius magna. Donec eu justo pretium metus sagittis congue id et lacus. Fusce posuere lacinia nulla a elementum. Nulla consequat mauris orci, ullamcorper viverra arcu tincidunt sed. Morbi a sem porta est tincidunt semper eu sit amet quam.
</div>

CSS

DIV#jiggle{
  position:absolute;
  left:50px;
  top:10px;
  width:500px;
}

JS

var jLeft = document.getElementById('jiggle').style.left;

function myMoveFunction(){
  //Keep clearing and setting the timeout event as long as the mouse is in motion.
  //When the mouse stops, the timeout event will fire.
  if (typeof touchTimeout == 'undefined') {
    touchTimeout = setTimeout(myTimeOut, 50);
  } else {
    clearTimeout(touchTimeout);
    touchTimeout = setTimeout(myTimeOut, 50);
  }
  //If the mouse is in motion, clear all jiggling events
  if (typeof jigLeft !== 'undefined') clearTimeout(jigLeft);
  if (typeof jigRight !== 'undefined') clearTimeout(jigRight);
  if (typeof jigZero !== 'undefined') clearTimeout(jigZero);  
  console.clear();
}

function myTimeOut(){
  //set up all jiggling events
  setTimeout(jigLeft, 1);
  setTimeout(jigRight, 50); 
  setTimeout(jigZero, 99); 
}  

function jigLeft() {
  document.getElementById('jiggle').style.left ='45px';
  console.log('Move Left: ' + jLeft);
}
function jigRight() {
  document.getElementById('jiggle').style.left = '55px';
  console.log('Move Right: ' + jLeft);  
}
function jigZero(){
  document.getElementById('jiggle').style.left = '50px';
  console.log('Move Zero: ' + jLeft);  
}

As pointed out by @Quentin, there's a lot of things wrong with your code. This answer fixes most of them.

Here's a fiddle:

https://codepen.io/faisalrashid/pen/dybVvdQ

Answer 2

Problem 1

 document.getElementById('jiggle')

This throws an exception. The element does not exist in the DOM at the time you run it.

Problem 2

 var jLeft = document.getElementById('jiggle').style.left;

This copies the value . It does not create a reference.

Later, when you assign to jLeft you change only the value of the variable. Not the value of the property.

Problem 3

 setTimeout(jigLeft(), 1);

You're calling jigLeft immediately and assigning the return value as the function to run later. It doesn't return a function.

Problem 4

 (typeof jigLeft !== 'undefined')

This will never be undefined. It will always be a function.

Positioning style.left for DIV with javascript does not work

Question

2 answers

solution1
1 ACCPTED 2019-09-02 18:21:27

solution2
0 2019-09-02 18:12:13

Problem 1

Problem 2

Problem 3

Problem 4

Positioning style.left for DIV with javascript does not work

Question

2 answers

solution1 1 ACCPTED 2019-09-02 18:21:27

solution2 0 2019-09-02 18:12:13

Problem 1

Problem 2

Problem 3

Problem 4

solution1
1 ACCPTED 2019-09-02 18:21:27

solution2
0 2019-09-02 18:12:13