FORUMS: list search recent posts

Full page overlay window - link from IFrame?

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Simon Bonner
Full page overlay window - link from IFrame?
on Nov 12, 2008 at 9:11:33 pm

I'm trying to implement Abraham Chaffin's full page overlay code, but I'm having trouble because the link the user has to follow to view the overlay is in an IFrame embedded in the main page.

Is there anyway of modifying the code so that the overlay doesn't just open inside the Iframe but instead in the main page (so it overlays the full window as desired)?

I tried moving bits of code around but to be honest I'm not good enough with Javascript to know exactly what I'm doing.

Simon Bonner

youtube.com/simonsaysfx


Return to posts index

Abraham Chaffin
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 10:28:03 pm

Hey Simon,

The example page is at this URL:

http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay/s...

If you view the source there you should be able to see the code. The code is also in the main page of the tutorial. There's further explanation of how to modify the window overlay contents at this post:

http://forums.creativecow.net/readpost/16/856255

I get the feeling however that there might be something else wrong with the implementing of the code in your page. Do you have a link to where you're trying this out so I can take a look?

Abraham


Return to posts index

Simon Bonner
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 10:47:53 pm

Hi Abraham,

Thanks for replying.

I'm not sure if I made myself crystal clear in my last post. I've got the code working fine as is, no problems at all. But the way I want to use the code is different to the one you describe in your tutorial (in which the user clicks a link which makes the overlay appear on top of the same window).

I want my users to click a link which appears in a small IFrame which is embedded in a larger webpage, but for the overlay to appear on top of the larger page and not on top of the IFrame enbedded into that larger page. So I suppose I'm trying to get a click in one HTML page to 'activate' the overlay in another. Perhaps it's not possible?

Simon Bonner

youtube.com/simonsaysfx


Return to posts index


Abraham Chaffin
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 10:54:46 pm

What you are describing is very much possible. Thanks for the clarification.

The javascript you currently have should be something like this:


function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){


You need to change it to this:


function clicker(){
var thediv=top.document.getElementById('displaybox');
if(thediv.style.display == "none"){


The only thing that changed was "top." was added. This causes the javascript to target the top frame. Try that out - I hope it works for you, if not let me know.

Abraham


Return to posts index

Abraham Chaffin
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 10:57:20 pm

By the way - forgot to mention. The display box and css styles also need to reside in the top page. Otherwise it will not find it.

Abraham


Return to posts index

Simon Bonner
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 11:07:19 pm

Thanks Abraham,

To clarify: The CSS goes in the top page, along with the modified chunk of Javascript and this bit too <div id="displaybox" style="display: none;"></div>

Only the link that executes the function goes in the IFrame that I've got embedded into the top page?

Simon Bonner

youtube.com/simonsaysfx


Return to posts index


Abraham Chaffin
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 11:12:48 pm

The CSS goes in the top page
The div goes in the top page
The Javascript goes in the IFrame
The link that executes the function goes in the IFrame

The link will execute the javascript which will target the top frame which will have the div and css.

Glad you're finding the little tutorial useful ;)

Abraham


Return to posts index

Simon Bonner
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 11:21:33 pm

Thanks, Abraham!

Works a treat!

Simon Bonner

youtube.com/simonsaysfx


Return to posts index

Simon Bonner
Re: Full page overlay window - link from IFrame?
on Nov 12, 2008 at 11:13:11 pm

(ok, I'm an idiot - when I said "this bit too" I forgot to put the code inside tags so it would show up here. I meant the short DIV tag that comes after the BODY tag)

Simon Bonner

youtube.com/simonsaysfx


Return to posts index


Gaurav Handoo
Re: Full page overlay window - link from IFrame?
on Oct 10, 2012 at 2:28:49 pm

Hi, I've been trying to do something similar and followed the steps mentioned above for placing the CSS and JS but still couldn't get it work can u help me out. Following is the sample of what my codes look like:

<<-----Parent Page--->>
<head>
CSS for overlay div and other content in the page
</head>
<body>
<div id="parentdiv" class="parentdiv">
<div style="float:left;" id="xtrnlpg">
<iframe src="TestPage.htm" class="inlinepage"></iframe>
</div>
<div style="float:left;">This is sample text</div>
<div class="overlay displaynone" id="overlay"></div>
</div>
</body>

<<------Page called in Iframe---->>
<head>
<script>
function popuplaunch() {
document.getElementById("popupdiv").style.display = "block";
top.document.getElementById("overlay").style.display = "block";
}
</script>
<style type="text/css">
.popupdiv
{
display:none;
padding-top:35%;
padding-left:20%;
z-index:1100;
}
</style>
</head>
<body>
<button id="popupbtn" onclick="popuplaunch();">
Pop Up Button
</button>
<div class="popupdiv" id="popupdiv">
This is a test popup
<button id="popupclose" onclick="popupclose();">
Close Popup
</button>
</div>
</body>


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]