logo
down
shadow

Idle event on mouse move - how to stop script permanently on mouse move


Idle event on mouse move - how to stop script permanently on mouse move

Content Index :

Idle event on mouse move - how to stop script permanently on mouse move
Tag : javascript , By : silvervino
Date : January 12 2021, 09:11 PM

I wish this helpful for you I've got problem with my code. What I'm trying to achive: , I guess you need something like this:
jQuery(document).ready(function( $ ){

let idleTimer = null,
    loopTimer = null,
    idleWait  = 1000;

(function ($) {

    $(document).ready(function () {
      //Cache the query
      let $animatedElement = $('#news-main-page');
      
      let animateElements = function(){
      	$animatedElement.delay(1500).fadeOut(); 
        $animatedElement.delay(1500).fadeIn(); 
      };
      
      let myFunc = function () {
      	
				
        clearInterval(loopTimer);
        clearTimeout(idleTimer);
        $animatedElement.stop(true);
        
        
        idleTimer = setTimeout(function () { 
          //Idle Event
          //Loop the animation
          loopTimer = setInterval(function(){
          	animateElements();
          }, 3000);
          
          //Call animate elements once to prevent additional delay
          //from setInterval call
          animateElements();
          
        }, idleWait);

      };

       $('*').bind('mousemove keydown scroll',myFunc);
       //Start the idle loop
       myFunc();

    });
}) (jQuery)
  
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="news-main-page">
  <p>Hello World</p>
  <button>Change color</button>
</div>
jQuery(document).ready(function( $ ){

let idleTimer = null,
    loopTimer = null,
    idleWait  = 1000;

(function ($) {

    $(document).ready(function () {
      //Cache the query
      let $animatedElement = $('#news-main-page'),
          $allElements = $('*');

      let animateElements = function(){
        $animatedElement.delay(1500).fadeOut(); 
        $animatedElement.delay(1500).fadeIn(); 
      };

      let stopAnimationLoop = function() {
        clearInterval(loopTimer);
        clearTimeout(idleTimer);
        $animatedElement.stop(true);
      };

      let handleUserAction = function() {
        $allElements.unbind('mousemove keydown scroll', handleUserAction);
        stopAnimationLoop();
      };

      let myFunc = function () {

        idleTimer = setTimeout(function () { 
          //Idle Event
          //Loop the animation
          loopTimer = setInterval(function(){
            animateElements();
          }, 3000);

          //Call animate elements once to prevent additional delay
          //from setInterval call
          animateElements();

        }, idleWait);

      };

       $allElements.bind('mousemove keydown scroll', handleUserAction);
       //Start the idle loop
       myFunc();

    });
}) (jQuery)

});

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

How can I use javascript timing to control on mouse stop and on mouse move events


Tag : javascript , By : ziqew
Date : March 29 2020, 07:55 AM
I wish did fix the issue. So I have a control (a map) on an aspx page. I want to write some javascript to onload setup the following: , That is a tricky one. A little bit of tinkering resulted in this:
function setupmousemovement() {

  var map1 = document.getElementById('Map_Panel');
  map1.onmousemove = (function() {
    var timer,
        timer250,
        onmousestop = function() {

          // code to do on stop

          clearTimeout( timer250 ); // I'm assuming we don't want this to happen if mouse stopped
          timer = null;  // this needs to be falsy next mousemove start
        };
    return function() {
      if (!timer) {

        // code to do on start

        timer250 = setTimeout(function () { // you can replace this with whatever

          // code to do when 250 millis have passed

        }, 250 );
      }
      // we are still moving, or this is our first time here...
      clearTimeout( timer );  // remove active end timer
      timer = setTimeout( onmousestop, 25 );  // delay the stopping action another 25 millis
    };

  })();

};

Mouse down,mouse move and mouse up event for an image?


Tag : javascript , By : Salikh
Date : March 29 2020, 07:55 AM
wish help you to fix your issue How to move an image with mouse? onmousedown and onmousemove are the events to handle right? , like this:
<html> 
  <head>
    <style>
      html,body {
        height:100%;
      }
    </style>


    <script type="text/javascript"> 
      var omnaEl,dragData=null;
      function window_onload() {
        omnaEl=document.getElementById("omna")
        if(window.addEventListener) {
           omnaEl.addEventListener('mousedown',startDrag,false);
           document.body.addEventListener('mousemove',drag,false);
           document.body.addEventListener('mouseup',stopDrag,false);
        }
        else if(window.attachEvent) {
           omnaEl.attachEvent('onmousedown',startDrag);
           document.body.attachEvent('onmousemove',drag);
           document.body.attachEvent('onmouseup',stopDrag);
        }
      }


      function startDrag(ev) {
        if(!dragData) {
          ev=ev||event;
          dragData={
            x: ev.clientX-omnaEl.offsetLeft,
            y: ev.clientY-omnaEl.offsetTop
          };
        };
      }
      function drag(ev) {
        if(dragData) {
          ev=ev||event;
          omnaEl.style.left=ev.clientX-dragData.x+"px";
          omnaEl.style.top=ev.clientY-dragData.y+"px";
        }
      }
      function stopDrag(ev) {
        if(dragData) {
          ev=ev||event;
          omnaEl.style.left=ev.clientX-dragData.x+"px";
          omnaEl.style.top=ev.clientY-dragData.y+"px";
          dragData=null;
        }
      }

     </script> 
  </head>
  <body onload='window_onload();'>
    <img id="omna" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRi-8XnnXwAZmz_5R5LHRHMNlnYYHCP4WqRdu6vhf_ru8wLK9XB3IrNrwix" 
        width="100px" height="100px" unselectable="on" style="position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;"/>
  </body>
</html>

Getting a mouse drop event in Qt 5 if mouse doesn't move before mouse release


Tag : qt , By : cameron
Date : March 29 2020, 07:55 AM
I wish did fix the issue. The issue has--as of 1-May-2014--been acknowledged as a bug by the Qt team:
https://bugreports.qt-project.org/browse/QTBUG-34331

How we move a label when mouse click on it and when mouse key up then stop moving inside a group box


Tag : chash , By : Ir0nh1de
Date : March 29 2020, 07:55 AM
seems to work fine The e.Location gives you a mouse position relative to the control that is being clicked. So to fix that, instead of
   label13.Location = e.Location;
   var pos = this.PointToClient(Cursor.Position);
   label13.Location = new Point(pos.X - offset.X, pos.Y - offset.Y);`
offset = e.Location;

how can I stop (or break) script with mouse move


Tag : development , By : Yolanda N. Ceron
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • Is there another way to write line 6
  • Cypress - how to find by text content?
  • How to setstate for the dynamic checkboxes in a loop in react?
  • Is display:none safe?
  • How to create a form to change part of a href url of a button?
  • Put many function inside function in Javascript
  • how to exit from loop after a ajax call
  • Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?
  • How to Replace Text Within Script Tags Using JQuery
  • add variable to object if not undefined using short-hand
  • How can I effectively curve my items inside a list?
  • Add new record Keyboard Shortcut on Kendo Grid Mvc
  • Time and Date running on page
  • Looping through page links puppeteer doesn't return values from the newly loaded page
  • Problem with Navigator.geoLocation.getCurrentPosition not working
  • Trying to change the id of an element with Javascript
  • Embedded Schema Inserting Blank in Meteor using Collection2
  • avoid useEffect to render at first load?
  • Why is this CSS transition only working correctly on the some clicks? How to solve it?
  • Interpolated values does not reflect the latest values in an Angular app
  • Javascript classes define attribute in constructor or outside the class
  • How to block scroll event passing through to iframe until iframe is active?
  • What is the purpose of "constructor" method in javascript?
  • Stencil JS not working with non-default imports
  • Are frameworks misleadingly named for marketing purposes?
  • React <Redirect> after transition not working
  • How to send multiple parameters in a function using EJS
  • React conditional style on custom click
  • Push a block of information to an array X times based on an external variable
  • How do I populate dropdown with names, and values (numeric ids)?
  • How to apply styling to elements created with .insertAdjacentHtml method
  • Positioning key:value of an object
  • Referencing DOM Elements with React Hooks
  • TypeError: Method "getRange" of null when using multiple scripts (Libraries) in Google scripts
  • Why can't I check if an environment variable is undefined?
  • Is there a way to find what parts are the same between two strings?
  • Every change done with magicscroll and greensock get reset when I hit the bottom of the page
  • Fix a 'Cannot read property handleClick of undefined error' (and issues related to deleting an item from the DOM)
  • Answer to message if sent within a period of time
  • Enabling a button based on selected values
  • Get All possible matches between forward slashes
  • get the CSS maxWidth value of the parent javascript
  • Async function returning existing array as undefined
  • Using drop-down list to change multiple values in separate table cells
  • How to remove nested empty objects in JavaScript?
  • Convert value from text field to paragraph
  • Sorting a list based on instructions in Javascript
  • Post request doesn't work in NodeJS, OK with Request
  • How to make footer align to center in nested component scenario in React
  • fresh installed pwa does not show content
  • Working around unset "length" property on partial functions created with lodash's partialRight
  • V8 console.log does not print
  • Use child array to get count for table
  • How to create an array of objects in JavaScript?
  • How can I show date and time in the following format: "Saturday 30 April 2011, 12:05"?
  • Text is shaking on increasing font size
  • Display button when input is not empty | not working JS
  • Arrow function ES6
  • Any way of stop repeating while exporting functions in node?
  • Using one HTML keyboard for two or more text boxes and specifically three in this context
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com