Detecting if the browser window is moved with JavaScript?

Asked
Active3 hr before
Viewed126 times

6 Answers

detectingwindowbrowser
90%

If you are moving the window in Windows OS via alt + Space, and find that windows resizes are ignored, I would recommend adding an extra level of detection via keypress events.,This is for a demo... and i was just curious, can you detect if the window has been moved? Like if you move Firefox/Chrome/IE around your monitor? I doubt it, but I wanted to see since you can check for resize and focus/blurred windows.,Unfortunately not. The DOM is only notified about window sizes, cursor positions, "focus" and "blur", etc; anything that affects drawing. Since moving a window doesn't necessarily require any of the contents to be "redrawn" (in a Javascript/Html engine sort of sense), the DOM, therefore, doesn't need to know about it., Re-sizing directly affects the viewport, so there are event listeners for onresize. But moving the desktop window does not change anything within the browser. – Josiah Ruddell Nov 30 '10 at 22:54

I can only think of this (heavy) work-around, where you check if window.screenX and window.screenY have changed every x milliseconds

var oldX = window.screenX,
   oldY = window.screenY;

var interval = setInterval(function() {
   if (oldX != window.screenX || oldY != window.screenY) {
      console.log('moved!');
   } else {
      console.log('not moved!');
   }

   oldX = window.screenX;
   oldY = window.screenY;
}, 500);
load more v
88%

In this tutorial, I show how you can use JavaScript to detect whether Browser Tab Window is active or not.,If you want to know How much time the user active on your website, in this case, you can use JavaScript. Using that you only enabled the timer when the user is an active tab on your website.,Home » Javascript » How to Detect Browser Window is Active or not – JavaScript,For example – you want to know when the user closes the Browser Tab and execute your code.

Completed Code

<div class='container'>
 Seconds : <div id='seconds'></div>
</div>

<!-- Script -->
<script type='text/javascript'>
 
 var count = 0;
 var myInterval;
 // Active
 window.addEventListener('focus', startTimer);

 // Inactive
 window.addEventListener('blur', stopTimer);

 function timerHandler() {
  count++;
  document.getElementById("seconds").innerHTML = count;
 }

 // Start timer
 function startTimer() {
  console.log('focus');
  myInterval = window.setInterval(timerHandler, 1000);
 }

 // Stop timer
 function stopTimer() {
  window.clearInterval(myInterval);
 }
</script>
72%

The addEventListener() method is used to set up a function whenever a certain event occurs. The beforeunload event is fired just before the windows and its resources are to be unloaded. When this event is fired, the webpage is visible and the event is still cancellable at this point.,A tab or window closing in a browser can be detected by using the beforeunload event. This can be used to alert the user in case some data is unsaved on the page, or the user has mistakenly navigated away from the current page by closing the tab or the browser.,JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.,This method works for detecting both when a tab is being closed or when the browser is being closed.

Syntax:

window.addEventListener('beforeunload', function(e) {
   e.preventDefault();
   e.returnValue = '';
});
load more v
65%

Returns a reference to the document that the window contains.,Returns a reference to the parent of the current window or subframe.,Returns a reference to the screen object associated with the window.,Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.

load more v
75%

Possible clue on how to do this here: http://stackoverflow.com/questions/923299/how-can-i-detect-when-the-mouse-leaves-the-window,Make a simple webpage, and when the user's mouse goes above the RED LINE, then this advert will show (in a modal environment):,In other words, IF the user moves his mouse above the red line, THEN show the advertisement.,Then you got a hidden div container which will popup in the midst of your page,ofc you might like it somewhere else Next you only need the javascript to make it show, which you should also place at the bottom of your page best will be after the div container the javascript can definetly find the divs id The Code will be:

Hi,
The solution to your problem is pretty straight forward and the link you posten really tell you all you need:
First your put your image in a hidden div container somewhere in the page i would adive the bottom with some absolut positioning lets say you put this in the bottom of your page sourcecode:
<div id="advert" style="position:absolute;top:50%;left:50%;margin:-100px 0px 0px -150px;display:none">
<img src="http://naplesnewsonline.com/wp-content/uploads/2011/09/techniqolAdvertisementSalinaPost.png">
</div>

<div id="advert" style="position:absolute;top:50%;left:50%;margin:-100px 0px 0px -150px;display:none">

Hi,
The solution to your problem is pretty straight forward and the link you posten really tell you all you need:
First your put your image in a hidden div container somewhere in the page i would adive the bottom with some absolut positioning lets say you put this in the bottom of your page sourcecode:
<div id="advert" style="position:absolute;top:50%;left:50%;margin:-100px 0px 0px -150px;display:none">
<img src="http://naplesnewsonline.com/wp-content/uploads/2011/09/techniqolAdvertisementSalinaPost.png">
</div>

<img src="http://naplesnewsonline.com/wp-content/uploads/2011/09/techniqolAdvertisementSalinaPost.png">

Hi,
The solution to your problem is pretty straight forward and the link you posten really tell you all you need:
First your put your image in a hidden div container somewhere in the page i would adive the bottom with some absolut positioning lets say you put this in the bottom of your page sourcecode:
<div id="advert" style="position:absolute;top:50%;left:50%;margin:-100px 0px 0px -150px;display:none">
<img src="http://naplesnewsonline.com/wp-content/uploads/2011/09/techniqolAdvertisementSalinaPost.png">
</div>

</div>
load more v
40%

$(window).on("blur focus", function(e) {
   var prevType = $(this).data("prevType");

   if (prevType != e.type) { //  reduce double fire issues
      switch (e.type) {
         case "blur":
            // do work
            break;
         case "focus":
            // do work
            break;
      }
   }

   $(this).data("prevType", e.type);
})
load more v

Other "detecting-window" queries related to "Detecting if the browser window is moved with JavaScript?"