homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Table does not load into iframe
Using code found on a web site

5+ Year Member

Msg#: 4070787 posted 11:35 pm on Jan 29, 2010 (gmt 0)

The messages passed between malasorte and daveVk on Jan 26, 2007 referenced the function that I'm referring to. As a result I'm hoping that I might find a solution to my problem in this discussion forum.
I found the code shown below on a web site. It creates a small iframe inside a web page. The code is too advanced for me to understand. However, it does the job for me. What I would like to do is upload a small table into the iframe.
The table with id="AAA" is stored in file table.html. As suggested in the notes that came with the code:
//href property sets or returns the URL of the linked resource
//e.g. document.getElementById("style1").href="try_dom_link2.css"
I've used the above suggestion and came up with the following code.
<a href="#" onClick="return show_hide_box(document.getElementById("AAA").href="table.html", 550, 270, '2px solid')">Click</a>
But nothing is happening, no table is being loaded, even the iframe
does not appear. I wonder if someone might be willing to try out
the code shown below and come up with a solution. I'd be
grateful for all help.

//Moves the box object to be directly beneath an object.
function move_box(an, box)
{ var cleft = 0;
var ctop = 0;
var obj = an;

while (obj.offsetParent)
{ cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;

box.style.left = cleft + 'px';

ctop += an.offsetHeight + 8;

//Handle Internet Explorer body margins, which affect normal document,
//but not absolute-positioned stuff.
if (document.body.currentStyle &&
{ ctop += parseInt(
box.style.top = ctop + 'px';

//Shows a box if it wasn't shown yet or is hidden or hides it if it is
//currently shown
function show_hide_box(an, width, height, borderStyle)
{ var href = an.href;
//href property sets or returns the URL of the linked resource
//e.g. document.getElementById("style1").href="try_dom_link2.css"

var boxdiv = document.getElementById(href);

if (boxdiv != null)
{ if (boxdiv.style.display=='none')
{//Show existing box, move it if document changed layout
move_box(an, boxdiv);


//Workaround for Konqueror/Safari
if (!boxdiv.contents.contentWindow)
boxdiv.contents.src = href;
//Hide currently shown box.
return false;
//Create box object through DOM
boxdiv = document.createElement('div');

//Assign id equalling to the document it will show
boxdiv.setAttribute('id', href);

boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.textAlign = 'right';
boxdiv.style.padding = '4px';
boxdiv.style.background = '#FFFFFF';

var offset = 0;

//Remove the following code if 'Close' hyperlink is not needed.
var close_href = document.createElement('a');
close_href.href = 'javascript:void(0);';
close_href.onclick = function()
{ show_hide_box(an, width, height, borderStyle); }
offset = close_href.offsetHeight;
//End of 'Close' hyperlink code.

var contents = document.createElement('iframe');
//contents.scrolling = 'no';
contents.overflowX = 'hidden';
contents.overflowY = 'scroll';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = (height - offset) + 'px';

boxdiv.contents = contents;

move_box(an, boxdiv);

if (contents.contentWindow)
else contents.src = href;

//The script has successfully shown the box, prevent hyperlink navigation.
return false;

function getAbsoluteDivs()
{ var arr = new Array();
var all_divs = document.body.getElementsByTagName("DIV");
var j = 0;

for (i = 0; i < all_divs.length; i++)
if (all_divs.item(i).style.position=='absolute')
{ arr[j] = all_divs.item(i);
return arr;

function bringToFront(obj)
{ if (!document.getElementsByTagName) return;

var divs = getAbsoluteDivs();
var max_index = 0;
var cur_index;

//Compute the maximal z-index of other absolute-positioned divs
for (i = 0; i < divs.length; i++)
{ var item = divs[i];
if (item == obj || item.style.zIndex == '') continue;

cur_index = parseInt(item.style.zIndex);
if (max_index < cur_index)
{ max_index = cur_index;
obj.style.zIndex = max_index + 1;



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4070787 posted 6:25 am on Jan 30, 2010 (gmt 0)

<a href="#" onClick="return show_hide_box(document.getElementById(
'AAA').href='table.html', 550, 270, '2px solid')">Click</a>

For starter you need to use single quotes as show above, as it is within a double quoted sting.

The first parameter to show_hide_box should be an element that leaves

<a href="#" onClick="return show_hide_box(document.getElementById('AAA'), 550, 270, '2px solid')">Click</a>

That suggests to me somewhere in your html there should be
<? id='AAA' href ='table.html' ... >...</?>

Perhaps a look back at your source may reveal what AAA should be, maybe AAA is the element being clicked ?

<a href="table.html" onClick="return show_hide_box(this, 550, 270, '2px solid')">Click</a>


5+ Year Member

Msg#: 4070787 posted 6:08 pm on Feb 3, 2010 (gmt 0)

Many thanks for your reply. I tried your code:
<a href="table.html" onClick="return show_hide_box(this, 550, 270, '2px solid')">Click</a>
and the table in file 'table.html' appeared in the iframe. There is just a slight problem. I have a slideshow just below the button which when clicked displays the iframe. For some reason the iframe always appears below the slideshow and only parts of it can be seen. I've tried inserting 'z-index: 2' and numbers greater than 2 for the button element and the element that contains the button but nothing is altered. I still get the same problem. I wonder if you might have a solution? Again many thanks for your kind help.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4070787 posted 2:21 am on Feb 4, 2010 (gmt 0)

I note you have a function bringToFront that adjusts the zIndex that is already called


Check if there other calls to it from the slideshow code. Or other zIndex reference in the javascript.

For debug try

alert( boxdiv.style.zIndex );

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved