Menu
I'm making a JS/PHP plugin for distribution. I want it to be as easy to install as this:
<HTML> <HEAD> <TITLE>Testing my Plugin</TITLE> <?php include 'path/to/myPlugin.php'; echo getMyPluginHeadContent(); ?> </HEAD> <BODY> <?php echo getMyPluginContent("Arguments will go here"); ?> </BODY> </HTML> However, I want this plugin to attach a window resize listener without overriding window.onresize, in case there are any other scripts that also require the use of that method. Is there any javascript command like document.addEventListener("resize", myResizeMethod, true);? I know that's not it, because that's not working, and the MDN and W3C are very vague about what arguments addEventListener takes.
I do not want an answer telling me to use window.onresize = myResizeMethod or <BODY ONRESIZE="myResizeMethod">, as these are not as plugin-friendly.
402
You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window. addEventListener('resize', ...) . The following example will display the current width and height of the browser window on resize.
The resize event fires when the document view (window) has been resized. This event is not cancelable and does not bubble. In some earlier browsers it was possible to register resize event handlers on any HTML element.
The onresize event occurs when the browser window has been resized.
You can not control the size of the window. You can use CSS to set min-width and min-height properties to ensure your page layout stays sane. using 'window. open' I can open a page with a fixed height width.
Since you are trying to call this function on the resize of the window, you will want to bind the function to the window and not to the document. To support versions of IE that are less than 9, you will want to use attachEvent. Please note that attachEvent requires you to specify the on keyword. Here is an example:
if(window.attachEvent) { window.attachEvent('onresize', function() { alert('attachEvent - resize'); }); } else if(window.addEventListener) { window.addEventListener('resize', function() { console.log('addEventListener - resize'); }, true); } else { //The browser does not support Javascript event binding } Similarly, you can remove events in the same way. When using removeEventListener, make sure that you pass the same value of useCapture as you did when calling addEventListener. This is the third parameter which is the true/false value.
if(window.detachEvent) { window.detachEvent('onresize', theFunction); } else if(window.removeEventListener) { window.removeEventListener('resize', theFunction, true); } else { //The browser does not support Javascript event binding } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
