Then we’ll set up a transparent pseudo-element with the cursor we want. We’ll set up a 1px border on the right side to give the user a hint that the handle is there. I also want the mouse cursor to change to an arrow pointing left and right.įor our vertical handle, we want to set the width of the element to 0 and set the height to match the parent element. To make an element wider, I want to be able to click and drag on the right border of the element until I get to the size I want. I’ve mentioned the “handle” a few times now, but I want to describe what I want it to do. We’ll have to make a handle that we can use, set up our event listeners, and finally, resize our element. I’ll highlight the important parts of getting a width-resize handle to work in this blog post, but the full source code will be included afterward. I want to make a resize handle on the border of an element instead of the corner. The handle is very rigid-it can’t be styled or moved, and the element can only resize when you drag that handle. But you can’t do anything with the left or top side. From there, you can expand or shrink the bottom and right side.
The property will add a handle to the bottom right corner of your element. But implementing the feature isn’t as easy as it looks.ĬSS has a built-in resize property, but it’s limited in functionality. Please check out the tutorial on JavaScript event listeners to learn more about it.Being able to resize an HTML element is a handy feature. You should better assign a new event handler to the resize event using event listener, as shown in the example above. You should avoid using the solution like window.onresize = function(event), since it overrides the window.onresize event handler function.
Note: Please resize the browser window to see how it works.
Calling the function for the first time Window.addEventListener("resize", displayWindowSize) Attaching the event listener function to window's resize event Var h = ĭocument.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h Get width and height of the window excluding scrollbars
0 kommentar(er)
