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('icon_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(container_div);
        
          if (id_div) {
          
            var container_frame = container_div + "frame";
            var id_frame = document.createElement(container_frame);
          
            id_frame.setAttribute("id", container_frame);
            id_frame.innerHTML = showChart(query);
          
            id_div.appendChild(id_frame);
            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.
friskukAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pawel WitkowskiSenior Javascript DeveloperCommented:
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
0
Michel PlungjanIT ExpertCommented:
Wilq: Where do you see flash?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Pawel WitkowskiSenior Javascript DeveloperCommented:
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-shockwave-flash" data="open-flash-chart.swf" style="visibility: visible;">
<param name="flashvars" value="data-file=data.php?query=london&rand=88932353&loading=Loading 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 ^^)
0
Michel PlungjanIT ExpertCommented:
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
0
Pawel WitkowskiSenior Javascript DeveloperCommented:
You are absolutly right :( damn underline :(
0
friskukAuthor Commented:
its ok i fixed it...

originally i was showing flash within an iframe, so it was causing problems showing a div over both the iframe and flash movie at the same time.

I simply removed the iframe, and dynamically injected the flash into a div, and to get the other div to appear, i set the flash parameters to wmode = transparent! This fixed it all.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pawel WitkowskiSenior Javascript DeveloperCommented:
was not what i told you to do ?? It seems that we were helpless in all our efforts here.. well
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.