Side-by-Side IFRAMES

I was recently asked if it was possible to use a little bit of javascript to create two IFRAMES and have them be side-by-side on a form. Here’s what I came up with:

This is the code that does the work. Pretty simple javascript function placed in the form’s OnLoad event.:

ArrangeIframes = function(frame1Name, frame2Name) {

    var frame1 = document.getElementById(frame1Name + '_d');

    var frame2 = document.getElementById(frame2Name + '_d');

    var parent1 = frame1.parentNode;

    var parent2 = frame2.parentNode;

    // resize frame1 to 2 columns

    parent1.cells[0].colSpan = 2;

    // copy frame2 then remove original

    var newCell = parent1.insertCell(1);

    newCell.colSpan=2;

    newCell.rowSpan=parent2.cells[0].rowSpan;

    newCell.innerHTML = parent2.cells[0].innerHTML;

    parent2.removeNode(frame2);

}

ArrangeIframes('IFRAME_frame1','IFRAME_frame2');

To make things look smoother, it helps to have the IFRAMES in the same section on the CRM form. It is important to note that this code does not collapse the resulting blank space from moving the second IFRAME.

Here’s the result:

 

Cheers!

 

Technorati Tags: CRM IFRAMES,IFRAME Javascript

Comments

[James]

If you add another iframe the Node still uses the realestate and provides a significant gap, anyway to reduce this without reducing the copied iframe?

Thanks

[Michael Cross]

I think I've been able to resolve the issue of blank space on the form. I created a new section at the bottom of the form and do not display the section name or divider. I moved the iframe for the view that is to be on the right side of the side-by-side iframes to this new section.

I'm no programmer, but it looks like the code copies the iframe from the bottom of the form to the section with the side-by-side iframes and then removes the section.

Regardless, I don't have any extra blank space and it looks good.