friskuk
asked on
Div over Iframe
Hello,
I'm having great difficulty showing a div layer over an embedded iframe,
Basically, the div's i want to show are small little helper boxes.
They are hidden until an icon is clicked
This is the div
<div id="help_local" class="info_box" style="display:none; z-index: 50;" onmouseover="showInfo('ico n_local',' help_local ');" onmouseout="hideInfo('help _local');" ><b>Local Rank</b><br />This column shows the frequency rank of search queries relative to the average of the highest performing search queries matching your keywords.</div>
This will show up over the page when clicked, by setting display to block
On the page itself... i have a list of results, with a little icon next to each result. When the icon is clicked, it dynamically appends a div to the bottom of the cell and then injects an iframe into that div to display some historical data. This works great, but when i try to display the div above, over the iframe, it cuts off.
My injection code is as follows:
function showHistory(id, query) {
var container_row = "hist_cont" + id;
var container_div = "hist_chart" + id;
clearTimeout(timer_history );
if (last_history !== container_div) {
closeHistory();
var id_div = document.getElementById(co ntainer_di v);
if (id_div) {
var container_frame = container_div + "frame";
var id_frame = document.createElement(con tainer_fra me);
id_frame.setAttribute("id" , container_frame);
id_frame.innerHTML = showChart(query);
id_div.appendChild(id_fram e);
id_div.style.display = "block";
last_history = container_div;
}
} else {
closeHistory();
}
}
function showChart(chart_query) {
var chart_rnd = Math.floor(Math.random() * (2147483647 + 1)) + 1;
var chart_url = "chart/index.php?query=" + chart_query + "&height=160&rand=" + chart_rnd;
var chart_html = "<table width=\"100%\">\n";
chart_html += " <tr><td>\n";
chart_html += " <iframe style=\"display:inline; z-index:1;\" frameborder=\"0\" height=\"160\" width=\"100%\" marginheight=\"0\" marginwidth=\"0\" id=\"frame\" scrolling=\"no\" src=\"" + chart_url + "\">";
chart_html += " </td></tr>\n";
chart_html += "</table>";
return chart_html;
}
Now no matter what i do, with z-index, i can't get the div to display over the iframe, i've tried setting the z-index of the iframe, of the containing div around the iframe... and it doesn't make any difference.
Even when the iframe is position: absolute (which i've read somwhere) it doesn't work.
The site is http://search.searchers.co.uk/forensics/?query=london
Any ideas would be helpful.
I'm having great difficulty showing a div layer over an embedded iframe,
Basically, the div's i want to show are small little helper boxes.
They are hidden until an icon is clicked
This is the div
<div id="help_local" class="info_box" style="display:none; z-index: 50;" onmouseover="showInfo('ico
This will show up over the page when clicked, by setting display to block
On the page itself... i have a list of results, with a little icon next to each result. When the icon is clicked, it dynamically appends a div to the bottom of the cell and then injects an iframe into that div to display some historical data. This works great, but when i try to display the div above, over the iframe, it cuts off.
My injection code is as follows:
function showHistory(id, query) {
var container_row = "hist_cont" + id;
var container_div = "hist_chart" + id;
clearTimeout(timer_history
if (last_history !== container_div) {
closeHistory();
var id_div = document.getElementById(co
if (id_div) {
var container_frame = container_div + "frame";
var id_frame = document.createElement(con
id_frame.setAttribute("id"
id_frame.innerHTML = showChart(query);
id_div.appendChild(id_fram
id_div.style.display = "block";
last_history = container_div;
}
} else {
closeHistory();
}
}
function showChart(chart_query) {
var chart_rnd = Math.floor(Math.random() * (2147483647 + 1)) + 1;
var chart_url = "chart/index.php?query=" + chart_query + "&height=160&rand=" + chart_rnd;
var chart_html = "<table width=\"100%\">\n";
chart_html += " <tr><td>\n";
chart_html += " <iframe style=\"display:inline; z-index:1;\" frameborder=\"0\" height=\"160\" width=\"100%\" marginheight=\"0\" marginwidth=\"0\" id=\"frame\" scrolling=\"no\" src=\"" + chart_url + "\">";
chart_html += " </td></tr>\n";
chart_html += "</table>";
return chart_html;
}
Now no matter what i do, with z-index, i can't get the div to display over the iframe, i've tried setting the z-index of the iframe, of the containing div around the iframe... and it doesn't make any difference.
Even when the iframe is position: absolute (which i've read somwhere) it doesn't work.
The site is http://search.searchers.co.uk/forensics/?query=london
Any ideas would be helpful.
http://www.ozzu.com/website-design-forum/div-top-iframe-t41035.html
its all related not to iframe, but to flash object itself: just read a little:
http://www.ozzu.com/website-design-forum/placing-div-over-flash-t25572.html
http://www.ozzu.com/website-design-forum/placing-div-over-flash-t25572.html
Wilq: Where do you see flash?
Oh well.. I went to page that friskuk gave and checked that with firebug. What i see is:
<object id="render" height="140" width="100%" type="application/x-shockw ave-flash" data="open-flash-chart.swf " style="visibility: visible;">
<param name="flashvars" value="data-file=data.php? query=lond on&rand=88 932353&loa ding=Loadi ng Forensics Data..."/>
</object>
And... you know normally I do not correct peoples but mine nick is WILQ not WILG ;) (i do that because i know that you do here alot ^^)
<object id="render" height="140" width="100%" type="application/x-shockw
<param name="flashvars" value="data-file=data.php?
</object>
And... you know normally I do not correct peoples but mine nick is WILQ not WILG ;) (i do that because i know that you do here alot ^^)
Sorry, blame the underline :) I fixed it. Also in the one other question I could find where I did it
On my screen there is no difference between your q and my g
On my screen there is no difference between your q and my g
You are absolutly right :( damn underline :(
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
was not what i told you to do ?? It seems that we were helpless in all our efforts here.. well