Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Div over Iframe

Posted on 2008-10-29
8
Medium Priority
?
1,792 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
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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 discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

578 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