iframe with link, opens up colorbox in parent

Question

So I have a small iframe with a bar graph, and I would like so that when I click the graph, it opens up a colorbox (with a more detailed graph) from the "PARENT" of that iframe...

Basically I can get the iframe to open a colorbox, but it's tiny, I need it to be as big as the parent window.

How do I achieve this? Full code please... I am new to this. Here is how far I am through now:

Parent code:

$(document).ready(function(){
   function call_colorBox(params) {
   $.colorbox(params);
   }
})

iframe code:

<a onclick="parent.call_colorBox({ width: '80%', height: '80%', iframe: true, href:'dash6detail2.0xpay.php' });" href="#"><div id="chartContainer" style="max-width:440px;height: 250px;"></div></a>

But nothing seems to happen? What am I missing?

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

This question covers how this could be done:

Calling a parent window function from an iframe

And is well answered. They even cover the concept that you need both parent window and the iframe to be in the same domain. Should solve your conceptual problem.

Without your actual code examples it'd be hard to expand on with code but basically:

Header of parent window defines func "openColorBox"
Iframe sets click event on bar graph which when clicked calls parent.openColorBox

EDIT after code change in post:

Assigning the function inside the document ready closure made it inaccessible to the outer scope. So either remove it from the closure as commented below, or remove the document ready closure entirely.

edited May 23 '17 at 12:21

Community

1
1

answered Dec 12 '13 at 04:38

Nick Sharp

1,881
12
16

No prob, when/if you get an implementation that is close put a jsFiddle and I can help you finish debugging. – Nick Sharp Dec 12 '13 at 04:42
I've reached that stage now, stay tuned for a jsfiddle... thanks – atomapps Dec 12 '13 at 05:02
not sure how I would get this on an jsfiddle with iframes and all, is it alright if I post an edit above with more code? – atomapps Dec 12 '13 at 05:04
Have a look man, I don't understand why it loads nothing... mmm – atomapps Dec 12 '13 at 05:26
Yeah, you were defining the call_ColorBox function inside of the document ready closure... meaning that outside of that closure it did not exist. Good find... you might still want to define it in the closure but you'll want to assign it to something that will be available outside. GJ – Nick Sharp Dec 12 '13 at 05:35

score 0 · Answer 2 · answered Dec 12 '13 at 05:31

0

So the code I originally had was correct, however needed to be taken out of:

$(document).ready(function(){

Thanks Nick for your help

answered Dec 12 '13 at 05:31

atomapps

183
1
3
13

iframe with link, opens up colorbox in parent

2 Answers2