jQuery Colorbox Iframe and Selector

Posted by Joker on Stack Overflow See other posts from Stack Overflow or by Joker
Published on 2011-01-04T00:46:45Z Indexed on 2011/01/04 3:54 UTC
Read the original article Hit count: 371

Filed under:
|
|

I have this:

$("a.money").colorbox({href:$("a.money").attr("href")+" div#content"});

Which opens an overlay but only of the content within the #content selector. If I add iframe:true, this will no longer work. Is there a way to get it to work with an iframe?

Edit: The closest I could get it to work was by doing this:

$("a.money").colorbox({iframe:true, width:700, height:425,
 onComplete: function() {
  alert('test');
  $test = $("#cboxLoadedContent iframe").contents().find("#content").html();
  $("#cboxLoadedContent iframe").contents().find("#container").html($test);
 } 
});

Although without the alert it doesn't appear to work, I looked into that and I think I need to use .live(), which led me to trying this:

$('a.money').live('click', function() {
 url = this.href; // this is the url of the element event is triggered from
 $.fn.colorbox({href: url, iframe:true,width:700, height:425,
  onComplete: function() {
   $test = $("#cboxLoadedContent iframe").contents().find("#content").html();
   $("#cboxLoadedContent iframe").contents().find("#container").html($test);
  } 
 });
 return false;
});

Didn't work, I still needed to add an alert to make it work.

In case you might be wondering what I'm trying to do. The webpage is loaded in the iframe, with all the elements in the #container, so that includes #header, #sidebars, but I only want to show the #content inside the iframe. However, this led me to another problem I realized. Assuming I got this to work without the alert, it will only work for that initial page. For example, if I loaded up a form in the iframe, after submitting the form, I would once again see the whole layout instead of just the #content portion. Is it possible to continue only showing the #content portion of the page upon further navigation?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about iframe