Custom HTML Blocks

By tsangk

Description

Since the introduction of [[html]] blocks, users have been able to easily embed external web content easily. The following Javascript code captures HTML blocks' ability to automatically resize itself, allowing any iframed code blocks to be resized automatically too!

Code

+ show framework

/*************************************************
/*
/* Code based on Wikidot's HTML Block
/* Edited by Kenneth Tsang for Custom HTML Blocks
/*
/************************************************/
(function() {
    // running in private context, no namespace pollution :-)
 
    var delay = 250; // each 250 ms, content height will be checked
    var current_height = 0; // assume starting height is 0px
 
    // the following code has been edited by Kenneth Tsang for Custom HTML Blocks
    var url_array = location.toString().split('/');
    var iframe_hash = window.location.hash.match(/\/([a-zA-Z0-9\-_]+)$/)[1];
    var random = Math.random();
    var parentDomain = document.referrer.match(/^https?:\/\/([^\/\\]+)/)[1];
    var resize_div_id = 'div_' + iframe_hash + random;
    var resize_iframe_id = 'iframe_' + iframe_hash + random;
    var resize_url = url_array[0] + '//' + parentDomain + '/common--javascript/resize-iframe.html';
 
    var get_height = function() {
        if (document.body.scrollHeight) {
            return document.body.scrollHeight;
        }
        if (document.height) {
            return document.height;
        }
        return document.body.offsetHeight;
    };
 
    var resize = function() {
        var div = document.getElementById(resize_div_id);
 
        var old_iframe = document.getElementById(resize_iframe_id);
        if (old_iframe) {
            div.removeChild(old_iframe);
            delete old_iframe;
        }
 
        var iframe = document.createElement("iframe");
        iframe.id = resize_iframe_id;
        iframe.src = resize_url + "?" + Math.random() + "#" + current_height + "/" + iframe_hash;
        div.appendChild(iframe);
    };
 
    // every <delay> miliseconds:
    // if height changed from last time, do resize
    var tick = function() {
        var new_height = get_height();
        if (new_height != current_height) {
            current_height = new_height;
            resize(current_height);
        }
        setTimeout(tick, delay);
    };
 
    var init = function() {
        var div = document.createElement("div");
        div.id = resize_div_id;
        div.setAttribute('style', 'display: none');
        div.style.display = 'none'; // this way it works even in IE
        document.body.appendChild(div);
        tick();
    };
 
    var old_onload = window.onload;
    window.onload = function() {
        if (typeof(old_onload) == "function") {
            old_onload();
        }
        init();
    };
})();

The following code goes into the code block:

<!-- Insecure Version -->
<script type="text/javascript" src="http://snippets.wdfiles.com/local--code/code:custom-html/1"></script>
<!-- HTTPS Version -->
<script type="text/javascript" src="https://snippets.wdfiles.com/local--code/code:custom-html/1"></script>

The following code is required to embed the code block:

[[embed]]
<iframe src="http://link.to.codeblock/example.html#/enterUniqueStringHere" class="html-block-iframe"></iframe>
[[/embed]]

Please note, the following are required:

• append the source URL with a forward-slash, followed by a unqiue string or ID
• set the class to "html-block-iframe"

In action

Coming soon…

---

Thanks to tsangk for this great snippet: conditional-blocks

---

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

---

---

Other snippets posted by tsangk

URL Title with Slash Redirect - 04 Jan 2018 11:32
404 (Page does not exist) Redirect - 20 Nov 2012 11:40
Syntax Highlighter - 16 Feb 2012 01:45
Conditional Blocks - 15 Feb 2012 00:36

---

Rate this solution

If you think this solution is useful — rate it up!

Zatz 14 Feb 2013 07:47

this works for wikidot but you cannot just embed another page, like if you wanted to do a side by side comparison and see if it can be done with or without a table (really all just to see if can be done)

[[embed]]
"http://link.to.codeblock/example.html#/enterUniqueStringHere"
[[/embed]]