As of today my social commenting plugin is getting cut off.
In my tab page settings I chose fluid for height.
I have my main div with height:100%
Then i have a script that I used to auto resize the page and show all the comments if you clicked show more. This was working fine yesterday.
<script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
Here is a link to my tab page:
http://hostfb.com/files/2598/af1d87a797314ed16ec3db8b3f094c45f30f8cf3/
https://www.facebook.com/dewafelbakkers?sk=app_246342282051389
I need my page to extend to show ten comments and then extend more to show more comments if clicked.
Remove the fixed height of 500 on the div that wraps the plugin control (right about fb-root div).
Related
I'm trying to use FancyBox for a gallery of 36 images, but whenever I click on the image to trigger FancyBox, the thumbnail helper does 2 really odd things:
1) loads an extra thumbnail of the image I clicked at the END of the gallery thumbnails
2) the thumbnail helper does not go to clicked image's corresponding thumbnail. instead, it goes to the new thumbnail of that image I made at the end of the gallery.
here is a link to what I have so far: http://lalalichan.com/temp/process_test6.html
At the bottom, you'll see the thumbnails that trigger the images into a display area. the images that appear in that display area are links that then trigger FancyBox.
everything else is working like it's supposed to; i can navigate between my images, i can close out of FancyBox, and when I click on the thumbnail that I want the correct corresponding image appears.
it's just this nuisance that's making an otherwise smooth functionality go to heck.
any kind of help would be appreciated, thanks so much in advance!
Fancybox will generate a thumbnail for each link with the class bound to it so if you have this script
$('.fancybox').fancybox({});
and 6 links with the same class as the selector bound to fancybox like
<a class="fancybox" href="{target}" .... etc
then fancybox will generate 6 thumbnails ... so far so good.
What is happening in your case, when you load your (demo) page, there are 6 (hidden) links with class="fancybox". Also there is an empty container (id="content") where you display your bigger thumbnails
<div style="width: 820px; height: 546px;" id="content"></div>
but when you click on any of the (non-fancybox) thumbnails at the bottom of your page, the container with id="content" is populated with a 7th link with class="fancybox", duplicating one of your original links, depending on which thumbnail you clicked ... so 7 thumbnails will be generated in fancybox after this action.
Since this link is appended at the end of the pile, it will be placed at the end of the gallery too.
Your are using another plugin (thumbnailScroller), which I believe is adding the extra element to the DOM.
EDIT : New questions asked:
I still don't fully understand how clicking on the scrolling thumbnails would populate the #content div with a seventh link. How could I stop it from doing that while still retaining all the functionality of the scroller?
Your code needs a bit of tweaks: first, you are duplicating your fancybox custom script ... you just need it once. Second, you just need to load either jquery.fancybox.js or jquery.fancybox.pack.js but not both.
Regarding the functionality you ask, what I would do is:
1: Move the hidden links from the DIV id="load" to DIV id="content"
2: change the css to
#content a {
position:absolute;
visibility: hidden;
}
3: change this script
$(function(){
$('.image').live('click',function(){
var href = $(this).attr('href');
if ($('#content').is(':visible')) {
$('#content').css('visibility','hidden');
}
$('#content').load('#load #'+href,function(){
$('#content').css('visibility','visible').hide().fadeIn('3000');
});
});
return true;
})
into this
$(function(){
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
}); // bind
}); // each
return false;
});
assuming that the thumbnails are in the same order as the links inside the DIV with id="content".
I haven't tested the code but it's pretty much what would do the trick
EDIT 2: code improved Some changes to the css and js
New css:
#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}
new js: displays the first big thumbnail on page load
$(function(){
$("#content a").eq(0).show();
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").hide().eq(i).fadeIn('3000');
}); // bind
}); // each
return false;
});
BTW, I wouldn't add inline styles (using the style attribute), I would use style sheets instead.
I have included the facebook like plugin
I have added below the title of my article.
The like button is displayed well and is working but...
When we click like a popup appears so that the user can post some comment.
That popup is distorted and the content is overflowed and the publish and close buttons for that popup are away from the layout.
Here is a screen shot...
I have added a border to the div which contains the facebook plugin html code.
Here is the live url where you can see the problem.
I was checking in firefox 9
In that popup i cannot see the publish and close buttons.
here is the live url
http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm
sample code
<div class="fblike" style="border:1px solid red;">
<fb:like href="http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm" send="false" show_faces="false" layout="button_count"></fb:like>
</div>
also you can view source.
Remove this CSS from your style in your head section of your page and it will popup fine.
/* for facebook width 100% */
iframe.fb_ltr { width:100% !important; }
Situation: I have a page with an iframe, which contains a form. But the iframe is longer than a screen page and the user has to scroll down to submit it. But it loads just the contents of the iframe, so it'll be scrolled by the same amount before submitting the page. I want to be at the top of the page. But since the user scrolled the facebook page and not the iframe, I cannot use scrollTo (not allowed for cross domain iframes).
Question: Is it possible submit the form to facebook to reload the entire page and still gives me access to the form data?
Not completely sure if this is what you're asking, but if it's an iframe app you can use FB.Canvas.scrollTo to control the main Facebook page position. You can either call it selectively or you can put code like this in the <head> section of every page:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type='text/javascript'>
window.onload=function() { FB.Canvas.scrollTo(0,0); }
</script>
That way every time you load a new page in your iframe, the main page will return to the top.
I created a custom facebook landing page using the same template I have used 3 times before. The problem is, this time, ther vertical scrollbar won't go away. This is the resizing code I have been using:
<script type="text/javascript">// <![CDATA[
window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 1200});}
function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 1200});}
// ]]></script>
and at the bottom of the page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// ]]></script>
My CSS uses body {overflow: hidden;}, inside my app "auto resize" is selected. The issue is not that the ifarme won't resize (it does), it's that I have an empty vertical scrollbar on the right that won't go away.
Since the iframe design uses the whole 520px width, the empty vertical srollbar gives me the dreaded horizontal scrollbar. Judging by the width of the horizontal scrollbar, it's the vertical scrollbar causing it and not anything (that I can find or see) in the HTML/CSS making the page wider than 520px. The problem happens in IE8, IE7 and Firefox.
You can see the page here.
I have tried a few variations of the javascript code from a few different sources, but no luck. Not sure if this is something small I'm missing or if it's yet another facebook bug. This problem is not present on any of my other facebook iframe landing pages. After searching around for an answer and coming up with nothing, I've hit a wall with this one.
Its this code
html {
overflow-Y: scroll;
}
in your style.css style sheet thats causing the problem. When I inspect it with Chrome and remove that value, the scroll bars disappear.
I have this Facebook application profile page:
http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.
Well, I did a few things to get it to work.
(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.
(2) I loaded the Facebook connect API (see code below).
(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId : 'your app id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setAutoResize( 100 );
</script>
... the rest of the page body goes here ...
<script type="text/javascript">
FB.Canvas.setAutoResize( 100 );
</script>
</body>