{"id":725,"date":"2022-02-07T11:30:28","date_gmt":"2022-02-07T10:30:28","guid":{"rendered":"http:\/\/dominic.no\/blog\/?p=725"},"modified":"2022-02-07T11:31:41","modified_gmt":"2022-02-07T10:31:41","slug":"waitforasyncelement","status":"publish","type":"post","link":"https:\/\/dominic.no\/blog\/waitforasyncelement\/","title":{"rendered":"waitForAsyncElement()"},"content":{"rendered":"\n<p>Simple function to run javascript after specific content is loaded.<br>jQuery dependant.<br>Useful for dealing with resizing iframes after content is loaded to avoid scroll bars in the iframe. Also serves as an alternative to waitForKeyElement when tinkering with userscripts et.<\/p>\n\n\n\n<p>Doc:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/*\nUsage:\nwaitForAsyncElement(selector, code, delay, timeout, fallback);\n\nBreakdown:\n    selector: jQuery selector as string: \"#yourElementHere\"\n    code:     function with code to run: function(){\"code here\"};\n    delay:    delay in ms after element is loaded: default 30ms\n    timeout:  stop execution if element is not loading: default 5000ms\n    fallback: if timed out run fallback, example: function(){alert(\"async did not load\")\")}\n\nExample:\n*\/<\/span>\nwaitForAsyncElement(<span class=\"hljs-string\">\"#some-data\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n      <span class=\"hljs-built_in\">console<\/span>.log($(<span class=\"hljs-string\">\"#some-data\"<\/span>).val());\n})\n<span class=\"hljs-comment\">\/\/Example with fallback:<\/span>\nwaitForAsyncElement(<span class=\"hljs-string\">\"#some-data\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n      <span class=\"hljs-built_in\">console<\/span>.log($(<span class=\"hljs-string\">\"#some-data\"<\/span>).val());\n}, <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-number\">5000<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n      <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"#some-data did not load\"<\/span>);\n})\n\n<span class=\"hljs-comment\">\/*\nExample for dealing with resizing iFrame after its loaded:\nNote the extra 300ms delay to wait for iframe content to load,\niFrame.onload could have been used instead, but seem to fail on mobile.\n*\/<\/span>\nonElementLoaded(<span class=\"hljs-string\">\"#iFrame1\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n        <span class=\"hljs-keyword\">var<\/span> iFrame = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'iFrame1'<\/span>);\n        iFrame.height = iFrame.contentWindow.document.body.scrollHeight + <span class=\"hljs-number\">100<\/span>;\n}, <span class=\"hljs-number\">300<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">var<\/span> waitForAsyncElement = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">elementSelector, \n                               callback, \n                               delay = <span class=\"hljs-number\">30<\/span>, \n                               timeoutms = <span class=\"hljs-number\">5000<\/span>, \n                               timeoutFallback = function(<\/span>)<\/span>{<span class=\"hljs-keyword\">return<\/span>}){\n    <span class=\"hljs-keyword\">var<\/span> intervl = setInterval(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n        <span class=\"hljs-keyword\">if<\/span> (jQuery(elementSelector).length){\n            clearInterval(intervl);\n            setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {callback()}, delay);\n        }\n    }, <span class=\"hljs-number\">300<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (timeoutms !== <span class=\"hljs-number\">0<\/span>){\n        setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n            clearInterval(intervl);\n            timeoutFallback();\n        }, timeoutms);\n        \n    }\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Licence:<\/p>\n\n\n\n<p>Public Domain or MIT, whichever suits you best. However please keep me in the loop if you build on the function, make and improvements and such \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Simple function to run javascript after specific content is loaded.jQuery dependant.Useful for dealing with resizing iframes after content is loaded to avoid scroll bars in the iframe. Also serves as an alternative to waitForKeyElement when tinkering with userscripts et. Doc: Code: Licence: Public Domain or MIT, whichever suits you best. However please keep me in the loop if you build on the function, make and improvements and such \ud83d\ude42<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ngg_post_thumbnail":0,"spay_email":""},"categories":[1],"tags":[],"gutentor_comment":0,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/posts\/725"}],"collection":[{"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":2,"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/posts\/725\/revisions\/727"}],"wp:attachment":[{"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dominic.no\/blog\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}