?
Solved

call jquery function from another iframe

Posted on 2009-02-23
13
Medium Priority
?
10,283 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:Shaye Larsen
  • 6
  • 6
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23719535
window.frames[0].loadPopup();
???

0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 23722732
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.
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 23728298
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...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Shaye Larsen
ID: 23728448
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.
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 23728481
k, try this:
        $("#popupbutton").click(function(){
                //centering with css
                top.window.centerPopup();
                //load popup
                top.window.loadPopup();
        });

Open in new window

0
 
LVL 14

Expert Comment

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

Open in new window

0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 23728556
ziffgone,

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

Expert Comment

by:ziffgone
ID: 23730435
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

0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 23730498
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.

0
 
LVL 14

Expert Comment

by:ziffgone
ID: 23730541
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

0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 23730590
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

0
 
LVL 14

Accepted Solution

by:
ziffgone earned 2000 total points
ID: 23730771
OK, here's what I got for you:

http://webmastereseller.com/test/iframe_test.htm

Source codes are attached below. Hope this is what you're looking for.

Regards...
top-level-page.txt
iframe-page.txt
0
 
LVL 1

Author Comment

by:Shaye Larsen
ID: 23746331
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.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24180561.html

Thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

850 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