Placing a div over flash in iframe

  • yogeshgv
  • Born
  • Born
  • yogeshgv
  • Posts: 4

Post 3+ Months Ago

Hi,
I have to show a div over a flash running in an iframe. Currently div appears behind the flash. I have read in most forums that by setting wmode="transparent" on <embed> objects will solve this problem. So I wanted to loop through iframe document and find <embed> and set wmode attribute. But I can not access the document of iframe as its cross domain and I am getting permission denied error. Do you see any workaround for getting my div shown on top of flash?

Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

so you don't control the actual placement of the flash? I assume we're talking about ads or something? I would try forcing an explicit z-index on the iframe (probably a low one) and then putting another iFrame behind your over div (similar to the ie6 select hack). Here's an easy jQuery way to do that.

If that doesn't work I'm not sure what to tell you.
  • yogeshgv
  • Born
  • Born
  • yogeshgv
  • Posts: 4

Post 3+ Months Ago

Hi graphixboy,
Thanks for the response. Placing iframe behind my <div> worked for me on IE and firefox. But it does not work for Chrome and safari. Following is my code, do you see any problem with that?

// creating iframe div
iframe = document.createElement("iframe");
iframe.src="javascript:false";
iframe.style.width = "364px";
iframe.style.height = "450px";

iframe.style.zIndex = 5;
iframe.id="iframe";
iframe.frameBorder = 0;
iframe.scrolling = "no";
iframe.style.display="none";
document.getElementsByTagName("body")[0].appendChild(iframe); // adding it to body

// creating my div
b = document.createElement("div");
b.setAttribute("id","g-bookmarkpopup");
b.style.position = "absolute";
b.style.backgroundColor = "#ffffff";
b.style.display = "none";
b.style.zIndex = 10;

d.getElementsByTagName("body")[0].appendChild(b); // then adding my div which is still invisible

// on click event
b.style.display='block';
iframe.style.display="block";
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I don't see any issue with that however, I may not be the best person to ask. I'm glad it worked in IE/FF and honestly I'm a bit surprised that it doesn't like Safari/Chrome. I should point out that both the problem browsers use the webkit engine so I would guess there's either a problem with the iFrame concept, or more likely an issue with the javascript since webkit is pretty fussy.

Out of curiousity did you try putting your div INSIDE the iFrame and than just hiding and showing the iFrame?
  • yogeshgv
  • Born
  • Born
  • yogeshgv
  • Posts: 4

Post 3+ Months Ago

Thanks for the response.
I have been trying- hiding and showing iframe rather than having my div in iframe due to some limitations.
  • yogeshgv
  • Born
  • Born
  • yogeshgv
  • Posts: 4

Post 3+ Months Ago

I tried further with z-index. Giving very high index to my div relative to iframe z-index fixed the issue and works great on all browsers now.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

hey as long as it works. Glad you figured it out.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.