Archive for the ‘DOM’ Category

Version 2 : Dynamically change IFrame Heights

May 25, 2009

This is a continuation of my previous blog. Dynamically change IFrame Heights – here loaded a static HTML content on iframes.
In version 2, we have loaded dynamic files inside the iframes. At the same time we have to dynamically change the height of iframes based on their loaded file content.

Sample Code

Below code works well in both browsers Firefox & Internet Explorer.

<html>
<body>
<script>
function setIframeHeight()
{
    var elt = document.getElementById('testIframe');
    if(elt.contentWindow){
        document.getElementById('testIframe').height = elt.contentWindow.document.body.scrollHeight + 30;
    }
}
</script>


</body>
</html>

contentWindow

  • returns an window object of the iframe.

scrollHeight

  • is a property which returns the scrolling height of the object.
  • the value specifies only the visible height of the object.

elt.contentWindow – returns the object of IFrame window.
elt.contentWindow.document – returns the object of HTML document.
elt.contentWindow.document.body – returns the object of HTML body element.

You may also use contentDocument property for getting height of iframe. This will work only in Firefox. Since IE6.0 or 7.0 does not support this property. This has been supported from IE version 8.0

Sample code for doing the same in Firefox with contentDocument

if(elt.contentDocument){
elt.height = elt.contentDocument.body.offsetHeight+40;
}

contentDocument

  • returns an object of iframe document.

offsetHeight

  • is a property used to retrieves the height of the element/object in pixels.
  • this value includes the height of elements borders + padding.
Advertisements

Dynamically change IFrame Heights

April 25, 2009

With script you can able to change/set the iframe attribute values dynamically. Sometimes we don’t know the actual height of the web page because page gets loaded dynamically and the height may varies. So here i have to calculate the page content height dynamically and set the same value in iframe height property. Mainly this is required when a page loads dynamically inside the iframe and its height can adjust automatically based on the content.(which means to show iframe without vertical scroll bar).

Sample Code


<html>
<body>
<div id=”showid”>
<table>
<tr><td>
Enter your name <input type=”text” name=”yourname”/>
Enter your age <input type=”text” name=”yourage”/>
<input type=”submit” name=”Submit”/>
</td></tr>
</table>
</div>

<script>
function setIframeHeight()
{
document.getElementById(‘testIframe’).height = document.getElementById(‘showid’).offsetHeight;
}
</script>

<iframe src=”” name=”testIframe” id=”testIframe” onload=”setIframeHeight();” />
</body>
</html>

offsetHeight

  • is a property used to retrieves the height of the element/object in pixels.
  • this value includes the height of elements borders + padding.

How it works.?

Browser rendering a page by reading each HTML tags, scripts are loaded first. When the control comes to iframe tag, we have specified an event called onload and the value setIframeHeight() method gets invoked. In this method we get the height of the page which is rendered inside the div element and set the same in iframe height.

Like this you can set the value of any iframe attributes.

document.getElementById(‘testIframe’).width = 100;
document.getElementById(‘testIframe’).scrolling = “yes”
document.getElementById(‘testIframe’).class= “css_classname”;

DOM – Document Object Model

November 2, 2008

DOM(Document Object Model.) is a platform and language independent object model. It can be used by any programming language like JavaScript, VBscript. DOM defines a standard object model for accessing/representing documents like HTML or XML. This will allow scripts to dynamically access and update the content, style and structure of documents.

DOM has 3 different levels

  • Core DOM – standard model for structured document
  • XML DOM – standard object model for XML document.
  • HTML DOM – HTML document – defines object & properties of all HTML elements and methods to access them.

DOM represents its documents as a tree structure with elements, attributes and nodes. Also DOM supports navigations in any directions of the tree structure.