jQuery Colorbox Iframe and Selector
- by Joker
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?
