OnResize Event in Javascript

OneResize Event in JavaScript

Hello guys, welcome to our series in JavaScript. The last segment was about an Onload event in JavaScript. This was about loading a window or webpage using methods like document dot onload and window dot onload and performing the loading time. We also understood all the differences in the last segment.

I hope you have practiced all the practicals that we saw in the last segment, at least once.

let’s begin,

Today we will conduct another segment in the same event, which is the On Resize event. The definition was covered in the first video.

When we resize a window with a mouse, that’s when the On Resize event is fired. There is a bit of theory in On Resize events like resizing a window.

As I have already mentioned, when a window is being resized, then our window’s resize event will be fired .

when a window is being resized, there is a width to that window. We have an object available called window,with the help of that we get all the properties of the window. When we learnt the object for the window, In that segment, we learnt how to get its height, weight, outerwidth, outerheight etc on resize event.

The same can be achieved through the On Resize event. When we have done this before, We called a function to achieve this. If we want to get this dynamically, meaning whenever it is being resized, if we want to get the output with outer width… outer height…inner width…inner height…client width…client height…offset width…offset height…at every moment, we can get window related event, in that case, we can use the On Resize method.

(02/31)

okay guys !

Next, if we are applying On Resize on our window, it’s best to add it in the body, it’s not mandatory to use it in the body only and not anywhere else, but we can use it anywhere, because we ultimately want to call this method and we get the output.

So here you can use on resize anywhere even in the script directly but it should be called. If we have written on resize event then, it should be called.This is our perspective.

Next, it is written here,

“ we can use the on resize attribute and assign the JavaScript function to it”.

We will assign an On Resize value to a function.

‘We can also use JavaScript's AddEventListner method and pass a resize event to it for greater flexibility.’

It means the way we clicked and double clicked, the same way, we can use JavaScript AddEventListner method to call On Resize.

So we have syntax here, exactly the same as click and double click, in HTML and JavaScript in two portions, by simple Javascript and AddEventListner JavaScript this can be performed. There will be an object requirement in Javascript and AddEventListner methods.

 We can also add On Resize on any element to make any function call.

Let us look at the first example, The example we have considered here, we have created a function, and we have added a variable for window outer width and window outer height in the window object that JavaScript provides us. That we have done through that,

And where have we printed this ?

We have printed this in inner HTML and we have taken ID a para and we have shown this in para.

but, The function should be called at some point. So that when it is called we can print it. So to do this what have we done ?

we have taken an On Resize event method in body.

Let us perform this practically.

Let’s say I open sublime text, (7 seconds pause ;mouse clicking)

Html….. example…onresize….HTML

(8 seconds pause ;typing)

We will save the program….. Resize HTML.

Here we have taken an ID in which we will be showing the output.

Let’s say I choose a tag called “p”, In which I will have an id named P1.

Here, I will create a function that prints the output of my window with outer width and outer height. …

Let’s say I make a function, and name it ‘function… onResize…’ .

In this I will use the window object to take the outer width and outer height.

So let’s say in P1 we print this.

 document dot …getelementbyID… P1….dot…innerHTML equal to…here, window width…( 3 seconds pause;typing ) equal to…hereafter plus, window dot….outer width then we will give plus,...then give space …window…. height….equal to… then again plus….window…dot…outer height…

(06/51)

So this is our statement. Let’s say I call On Resize in the body, so On resize…this is my function.. and save.

We will call the program and execute it.

So this is our program, let me bring this out.

You can see, so as soon as I bring the tab down, my statement is executed….

 Currently my window width is 1323 and window height is 652.

Now when I resize it, as you can see the outputs are changing according to my window size. okay..

when I make it bigger, output is also getting increased.

So you can see that here, this proves that the body tag on resize method is being called at every moment. and we have been getting output. It has been changing So whenever I resize the window, at every moment, the resize method written in the body is being executed. So this was our event, that is called at every moment. So we can get outer width and outer height with the help of on resize. It’s not necessary, you can write a function as well, you can add any function but that function will not be called on resize. We will have to explicitly execute it. Then, it will be executed ! It’s better that we write On Resize.

Now next thing is ,

If I have to check how many times I have resized the window, now we will add the value of the number of times it was resized.

Let’s say that I take a P here,( 4 seconds pause ;typing) and inside it I write ,``This… window… is… resized…” , then I give some space then in span….. id ..equal to…for example we will give, S1. Now we will add value inside this to see how many times our window gets resized on reloading.

Let’s take a variable, and give it a name var…equal to… S1, we will add the S1 variable within the function so that it increments every time the window is resized. When my function is called, on the time of resize, I always increase S1. 

so, we will write here,

 S1 …equal to… S1…plus…1 .

So I can also write S1 …equal to…zero.. so that it is followed by one.

Now when do I have to print this in the span?

We will write here,

document….dot…getelement…by Id …, and… here comes the S1, then, here we will write…inner HTML…equal to..

 Let's take the value of S1. and the value of S1…Save…Reload. ..

“window is resized”..

