Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Table does not load into iframe

Using code found on a web site

11:35 pm on Jan 29, 2010 (gmt 0)

New User

5+ Year Member

joined:Jan 17, 2010
posts: 23
votes: 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;

6:25 am on Jan 30, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
votes: 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>

6:08 pm on Feb 3, 2010 (gmt 0)

New User

5+ Year Member

joined:Jan 17, 2010
posts: 23
votes: 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.
2:21 am on Feb 4, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
votes: 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 );

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members