PDA

View Full Version : Javascript dynamically show div and populate contained iframe on button click?



Karrayabe
12-30-2009, 05:32 AM
Hello all I am new here but this place looked great and like one of the only places where I could find the answer to my question.

I have created a page which pulls search results from various sites using PHP. It displays each result in a row in a table upon running.

I wanted to add a button saying "More information" at which point, a div would appear and load the associated link for that search result within an iframe within the newly appeared div. I've been able to get a div appear and disappear on button click but, I couldn't get it to dynamically load an iframe on click with the associated search results link.

Any suggestions are greatly appreciated. Also let me know if you need more information before assisting. Thanks!

godofreality
12-30-2009, 06:23 AM
how about posting the code u currently have and i will see what needs to be done to it to make it work

Karrayabe
12-30-2009, 06:31 AM
This is the code I was trying to modify. I believe the issue is having multiple onclick events. This will show and hide the frame but, I have yet to be able to change the iframe src on the fly.

Maybe this example will better illustrate what I'm talking about

Search results
1 - cnn - more information
2 - cbs - more information.

Upon clicking more information I want a div to appear, with a z index of 2 or something above the search results, with a contained iframe (if an iframe is needed) to load the external site. The issue I believe is I could program an iframe to appear for each one of those sites if I knew the number of results coming back. However, in this case it could be two like listed above or 100.

I'm very new to javascript so I'm just trying to find something which someone has already used and trying to modify it to see if I can achieve the result I need.

Thanks for your response and let me know if you need additional information or an attempt I have previously tried even though I have not been able to get it working.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>hide/show iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<style type="text/css">
<!--
html,body {
height:100%;
background-color:#eef;
}
#click {
width:300px;
line-height:30px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#666;
text-align:center;
background-color:#fff;
border:3px double #666;
cursor:pointer;
margin:20px auto;
}
#frDocViewer {
width:100%;
height:75%;
}
-->
</style>

<script type="text/javascript">
<!--
function HideFrame() {
var fr = document.getElementById ("frDocViewer");
if(fr.style.display=="none") {
fr.style.display="block";
}
else {
fr.style.display="none";
}
}
//-->
</script>

</head>
<body>

<div id="click" onclick="HideFrame()">hide/show iframe</div>


<iframe id="frDocViewer" src="http://www.codingforums.com/showthread.php?t=65683" frameborder="1" ></iframe>


</body>
</html>

Old Pedant
12-31-2009, 11:07 PM
Something like this?


<html>
<head>
<title>Dynamic Overlaid Content Demo</title>
<style type="text/css">
div#OVERLAY
{
position: absolute; top: 0px; left: 0px;
width: 100%; height: 1200px;
background-color: black;
-moz-opacity: 0.60;
opacity: 0.60;
filter: alpha(opacity=60);
z-index: 10;
display: none;
}
div#HOLDER
{
position: absolute; top: 100px; left: 100px;
width: 80%;
z-index: 15;
display: none;
text-align: center;
}
div#HOLDER span
{
padding-left: 50px;
padding-right: 50px;
background-color: black;
color: white;
font-size: medium;
cursor: pointer;
}
div#HOLDER iframe
{
position: relative;
top: 0px; left: 0px;
width: 100%; height: 500px;
}
</style>

<script type="text/javascript">
function overshow()
{
var hold = document.getElementById("HOLDER");
hold.style.display = "block";
var stop = parseInt(document.body.scrollTop);
if ( isNaN(stop) ) stop = 0;
if ( stop == 0 )
{
var stop = parseInt(document.documentElement.scrollTop);
if ( isNaN(stop) ) stop = 0;
}
hold.style.top = stop + 100 + "px";
document.getElementById("OVERLAY").style.display = "block";
}
function overoff()
{
document.getElementById("OVERLAY").style.display = "none";
document.getElementById("HOLDER").style.display = "none";
}
</script>
</head>
<body>
<div id="OVERLAY"></div>
<div id="HOLDER">
<span onclick="overoff();">Click here to close</span><br />
<iframe name="INNERFRAME"></iframe>
<span onclick="overoff();">Click here to close</span><br />
</div>
<h2>This is just stuff to fill space.<h2><br/><br/>
<h2>This is just stuff to fill space.<h2><br/><br/>
<h2>This is just stuff to fill space.<h2><br/><br/>
Search results:<ol>
<li>Art <a href="http://www.ClearviewArts.com" target="INNERFRAME" onclick="overshow()">more info</a></li>
<li>Forums <a href="http://www.codingforums.com" target="INNERFRAME" onclick="overshow()">more info</a></li>
</ol>
<h2>This is just stuff to fill space.<h2><br/><br/>
<h2>This is just stuff to fill space.<h2><br/><br/>
<h2>This is just stuff to fill space.<h2><br/><br/>
</body>
</html>

Adjust as needed for your specific pages/sites.