dom-events – Page 4 – Tarik Billa

Detect if the iframe content has loaded successfully

December 6, 2023 by Tarik

I found the following link via Google: http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/ Don’t know if it solves the ‘Page Not Found’ issue. <script type=”javascript”> var iframe = document.createElement(“iframe”); iframe.src = “http://www.your_iframe.com/”; if (navigator.userAgent.indexOf(“MSIE”) > -1 && !window.opera) { iframe.onreadystatechange = function(){ if (iframe.readyState == “complete”){ alert(“Iframe is now loaded.”); } }; } else { iframe.onload = function(){ alert(“Iframe is … Read more

Overriding control+s (save functionality) in browser

December 4, 2023 by Tarik

You receive two keydown events: The first is for the control key, and the second is for the letter with the modifier flag turned on. Here’s how you listen for a key with a modifier pressed: document.addEventListener(“keydown”, function(e) { if (e.keyCode === 83 && (navigator.platform.match(“Mac”) ? e.metaKey : e.ctrlKey)) { e.preventDefault(); // Process event… } … Read more

How to trigger browser’s back event/function using JavaScript?

December 3, 2023 by Tarik

history.back() should do the trick. window.history.back() documentation at MDN As an aside, it’s bad user experience if you do this unexpectedly on the user. For example, I enter in an invalid credit card number, and you take me back one page, instead of letting me fix the mistake. So while it’s possible to use javascript … Read more

How do you remove an event listener that uses “this” in TypeScript?

December 2, 2023 by Tarik

First, JavaScript and TypeScript behave the exact same way even if you write like that: theElement.addEventListener(“click”, onClick); Second, this is how you can retain a reference to an anonymous function: var f = (event) => this.onClick(event); theElement.addEventListener(“click”, f); // later theElement.removeEventListener(“click”, f); If you’re dealing with event listeners, there’s a useful pattern for your class … Read more

Can I change the context of javascript “this”?

December 1, 2023 by Tarik

No, it’s not possible. You can call a method with a specified value for this (using method.apply()/method.call()) but you cannot re-assign the keyword, this.

How to listen for changes to the title element?

November 28, 2023 by Tarik

5 years later we finally have a better solution. Use MutationObserver! In short: new MutationObserver(function(mutations) { console.log(mutations[0].target.nodeValue); }).observe( document.querySelector(‘title’), { subtree: true, characterData: true, childList: true } ); With comments: // select the target node var target = document.querySelector(‘title’); // create an observer instance var observer = new MutationObserver(function(mutations) { // We need only first … Read more

How to detect CSS3 resize events

November 26, 2023 by Tarik

Resizing is like a style change. As such it can be observed with a MutationObserver. The more specific ResizeObserver is probably even better: let observer = new ResizeObserver(function(mutations) { console.log(‘mutations:’, mutations); }); let child = document.querySelector(‘textarea’); observer.observe(child); <textarea></textarea>

Intercept all ajax calls?

November 26, 2023 by Tarik

If you’re using jQuery, $.ajaxSuccess is a good option, but here’s a generic option that will intercept XHR calls from all frameworks (I’ve tested it with ExtJS and jQuery – it should work even if multiple frameworks are loaded concurrently). It’s been tested to work with IE8, Chrome and Firefox. (function(XHR) { “use strict”; var … Read more

Add a long press event in React

November 15, 2023 by Tarik

I’ve created a codesandbox with a hook to handle long press and click. Basically, on mouse down, touch start events, a timer is created with setTimeout. When the provided time elapses, it triggers long press. On mouse up, mouse leave, touchend, etc, the timer is cleared. useLongPress.js import { useCallback, useRef, useState } from “react”; … Read more

Attach Event Listener to Array for Push() Event

September 27, 2023 by Tarik

You could use an ‘eventify’ function that overrides push in the passed array. var eventify = function(arr, callback) { arr.push = function(e) { Array.prototype.push.call(arr, e); callback(arr); }; }; In the following example, 3 alerts should be raised as that is what the event handler (callback) does after eventify has been called. var testArr = [1, … Read more