Solved

Centering Fancybox in a parent window from an iframe

Posted on 2010-11-24
10
6,584 Views
Last Modified: 2012-05-10
Hello, I'm piggybacking off this previously asked question. I wasn't able to find a solution using the incomplete answer provided.

My goal is to open Fancy box centered to the parent window from a link within an iframe. I'd like to keep as little code in the index.html as possible as there are a lot of links contained in my iframe.html.

This is what I have (i've excluded the extraneous code for clarity):

iframe.html
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript">
(function($) {
   $.fn.topFancybox = function(settings) {
       var a = top.document.createElement('a');
       a.style.display = 'none';
       a.class = this.class;
       a.href = this.href;
       top.document.body.appendChild(a);
       $(a).fancybox(settings);
       $(a).click();
   };
})(jQuery);

$(document).ready(function() {
		$("a.group").topFancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'	:	200, 
		'overlayShow'	:	false,
		'titleShow'     :   true,
                'titlePosition' :   'outside',
	});
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.1.css" media="screen" />
</head>

<body>
  <div><a class="group" rel="group" href="image.jpg"><img src="image_thumb.jpg" alt="image"></a></div>
</body>

Open in new window


parent.html
<head>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.1.css" media="screen" />
</head>

  <div>
    <iframe src="iframe.html"></iframe>
  </div>

Open in new window


I've only started to work with Javascript/JQuery so my knowledge is limited. Please be clear. Thanks.
0
Comment
Question by:boringrick
  • 7
  • 2
10 Comments
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34208933
Not possible.  Anything inside the iframe cannot be positioned OUTSIDE of the iframe... does that make sense?  see my attachment.  The green box would be fancybox window.  The area outlined in red would not be vissible.

Your best solution is to include fancybox in your index file.  I know you don't want to do this, but it's really the only way you can.  Then you would use window.parent to trigger fancybox.
fancybox-iframe-parent.jpg
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34208947
Oh yeah, the orange box would be the iframe.

Cheers.
0
 

Author Comment

by:boringrick
ID: 34209288
I should clarify: I don't mind including JQuery code (or a supplementary JavaScript file) in my index.html, but I'd like to keep my list of links contained in the iframe. Based on the previous answered question this is possible, I just wasn't able to figure out what code went where.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34234724
Things get kind of confusing when you start including the same files everywhere.  This is my best advice in terms of minimizing any duplicate scripts, and achieving what you want in terms of fancybox:

1) Include jQuery and Fancybox in your parent.html, and preferably NOT in the iframe
2) In every page loaded into the iframe, you can do the following (note the SCRIPT block):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script type="text/javascript">



var $ = parent.jQuery;

var $doc = $(window.document);



$(window).load(function() {

	// In order to access anything on this page, you have to use this syntax

	// where you pass $doc as the second parameter:

	$('#myDiv', $doc).fancybox();

});





</script>

</head>



<body>



Some text in the iframe.



<div id="myDiv">This is my DIV</div>



</body>

</html>

Open in new window

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34235147
My apologies, as my example was a little incomplete and untested.  Try this:

(the first is the parent page, the second is the iframe page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parent Page</title>
<link href="jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.1.pack.js"></script>

</head>
<body>

<iframe src="jquery fancybox iframe-inner iframe.html" style="width:500px; height:400px; margin-left:200px; margin-top: 250px;" scrolling="auto" id="myIframe" />

</body>
</html>

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe Page</title>
<script type="text/javascript">

var $ = parent.jQuery;
var $doc = $(window.document);

// Use this syntax instead of $(function() { ... })
$(window).load(function() {
	// In order to access anything on this page, you have to use this syntax
	// where you pass $doc as the second parameter:
	$('#gallery a', $doc).fancybox();
});


</script>
</head>

<body>

<div>
Some text in the iframe.

<ul id="gallery">
    <li><a href="http://www.treehugger.com/earth-day-action.png"><img src="http://www.treehugger.com/earth-day-action.png" alt="Image 1" style="width:50px;" /></a></li>
</ul>

</div>

</body>
</html>

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 34236960
This post really got me intrigued, so I revisited some things.  Here is my final working solution, which is better than my previous comment for several reasons.  But it still has it's short-comings.

http://www.neteffectservices.com/NetEffect/tmp/jquery-iframe-example/index.html
0
 

Author Closing Comment

by:boringrick
ID: 34239968
Brilliant. I opted for the second solution as I can live without the title or add it to the bottom of a div if I need to. Thanks again!
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34241863
No worries.  Most of the problems come about when jQuery tries to manipulate the DOM of the iframe.  It works in FF, but not IE and Webkit (chrome/safari).  The reason the title doesn't work is because there are 2 phases to fancybox DOM manipulation:

1) When the page loads, fancy box creates all of it's containers and overlays
2) When you click a link to trigger the fancybox popup... fancybox determines whether or not you need a title, and creates the title element accordingly.

So with my solution, here's what happens:
1) jQuery and fancybox load normally
2) fancybox creates all of it's necessary container and overlays (does not include the title)
3) my code modifies jQuery so that all selectors point to the iframe by default
4) fancybox then tries to create a title element (if needed) when the user clicks a link

In step 4, the title element is inserted into the iframe, as opposed to the parent document.  This results in an error in some browsers.  The same principal can be applied to any plugin.  

Here is the rule which determines whether or not this will work for you:
If jQuery tries to manipulate the DOM after the initial page load, then this solution isn't going to work.

Email me if you have any further questions, as there are ways around this if you are writing your own code. ryan [dot] wheale [at] gmail [dot] com.
0
 

Expert Comment

by:MsKrissy
ID: 34546063
I know this has been answered from an image perspective, but when I try this with a html or php file instead of a jpeg, it doesn't work.  do you have any idea why?  I am using your parent and iframe pages as testing.

This seems to be the only find close to what I am looking for, so any help would be much loved!
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34546223
This is probably because jquery is attempting to create extra html elements AFTER the initial page load.  In such a case, my solution will not work.  I did not test any different scenarios than the one posted, but my blind guess would be that the example I posted is the ONLY way that can work without writing a lot of code.

Sorry.  I hesitated to even post my solution as it is very very limited.  If there ends up being a lot of interest in this topic, then I may take the time to write the code necessary to allow fancybox to communicate with the contents of an iframe.  Until then, I'm afraid you are out of luck.

Cheers.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now