When I start resizing the window, and as I keep resizing it the count also keeps increasing. It shows the dimensions and the number of times I have resized the window. The count shows how many times I have resized this window..

Okay..understood !

 If I reload the window, “the window is resized” there should be a value here, but there isn’t because I haven’t resized the window yet. As soon as I resize it from anywhere, not necessarily from the same point. If we do it from this end only the width changes. And if done from the bottom, only the height changes. So this way you can call the window resize method.

I hope you are clear up till now,

Let’s go back to the slide, this is our function, how did we execute it? Through HTML.

Next is exactly the same thing, there is no difference.

We will do the exact same thing, “on resize’ using an object.

There are a few tricks to this. we will see that along with this..

(11/04)

Firstly, we will open sublime text. Copy paste the program.

Here, on resize…. javascript…. Save.

We will keep this portion as it is…we will keep this too as it is…even this portion we will keep as it is… what will we remove ?

We will only remove this particular part; on resize ..

 We are not calling this function, we are directly calling on resize.

How will it be done? …

S1 is initialised, function will be added here,(3 seconds pause ;typing )

document ..dot…getelement…by…id 

and here we have to add, not Id exactly but the way we wrote resize in the body, body being a tag, so here we write get element by…. tag name. We have already learnt, get element by tag name in the previous segment.

So here we will write body…., which is our tag dot….onresize…. gives some space, This is … our function and we will remove this portion.

Here I have written body, I have written On resize, that's it.

First of all we will check if the program is running or not. (5 seconds pause ;mouse )

I will initially add zero…(4 second pause ;typing) and close this program.

Here it is. (3 seconds pause )

Now when I resize the window, the output is not being generated. Why? We can check in the console to know what the problem is…So you can see here, ..Uncaught Typeerror…document..dot..getElement by tag name …is not a function..

 If this is not the function, then which is it?

If you remember, the method name is here..in that there is get elements… in which s has been added.

So if I add s and reload it, you can see that once I closed it I got the output.

Now if I resize it,(3 seconds pause )

 I’m getting the output. Okay?

So you can see that was the mistake. Instead of get element by tag name, we have to write get elements by tag name. And here it is necessary to add zero. Let’s say, I remove it, and save it..

Save, reload.

If I perform, again it is not working. It is important to have zero as the column because it indicates that when we applied get element by ID on body, what returned to us was an array.

It means of all the elements in the body it is necessary to choose the one in the first position.

So at here, if we perform get elements by tag name on body..then,

Make sure to add zero. It is very important from the internal perspective. if we perform get elements by tag name on Only body, It will not work. we have to add zero. Why is it required?

What is the reason that we are getting array ..

The reason is that get element by id only works on one element. Why? Because HTML has one element for each ID. Because ID is a unique.

(15/00)

Tags are for more than one element . We can see here we have two P tag here, So if I apply get element by ID on p tag, then,

I will not get ‘p’ in return directly, I will first get an array, which will indicate me about the position, zeroth or first.

That means when we use get elements by ID then, we get an array in return.

We have applied zeroth position means on the first element on that array. We have applied OneResize on this. There is only one body tag in the program otherwise errors will occur. You can check this by adding two body tags.

If you want to see what happens ..

If I have to work with this, Not only body, but if you have to work with get element by tag name, you will surely get an array in return. So, in the array on which element you want to apply, to check this, you have to add a number.

In the current program only one body will be returned so we will write zero. This is the program with on resize. We will perform the same program with the help of AddEventListner.

We will copy and paste it as it is.

here, body ..zero as it is..

here, we will have …add…event…listener..(3 seconds pause ;typing)

We will write the function inside this. ,that we have written. If I bring back my function called On …Resize, if you are aware, when we use an event listener we don’t use the word on in onresize.

so, what we will use here…Resize…then, comma.. This is our function.

We will save it… and check if our program is running successfully.

As you can see this program also has a lot of errors. We will check where we’re going wrong in the program.

So what is wrong in our program is,

In all the programs so far, we have applied AddEventListner on the object,

but,

In the current program, only in the case of resize..

add event listener, here….we should not take the body as the context because window in itself is an object.. so we will apply AddEventListner to the window object…

so, I will make these changes ..and Save and reload.

As you can see my program is working.

So here, in comparison to all add event listener

So what’s the major difference here on on resize method of add event listener ?

It’s that we add it to an object while in this case the window itself is an object.

so that we don't need to take context of the body, We can simply add AddEventListner resize to the window.

(18/34)

While performing practically do remember that in HTML we write onresize event handler followed by event method and after that you have to execute it.

Next, you have to use the window as an object. If you are using JavaScript to perform onresize , and if you are using body’s get element by ID, then you have to mention zero as the position.

And third, if we are using the add event listener method, then in that case,we have to write window object directly, get element by id will not work here.

We have completed all the three practicals in HTML… JavaScript and AddEventListner.

We end the events module here. 

So guys, the events module is very important since it has a lot of different programs. We worked on click..double click..resize…and load..all four are completely different programs.

We worked differently on these events.

And AddEventListner is of course the most important part.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Thank you..

(edited script)