I'm personally making use of this trick on my fullPage.js library because it does a few changes on the DOM on resize. Functions for manipulation Using the updateImageSizeWithWidth or updateImageSizeWithHeight method below, you can increase or decrease any image without having to explicitly specify the exact width and height, you only need one value out of these two to update the image size.
Users can now freely resize the containers and therefore, our logic changes a bit: observe a change in the container, caused by the resize event if the change happens, call a function, that resizes. This counter of 500 milliseconds gets restarted with every change in the window dimensions (as we clear the timeout) so the function will only be called if the user stops resizing the window OR if the user resizes the window VERY slowly, which is very unlikely :) The resize functionality is natively implemented by (most) modern browsers along with the displayed handle on the bottom right of the containers. ResizeId = setTimeout (doneResizing, 500 ) īasically what we do in this case is adding a timeout of 500 milliseconds to call our function doneResizing. Examples // Shrink the window window. yDelta is the number of pixels to grow the window vertically. Syntax resizeBy(xDelta, yDelta) Parameters xDelta is the number of pixels to grow the window horizontally. In JavaScript, using the addEventListener () method: object. For those cases we don't usually want to execute them tens of times while the user is still re-sizing the window to reach the desired size.įor these particular cases we can use a very simple trick: var resizeId The Window.resizeBy () method resizes the current window by a specified amount. Sometimes we need to execute functions which might take a while to execute or which might consume quite a few resources from the machine. JQuery resize event (or Javascript one) is fired when the size of the browser's window (viewport) changes as pointed out in jQuery documentation.
0 kommentar(er)
