0

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?

Joker
  • 1,133
  • 7
  • 18
  • 22

3 Answers3

5

The reason your initial code didn't work without the alert was because in addition to needing the "onComplete" function, you also need a load event on the iframe. The alert gave the iframe time to load, which made your code render correctly.

So, it should have looked like: 

$("a.money").colorbox({iframe:true, width:700, height:425,
    onComplete: function() {
        $("#cboxLoadedContent iframe").load(function(){
              $test = $(this).contents().find("#content").html();
              $(this).contents().find("#container").html($test);
    });
    } 
});
Karen
  • 51
  • 1
  • 2
0

This should work.

  $("a.money").colorbox({ href:"#content", inline: true, iframe: true });
  <div id='content'>Any content here</div>
  <a class='money' href="#">question</a>
Vasile Laur
  • 699
  • 7
  • 16
  • Sorry if I wasn't too clear, I actually need the #content from the iframe that is loading content from another page. So I would need something like this instead: `$("a.money").colorbox({href:$("a.money").attr("href")+" div#content", iframe:true, width:600, height:400 });` (But that doesn't work of course) – Joker Jan 04 '11 at 02:49
  • Tried that, but it doesn't work since it's not really inline content. – Joker Jan 04 '11 at 03:19
-1

I found an alternative solution as per the code found in these threads:

http://groups.google.com/group/colorbox/browse_thread/thread/9a54137b8cae96c5/11d37ea7ab72562f http://groups.google.com/group/colorbox/browse_thread/thread/8a0deec97202e27c/2e7524b87931a89e

It doesn't use iframe, but it's more or less the exactly what I wanted.

Joker
  • 1,133
  • 7
  • 18
  • 22