Posts marked with "Iframe" in tags

How To Create A HTML, CSS, JS Code Editor Using jQuery

There are a lot of HTML editing services in the Web. Some of the popular services are JsFiddle and JsBin. These sites offer saving function to your account too. If you want to create a site like JSFiddle, then you are at the right place. I’m going to tell you how to create a basic HTML editing software using jQuery.

The editor we’re going to create also has a live preview service which means that the user don’t have to submit the code form every time. The preview is automatically updated using jQuery‘s keyup trigger except for **JS **code update, because Javascript can’t be added every time when user types something because there will be syntax errors.

... [READ MORE]

Setting Iframe height to its content height using Javascript

While loading an iframe on page the most difficult thing is to set it’s height to the height of the content of the iframe. I looked around the web and got the code. This is pure Javascript, doesn’t contain jQuery or any other libraries. Set these functions :

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}
function setIframeHeight(id) {
    var ifrm = id;
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.visibility = ‘hidden’;
    ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
    // some IE versions need a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = ‘visible’;
}

... [READ MORE]

Follow/Subscribe

Telegram 

Mastodon  Twitter

GitHub GitLab

Subdomains

Demos  Lab

Past

This blog was once on WordPress. Now a static site. See source code on

GitLab