asked on

call jquery function from another iframe

I have a jquery plugin that is a popup window script.

It works great if everything is contained on the same page, however, I need to have the link that calls the script on a separate iframe from where the popup rests.

Here is the link
<div id="popupbutton">Popup Link</div>
 
Here is the popup content
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Title of our cool popup, yay!</h1>
		<p id="contactArea">
			Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
			<br/><br/>
			We can use it for popup-forms and more... just experiment!
			<br/><br/>
			Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
			<br/><br/>
		</p>
	</div>
	<div id="backgroundPopup"></div>
 
 
And here is the jquery popup.js
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/
 
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
 
//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}
 
//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}
 
//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}
 
 
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	$("#popupbutton").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});
 
});

Open in new window

Michel Plungjan

window.frames[0].loadPopup();
???

Shaye Larsen

ASKER

Tried a few scenarios with that suggestions and was not able to get it to work.

Here is the link I need to call the jquery function from, so i tried this,
<a id="button" target="iframe_i_contain" class="sitenavlinkstext" onClick="window.frames[0].loadPopup()" href="#">Delete This Site</a>

Also tried
<a id="button" target="iframe_i_contain" class="sitenavlinkstext" onClick="window.frames[iframe_i_contain].loadPopup()" href="#">Delete This Site</a>

No luck so far.

ziffgone

Let me understand, the link is in the top level page but the popup code is in the iframe? Or are they both in the iframe? Or is the popup html and javascript in the top level page and the link in the iframe?

Sorry for the questions, but it should be easier when I understand where what is.

Regards...

Shaye Larsen

ASKER

Hi ziffgone,

The link is in the iframe. The popup is on the parent page of the iframe.

The reason the popup needs to be on the parent is because it has a grey out function which greys out the entire screen when activated. If the popup is only on the iframe, it will only grey out that iframe. But sitting on the parent, it greys out the whole window. Unfortunately, the link does need to sit inside the iframe.

ziffgone

k, try this:

        $("#popupbutton").click(function(){
                //centering with css
                top.window.centerPopup();
                //load popup
                top.window.loadPopup();
        });

Open in new window

ziffgone

Or:

<a id="button" target="iframe_i_contain" class="sitenavlinkstext" onClick="top.window.loadPopup()" href="#">Delete This Site</a>

Open in new window

Shaye Larsen

ASKER

ziffgone,

Tried that. Had no effect. It just loads itself in whatever Iframe i target. It doesn't activate the popup.

ziffgone

OK, I'm not getting a clear image as to where things are.

The link is in the iframe. Where is the popup javascript? In the top level window, or is it in the iframe page? Also, is the HTML for the "popupContact" and "backgroundPopup " divs in the top level or iframe?

Tell me which order it's in according to these diagrams:

1. -----------------------
Top Level Page
 - links to jquery
 - links to or contains popup javascript
 - contains $(document).ready script in <head>
 - contains "popupContact" and  "backgroundPopup " divs
 
 » iframe page
   » links to jquery?
   » contains popup link button
 
-----------------------
 
2. -----------------------
Top Level Page
 - links to jquery
 - links to or contains popup javascript
 
 » iframe page
   » links to jquery
   » contains $(document).ready script in <head>
   » contains "popupContact" and  "backgroundPopup " divs
   » contains popup link button
 
-----------------------
 
3. -----------------------
Top Level Page
 - links to jquery
 
 » iframe page
   » links to jquery
   » links to or contains popup javascript
   » contains $(document).ready script in <head>
   » contains "popupContact" and  "backgroundPopup " divs
   » contains popup link button
 
-----------------------
 
Or 
4. -----------------------
Top Level Page
 - links to jquery
 - contains $(document).ready script in <head>
 
 » iframe page
   » links to jquery
   » links to or contains popup javascript  
   » contains "popupContact" and  "backgroundPopup " divs
   » contains popup link button
 
-----------------------

Open in new window

Shaye Larsen

ASKER

Hi ziffgone,

The important things to note are these.

1. The link has to be on the iframe.
2. The popup with the background effect has to occur on the top page.

Whichever combination causes that to occur is the right one. I can move the links to the jquery stuff and the script to either page. I have tried placing them on both in a few different scenarios but am not that versed in javascript calling to different pages like this.

ziffgone

OK, It should be set up like #1:

1. -----------------------
Top Level Page
- links to jquery
- links to or contains popup javascript
- contains $(document).ready script in <head>
- contains "popupContact" and "backgroundPopup " divs

» iframe page
» links to jquery?
» contains popup link button

-----------------------

Set it up like this and add an ID to your iframe if you haven't.

Not sure if this will work as I haven't done any cross frame scripting with jquery before, but let's try this for the $(document).ready script, (untested - let me know if you get errors):

$(document).ready(function(){
        
        //LOADING POPUP
        //Click the button event!
        $('#iframe_id').(document).ready(function(){
             $('#iframe_id').(document).("#popupbutton").click(function(){
                //centering with css
                centerPopup();
                //load popup
                loadPopup();
             });
        });
                                
        //CLOSING POPUP
        //Click the x event!
        $("#popupContactClose").click(function(){
                disablePopup();
        });
        //Click out event!
        $("#backgroundPopup").click(function(){
                disablePopup();
        });
        //Press Escape event!
        $(document).keypress(function(e){
                if(e.keyCode==27 && popupStatus==1){
                        disablePopup();
                }
        });
 
});

Open in new window

Shaye Larsen

ASKER

Ok, tried that with the same result. What happens is that it refreshes top with the content of the iframe. I believe this is because my link points to #, but targets top. Either way, the jquery is not being called.

Below I will detail exactly what I tried.

In top, I have links to both the jquery and the popup with these
 
<script src="jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery/plugins/popup.js" type="text/javascript"></script>
 
The popup.js referenced above is as below.
 
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!					
/***************************/
 
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
 
//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}
 
//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}
 
//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}
 
 
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
        
        //LOADING POPUP
        //Click the button event!
        $('#iframe_id').(document).ready(function(){
             $('#iframe_id').(document).("#popupbutton").click(function(){
                //centering with css
                centerPopup();
                //load popup
                loadPopup();
             });
        });
                                
        //CLOSING POPUP
        //Click the x event!
        $("#popupContactClose").click(function(){
                disablePopup();
        });
        //Click out event!
        $("#backgroundPopup").click(function(){
                disablePopup();
        });
        //Press Escape event!
        $(document).keypress(function(e){
                if(e.keyCode==27 && popupStatus==1){
                        disablePopup();
                }
        });
 
});
 
 
In the iframe, I have this link. Note, when it works all on one page, it is the id value that makes it work. I'm not sure referencing the id value like this in the link does anything.
 
<a id="button" target="_top" class="sitenavlinkstext" onClick="top.window.loadPopup()" href="#">Delete This Site</a>
 
I also tried placing the jquery links in both the top and the iframe just to test.

Open in new window

ASKER CERTIFIED SOLUTION

ziffgone

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

Hi ziffgone,

That worked. Now I have a problem with the way it displays the popup in IE.

Here is the link to that question.
https://www.experts-exchange.com/questions/24180561/ie-trouble-getting-jquery-pop-up-to-display-properly.html

Thanks