Solved

Div over Iframe

Posted on 2008-10-29
8
1,775 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

Suggested Solutions

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
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.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

749 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