asked on

"Reparent" Content Into a Div?

I'm pretty new to JS, so this may be impossible, but I'll ask anyway.

When my user mouses over certain elements in my ASP.NET page, I'd like to pop up a div which contains dynamic content from another URL.

I don't want to pop up another browser window, because this div needs to be actually *on* my page (printable and all that).

For instance, is there any way to basically "open" another page but "reparent" its content to this div's boundaries? Alternately, could this div contain an <img> which is itself referencing this other URL?

If the latter method is my only hope for a solution, I assume that that URL needs to reference image content only, right? I mean, I couldn't have this div's img referencing tables, rows, cells, other images, etc., right?

Basically, is there any way to have a div containing the (dynamic) content sourced from another URL?

Thanks.

ASKER CERTIFIED SOLUTION

dgelinas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TinoM

try this: ( its basically a div with an iframe in it that loads ur dynamic content, you can then assign it to ur mouseover and change the link to ur content)

<html>
<head>
<script>
function loadit()
{
document.getElementById('myframe').src = "http://www.yahoo.com"
}
</script>
</head>
<body onload="loadit()">
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="layer1">
<iframe name="myframe">
</iframe>
</div>
</body>
</html>

mark-b

You can do what you are looking for by transfering data from an IFRAME to the DIV. I would not recomment transferring EVERYTHING out of the IFRAME to the DIV, but only certain content. Here is a few examples using this technique:

http://www.pxl8.com/iframes_3.html

-Mark

bryker

ASKER

dgelinas:

Thanks. Can I ask you a follow-up?

Could the content that's contained within an iframe call a handler that's located on the parent form? Like, make a td's onclick handler call a function that's defined on the parent?

Thanks again.

dgelinas

Yes, as long as the pages are on the same domain.

For example.

parent.document.forms[0].inputBox.value = "hello"; //Would change the value of an inputbox on the parent page from which the page inside the iframe was created.

or like you mentined

<td onclick="parent.runFunction();">

dgelinas

You might want to use something like the below for creating and deleting the iframes. You should delete them if you have dynamic content on them but if not you can just hide them.

The below are coded to work if these functions are on the parent.

function iframeOpen ( iframeUrl, iframeId ) {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.outerHTML = "<iframe src='"+iframeUrl+"' name='"+iframeId+"' id='"+iframeId+"' allowtransparency frameborder='0' scrolling='no' STYLE='position:absolute; display:block; top:80; z-index:999; left:150;'></iframe>";
}

function iframeClose( iframeId ) {
if(getElement(iframeId).style.display=='block') {
getElement(iframeId).style.display='none';
document.body.removeChild(parent.document.getElementsByName(iframeId)[0]);
}
}

bryker

ASKER

dgelinas:

Awesome. I thought doing this--reparenting a window like this--was strictly against anyone's DOM. You know what I was going to do as a workaround? I thought I was going to have to have a div with an img that referenced an ASP.NET page that *wrote dynamic bitmap content for display in the div*. So imagine how happy I am to not have to do that.

One more thing:

The whole reason I've been talking "div" all along is so that I can (1) hide/show it, and (2) absolutely-position it. But if an iframe does all this, I can't see why I need a div after all. Can you?

Thanks again.

&quot;Reparent&quot; Content Into a Div?

"Reparent" Content Into a Div?