Solved

Div over Iframe

Posted on 2008-10-29
8
1,772 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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…
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 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