DaveOnCode » html http://www.daveoncode.com Objective C, iOS and more programming stuff Mon, 19 Dec 2011 12:11:12 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Adapting iframe height to its content with 2 lines of javascript http://www.daveoncode.com/2009/06/12/adapting-iframe-height-to-its-content-with-2-lines-of-javascript/ http://www.daveoncode.com/2009/06/12/adapting-iframe-height-to-its-content-with-2-lines-of-javascript/#comments Fri, 12 Jun 2009 09:38:06 +0000 Davide Zanotti http://www.daveoncode.com/?p=435 ]]> In a project, I have to use an iframe and I need that its height is automatically calculated based on its content. However is not possible to accomplish this by simply setting the attribute height to 100%, instead we must smartly use javascript to dynamically assign that value after a computation. The solution I’m going to show you is not 100% my work but instead an optimization and a better implementation of clever intuitions I found on the web.
The “trick” works in this way:

1. The iframe should has an ID assigned:

1
<iframe id="slideshow_frame" src="frame.html" frameborder="0" width="100%" marginheight="0" marginwidth="0" scrolling="no"></iframe>

2. the page loaded into the iframe should contains all the html into an “easy retrievable” container (a div with an ID is perfect!):

1
2
3
4
5
<div id="content">
    <div style="background: red; width: 400px; height: 120px"></div>
    <div style="background: green; width: 400px; height: 300px"></div>
    <div style="background: yellow; width: 400px; height: 60px"></div>
</div>

3. on the iframe’s page “onload” event, a function will be executed to adjust its height:

1
2
3
4
5
6
7
8
function resizeIframe(iframeID) {
       
    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById("content");

    iframe.style.height = container.offsetHeight + "px";
           
}
]]> http://www.daveoncode.com/2009/06/12/adapting-iframe-height-to-its-content-with-2-lines-of-javascript/feed/ 6 View the generated source code in internet explorer with a bookmarklet http://www.daveoncode.com/2008/11/24/view-the-generated-source-code-in-internet-explorer-with-a-bookmarklet/ http://www.daveoncode.com/2008/11/24/view-the-generated-source-code-in-internet-explorer-with-a-bookmarklet/#comments Mon, 24 Nov 2008 16:36:42 +0000 Davide Zanotti http://daveoncode.wordpress.com/?p=70 ]]> internet explorer sucksAs all knows, in browser like Firefox, in order to view the generated source code of a page (that is the final HTML which the browser display into the window, so it includes JS generated nodes and SSI inclusions) we have simply to select all (ctr+A or command+A on a Mac) and choose “View selection source”. Internet Explorer instead doesn’t offers the ability to view the generated source but only the basic HTML code (whic doesn’t include dynamic generated content). To have such feature, I’ve used the innerHTML property to get the final content of <html> tag, and I’ve realized a bookmarklet to call after the loading of the page. The bookmarklet opens an 800×600 resizable popup with a textarea that shows the HTML code.

This is the code of the bookmarklet:

1
javascript:var p=window.open("","p","width=800,height=600,resizable=yes");p.document.open();p.document.write('<html><head></head><textarea style="width:100%;height=100%'">'+document.getElementsByTagName("html")[0].innerHTML+'</textarea><body></body></html>');p.document.close();void(0);

to use it, simply copy and paste into the ie address bar and press enter ;-)

]]> http://www.daveoncode.com/2008/11/24/view-the-generated-source-code-in-internet-explorer-with-a-bookmarklet/feed/ 0