StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think the title of your post is a little bit misleading. Anyway, if I understood right, you just want to load a partial content (DIV) from an external html file into fancybox. In your example, the file episodeSpeakers.html contains a DIV with ID='series900'</p> <pre><code><div id="series900">selected content</div> </code></pre> <p>If the above is correct, then you don't need to use jQuery live(), but binding fancybox to a click() and use ajax and dataFilter to select the content.</p> <p>With the same html, this script should do the trick:</p> <pre><code>$("a.BannerVideoAwesome").click(function() { var grabVid = "#"+$(this).attr('id'); $.fancybox(this,{ 'type': 'ajax', 'ajax': { dataFilter: function(data) { var vidContents = $(data); vidContents = $(grabVid, vidContents); return(vidContents); } // datafilter } // ajax }); // fancybox return false; }); //click </code></pre> <p>or you may use</p> <pre><code>$("a.BannerVideoAwesome").click(function(event) { event.preventDefault(); . . </code></pre> <p>instead of</p> <pre><code>return false; </code></pre> <hr> <p><strong>IMPORTANT</strong> : Due to some cross-browser issues, don't use the dataFilter solution above. It would be better to use the fancybox's inline method, adding the partial content (from the external html file) into a hidden DIV within your calling html document and then move it from there into fancybox. It requires (of course) to add such DIV. e.g.:</p> <pre><code><div style="display: none;"> <div id="fancyContent"></div> </div> </code></pre> <p>Then use this script:</p> <pre><code>$("a.BannerVideoAwesome").click(function() { var grabVid = "#"+$(this).attr('id'); $.ajax({ type: "GET", // default dataType: "html", cache: false, url: this.href, success: function (data) { $("#fancyContent").html(grabVid ? $("<div>").append(data).find(grabVid) : data); $.fancybox({ 'href': "#fancyContent", 'onCleanup': function() { var fancyContent = this.href; $(fancyContent).unwrap().empty(); } // onCleanup }); // fancybox } // success }); //ajax return false; }); //click </code></pre> <p>that works on most browsers. BTW, the onCleanup option fixes <a href="http://groups.google.com/group/fancybox/browse_thread/thread/fab7b6d81a173b33/" rel="nofollow">this bug</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload