Is there an "onComplete" state or similar for the Facebook Comments plugin? I'm trying to add a jScrollPane scrollbar to a content box that has FB Comments inside it. What happens is I get the FB Comments iframe placed on top of the box's content (as if it had an absolute position / was floating. Guessing this has to do with FB Comments initializing after jScrollPane.
Edit:
Now what I'm really after is combining ColorBox, Facebook Comments and jScrollPane and the headache starts pretty soon:
$('.mybox').colorbox({ innerWidth: 640, innerHeight: 480, scrolling: false, onComplete: function() {
$('#cboxLoadedContent').jScrollPane({
// Init FB Comments here instead? Then call jScrollPane?
showArrows: true,
scrollbarWidth: 15,
scrollbarMargin: 0
});
},
onClosed: function() {
// What would happen here if I need to listen for FB Comments also?
$('#cboxContent').jScrollPaneRemove();
}
});
Sorry if my question is a bit unclear, it's late and I've been in front of a screen for 10+ hours.
Using the xfbml.render event:
FB.Event.subscribe('xfbml.render', function() {
console.log('Loaded!');
});
Related
THIS IS A FEATURE REQUEST FOR THE SOUNDCLOUD CREW (since they do not respond via api#soundcloud.com)
Like SoundCloud itself, could the API show profile thumbnails when there are no track thumbnails available?
This way, when embedding SoundCloud tracks via Embedly or the like -- ie. http://jsbin.com/kezonutoroma/1/edit -- people won't have to be faced with those empty placeholder images.
https://soundcloud.com/oembed?url=https://soundcloud.com/liv-lykke/andres-haender&format=xml
<thumbnail-url>http://a1.sndcdn.com/images/fb_placeholder.png</thumbnail-url>
Should be:
<thumbnail-url>http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg</thumbnail-url>
Here is a static, more hacky solution:
var defaultimg = 'http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg';
$('div a').embedly({
key: '7c6cf67ad409446cacd53309d96b66a0',
query: {
maxwidth: 500,
autoplay: true
},
display: function(data, elem){
$(elem).html('<img src="'+defaultimg+'"/>');
$(elem).addClass('play')
.append('<span />')
.width(data.thumbnail_width)
.height(data.thumbnail_height)
.find('span')
.css('height', data.thumbnail_height)
.css('width', data.thumbnail_width);
}
}).on('click', function(){
var data = $(this).data('embedly');
$(this).replaceWith(data.html);
return false;
});
http://jsbin.com/qovirepoyoto/1/edit
I would recommend to get the default image via an API call to the user endpoint.
Hope this helps you.
After detail search and googling I finally decide to put my question.
In my JQM web app there are total 4 pages. 2 of them are dynamically populated via Ajax. I have used
$.extend($.mobile, {
defaultPageTransition: 'none'
});
My dynamically populated function is
$.get_detail= function(){
$.ajax({
url: "mypage.cfm",
data: data,
timeout:5000,
cache:false,
type:'GET',
dataType:"html",
success: function(data3) {
//$('#filldiv').empty();
$("#filldiv").html(data3);
$.mobile.changePage('#detailpage');
},
error: function(statusCode, errorThrown)
{
if (statusCode.status == 0)
alert("you are offline");
else
alert("Please try again.");
}
});
}
When I change page flash white screen just like flicer happened but when there is no data fill in div then there is no flicker. I have noticed that, if there is no screen size change then every thing is okay and if screen size change by filling the dynamic content flicker happen
Please help me out to solve this issue. Thank you
Here's what I'm using to disable default transitions:
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = 'none';
});
The newest version 1.4, is also supposed to help with better transitions.
I'm loading a page dynamically via fancybox and AJAX. Everything is fine except when the dynamically loaded page is too tall for the screen. It will simply overflow past the bottom of the screen.
I'm using..
function dynamic_page(){
var url = "#ajax url here#";
$.fancybox.showLoading();
$.post(url, function(res){
$.fancybox.open(res,{
afterClose : function (){
$("#remove_val").val(0);
}
});
$.fancybox.update();
});
}
When a user clicks the page, it will reload again dynamically, keeping the width and height of the original fancybox:
$.post(url, function(res){
if(res){
$("#page_load_here").html(res);
}
How do I resize or recenter the fancybox according to the dynamically loaded page's height?
All help would be appreciated
Fixed it with:
$.fancybox.update();
I have created an application for Facebook, but I want show all content in a dialog box like Facebook style. How? like this http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg
Your question is not clear. What content do you want to show? What type of dialog? Do you have any code that you can share?
If you just want to wrap some content in a fb-like dialog, then you can use the javascript sdk method FB.Dialog.create, it's not officially documented (as far as I'm aware), but it works.
Here's an example of use:
var fbDialog = null,
html = '<img src="http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg"/>',
params = {
display: "iframe",
content: html,
loader: true,
closeIcon: true,
visible: true,
onClose: function() {
FB.Dialog.remove(fbDialog);
}
}
fbDialog = FB.Dialog.create(params);
I am a new developer and am trying to create a jQTouch application to display some scrollable content throughout multiple pages. I've decided to use iscroll and it only works fine on the home page. I've read that I need to refresh iscroll after each page but I am completely lost on how to do this. Here is my script:
<script type="text/javascript">
var myScroll, myScroll2;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper1');
}, 100);
setTimeout(function () {
myScroll2 = new iScroll('wrapper2');
}, 100);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
In my html I have a div id="wrapper1" which works fine until I navigate to the second page where the div id="wrapper2" has the rubber band effect.
In case you haven't figured this out yet (although I'm sure you have), you want:
myScroll.refresh()
or
myScroll2.refresh()
Ok finally got this working. To get jQTOuch and iScroll to play nice with each other, the scrolling areas on the page need to be reset each time JQTouch makes them disappear. In other words, once you hide the div, iScroll doesn't know what to scroll the next time it's made visible. So as a result, you get the infamous rubberband effect. To solve this, just add an event listener that resets the scrolling area right after the div is called. Make sure you give it 100 to 300ms delay. This code below assumes your variable is called myScroll:
$(".about").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
And on a side note, here's how to establish multiple scrollers using iScroll:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}