EVENTS - resize()

The resize() event occurs whenever change the size of browser.

One instance when the browser is resized is when you maximise or minimise the browser.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
   	
        <p> </p>

      	<script>
      
			$( window ).resize(function(){
  				$("p").text("You have resized the browser");
			});
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there is an empty <p> element,

<p> </p>

Now, if we see the JQuery statement,

$( window ).resize(function(){
	$("p").text("You have resized the browser");
});

We are dealing with the entire browser window.

So the selector is the window itself.

Then we call the resize() event.

$( window ).resize(...);

And the anonymous function inside the resize() event,

function(){
	$("p").text("You have resized the browser");
}

Is used to display the mouse pointer with respect to X and Y i.e. Left and Top.

$("p").text("Mouse pointer for X: "+event.pageX+" and Y: "+event.pageY);

❮❮ PREV NEXT ❯❯