I am using Fancybox 2.1.4. I would like to access the element inside the iframe in the afterShow event.
$('.fancybox').fancybox({
type: 'iframe',
afterShow: function() {
//need to access element #mydiv
}
iframe: {
preload: true
}
});
How can I do that? Does preload: true and preload: false has any effect on accessing the element? Suppose that the parent window and the iframe access the pages on the same website.
This is how you can access iframe and, for example, bind custom load event if using v3:
$("[data-fancybox]").fancybox({
iframe : {
preload: false
},
afterLoad : function(instance, slide) {
slide.$slide.find('iframe').on('load', function() {
alert('done');
});
}
});
https://codepen.io/anon/pen/yXwoNM?editors=1010
Related
I am trying to prevent fancybox 4 from closing when clicking outside of the fancybox container.
Existing answers mentioned clickSlide : false from fancybox 3 upwards.
But it does not seem to work. I am creating dynamic fancy boxes with data coming from an ajax call.
success: function (response) {
if (response.error === true) {
alert(response.errMsg);
} else {
const fancybox = new Fancybox([
{
src: response.form,
type: "html",
clickSlide: false, // disable close on outside click
touch: false, // disable close on swipe
},
], {
mainClass: 'ratingFormContainer',
fullscreen: {
autoStart: true
},
clickSlide: false,
clickOutside: false,
}
);
console.log(response.id);
}
}
I tried inserting the options under touch:false as well but that did not seem to work either.
Also: Someone with enough reputation should create a fancybox-4 tag, so that future questions can be tagged appropriately.
Here is the JavaScript code to prevent the double click event
$("#jstree_view").on("dblclick", 'li a', function (e) {
e.preventDefault();
});
but it is not working.
set the $.jstree.defaults.core.dblclick_toggle = false
example:
$('#jstree').jstree({
"core" : {
"dblclick_toggle" : false
}
});
jstree API
I'd like to use Fancybox 2 with jQuery to open a page via Ajax, form_page.php and then get the response in the same fancybox window...
I use this as js:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 550,
maxHeight : 450,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
html is:
<a class="various fancybox.ajax" href="/form_page.php">Ajax</a>
I just need that the POST is loaded in the same /form_page.php inside Fancybox.
I use the iframe variation when putting forms in Fancybox. This allows me to do regular posts, etc. When the form is successfully processed, I use JavaScript to close the Fancybox "pop-up" and refresh the calling parent document.
Fancybox "Pop-up" Forms:
$('a.popup').fancybox({
'type':'iframe',
'hideOnContentClick':false,
'overlayShow':true,
'speedIn':100,
'speedOut':50,
'width':600,
'height':500,
'padding':0,
'margin':0,
'onClosed':function(){window.location.reload();},
'onComplete':function(){$('input.focus:last').focus();}
});
Close "Pop-up":
if (window.self !== window.top) {
// is nested
parent.$.fancybox.close();
}
I think you can try to declare your fancybox and use the option afterShow to bind your form:
$('.various').fancybox({
closeClick: false,
afterShow: function() {
$("form#user_new").bind('ajax:success', function(evt, data, status, xhr) {
// When your form will be submitted and successfull,
// You can try to open a fancybox here with your result here
}
}
});
That's not really a code to copy/paste because I didn't give exactly what you want, for the simple reason that I don't know as well ;) but if it can help.
I am trying to get QML to interact with FB graph API using FB Javascript SDK.
I'm loading this HTML inside a WebView element:
html: "<script>console.log(\"This is in WebKit!\"); window.FB.init();</script>"
and I've also created a JS Window Object named FB inside the WebView:
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "FB"
}
But as soon as the window.FB.init() is called, it throws out an error:
ReferenceError: Can't find variable: window
Another approach I'm using is load the FB.init() function using Component.onComplete
function startupFunction() {
console.log("This call is in QML!");
FB.init({
appId:'XXXXXXXXXXXXX', cookie:true,
status:true
});
console.log(FB);
}
Component.onCompleted: startupFunction();
But I get the error as :
TypeError: Result of expression 'FB.init' [undefined] is not a function
Here is the complete QML:
import QtQuick 1.0
import "fb.js" as FB
import QtWebKit 1.0
Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
}
WebView {
preferredWidth: 490
preferredHeight: 400
scale: 0.5
smooth: false
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "FB"
}
html: "<script>console.log(\"This is in WebKit!\"); window.FB.init();</script>"
function startupFunction() {
console.log("This call is in QML!");
FB.init({
appId:'xxxxxxxxxxxx', cookie:true,
status:true
});
console.log(FB);
}
Component.onCompleted: startupFunction();
}
}
I think the problem is that you are not defining anything in your window-object, your QtObject just contains the windowObjectName but no functions or vars. windowObjectName is really just the name for the new object, qml does not use the "fb.js"-import for that object.
According to the docs it's supposed to look like this:
WebView {
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "FB"
// the stuff you want in that window-object goes here:
function init() {
console.log("FB.init");
}
}
}
I implemented infinite scroll along with masonry on this tumblr: [check revision for link]
The audio player does not appear in posts loaded through infinite scroll, instead it displays the text "[Flash 9 is required to listen to audio.]"
The Inspire Well tumblr theme (I can't post another hyperlink but you can easily google it) seems to have solved this problem through this code:
if(InspireWell.infiniteScrolling && InspireWell.indexPage){
$masonedColumn.infinitescroll({
navSelector : 'ul.page_nav', // selector for the paged navigation
nextSelector : 'ul.page_nav li.page_next a', // selector for the NEXT link (to page 2)
itemSelector : '.post', // selector for all items you'll retrieve
loadingImg : '',
donetext : 'No more pages to load.',
errorCallback: function() {
// fade out the error message after 2 seconds
//$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// call masonry as a callback
function( newElements ) {
$(newElements).css({ visibility: 'hidden' });
$(newElements).each(function() {
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".player span").css({ visibility: 'hidden' });
var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
$("body").append(script);
$.ajax({
url: "http://thetestinggrounds.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".player span").css({ visibility: 'visible' });
$audioPost.find("span:first").append('<script type="text/javascript">replaceIfFlash(9,"audio_player_' + audioID + '",\'\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e\')</script>');
}
});
}
});
I tried to adapt this for my tumblr (with placeholder text to see if it was finding the correct element):
$(window).load(function(){
$('#allposts').masonry({
singleMode: true,
itemSelector: '.box'
});
$('#allposts').infinitescroll({
navSelector : "div.navigation",
nextSelector : "div.navigation a:first",
itemSelector : ".box",
debug : true
},
function( newElements ) {
$(this).masonry({ appendedContent: $( newElements ) });
$(newElements).each(function(){
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".audio span");
var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
$("body").append(script);
$.ajax({
url: "http://fuckyeahempathy.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".audio span");
$audioPost.find("span:first").append("<p>audio player not working</p>");
}
});
}
});
}
);
});
But there is no sign of the text. Any help would be greatly appreciated.
Here is a solution I came up with when I needed to implement the same functionality in the template I was creating.
In your HTML, include your AudioPlayer Tumblr tag between comments. This is to prevent loaded scripts from being called. Also add a class "unloaded" to keep track whether or not we've loaded the audio player for this post or not.
...
{block:AudioPlayer}
<div class="audio-player unloaded">
<!--{AudioPlayerBlack}-->
</div>
{/block:AudioPlayer}
...
If you look at the commented code after the page is loaded, you will notice an embed tag being passed to one of the Tumblr javascript functions. Since we commented it, it will not execute. Instead we will want to extract this string and replace the div contents with it.
Create a javascript function which will do this. This can be done with regular javascript, but to save time I will do it with jQuery since this is how I did it for my template:
function loadAudioPosts() {
// For each div with classes "audio-player" and "unloaded"
$(".audio-player.unloaded").each(function() {
// Extract the <embed> element from the commented {AudioPlayer...} tag.
var new_html = $(this).html().substring(
$(this).html().indexOf("<e"), // Start at "<e", for "<embed ..."
$(this).html().indexOf("d>")+2 // End at "d>", for "...</embed>"
);
// Replace the commented HTML with our new HTML
$(this).html(new_html);
// Remove the "unloaded" class, to avoid reprocessing
$(this).removeClass("unloaded");
});
}
Call loadAudioPosts() once on page load, then every time your infinite scrolling loads additional posts.
html
<div class="audio" id="{postID}">{AudioPlayerBlack}</div>
css
.audio {
height:30px;
overflow-y: hidden;
}
.audio span {
display:none;
}
java
setTimeout(function() {
$wall.masonry({ appendedContent: $(newElements) });
/* repair audio players*/
$('.audio').each(function(){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$.ajax({
url: 'http://yoolk.tumblr.com/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
$audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
}
});
});
}, 2000);