?
Solved

Div over Iframe

Posted on 2008-10-29
8
Medium Priority
?
1,785 Views
Last Modified: 2008-11-11
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.
0
Comment
Question by:friskuk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22834021
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22834046
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22834066
Wilq: Where do you see flash?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22836149
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22838724
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22839074
You are absolutly right :( damn underline :(
0
 

Accepted Solution

by:
friskuk earned 0 total points
ID: 22899336
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
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22899917
was not what i told you to do ?? It seems that we were helpless in all our efforts here.. well
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This article will show, step by step, how to integrate R code into a R Sweave document
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question