Facebook like button not rendering in div with display:none - facebook

I am well aware that there are almost 10 duplicates of this question. But solutions of none of them work for me. So here are the details:
I am using carousel from bootstrap. I use carousel to display set of 3 divs on each cycle.
The structure is as follows:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="item"> <!-- this div has display:none -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Above is the stripped down version, just to leave out the unnecessary stuff. The problem is, all the Facebook like buttons inside the div which has display:none set have width and height set to 0.
This problem occurs in Firefox(the latest version).
I am using the HTML5 version of like button generated using FB like button configurator.
Below is the resultant like button code in the hidden div:
<div data-show-faces="true" data-width="450" layout="box_count" data-send="false" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered">
<span style="height: 0px; width: 0px;">
<iframe scrolling="no" style=" height: 0px; width: 0px; class="fb_ltr fb_iframe_widget_lift" src="">
</iframe>
</span>
</div>
The like buttons in the active divs are the only ones visible. Even those in the modals (which are hidden initially) are not visible too.
How do I make it visible when div has display:none?

I had the exact same issue you are having and my code solution is below. The key thing to note is that anytime you see the facebook generated code having a height and width of 0 it means that the facebook button is loaded while the CSS on it is display:none. You can't just force it to be displayed because it is possible that the facebook button hasn't fully loaded by the time the bootstrap carousel has loaded. The trick is to display all your items in the carousel using active on the initial load then once your facebook buttons have loaded you can remove active from your non-starting slide.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="active item"> <!-- this div also is active for initial load -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
window.fbAsyncInit = function () {
FB.Event.subscribe('xfbml.render', function () {
$('.carousel-inner>.item:not(:first-child)').removeClass('active');
});}

If you set a div to display:none; by default all of the child objects will have display:none which means they wont show up. Same if you set the size to zero.
IMHO it's not the right way to do it, but try setting the child object to display: block; or display: inline; and giving it a defined size.

Put iframe version of Like button in any hidden content and it will work.
worked for me like a charm

I had similar issue but only in IE. I saw that iframe width and height stayed 0. This solved my problem:
.fb-like.fb_iframe_widget iframe{
width:60px !important;
height:60px !important;
}

Related

Text overlay when loading the page

I have added a paragraph in the slider.
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
The paragraph is display on top of the image.The slider works fine after finishing loading the whole page. However, when the page is loading, I can see all of the paragraph for each slide show in the same time. I only want it shows the first slide paragraph when loading. Can anyone please help?
You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning.
<div u="slides" ...>
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
<div style="display: none;">
...
<div>
</div>
Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without waiting for page load.

jssor slider add external link to the thumbnail

I am using the jssor templete for my slider and I have modified the setting so that I can have a slider image change when the mouse hover on the thumbnail. But I do not know how to add an external link to the thumbnail image so that I can go to the another page associated with that picture
I have try the following method from http://quabr.com/28478806/jssor-external-links-on-thumbnails but it is not worked
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Thank you for your help!
I guess it worked already.
But there is an extra enclosing '<div>' in following code,
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Please remove it by replacing
<div u="caption" t="L">My Title</div>
</div>
with
<div u="caption" t="L">My Title</div>
Also, please set 'height: 100%' for 'a' element to make the clickable area bigger.
<a href="http://mylink.com" target="_blank" style="height: 100%;">
And finally, please check out the thumbnail navigator skin html code, because it is fully customizable, and it can be very complicated. Please make sure your link element is not covered by any other element.

Semantic UI Modal Dragging

I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.
I found on the official Semantic-UI documentations, there is the setting "detachable" for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?
Here's the code thus far:
var aFunction = function()
{
$('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
$("#aBtn").on("click", function(){
$('.modal').modal('show');
});
}
$(document).ready( aFunction );
<div class="ui basic large modal">
<i class="close icon"></i>
<div class="header">
Archive Old Messages
</div>
<div class="content">
<div class="image">
<i class="archive icon"></i>
</div>
<div class="description">
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui red basic inverted button">
<i class="remove icon"></i>
No
</div>
<div class="ui green basic inverted button">
<i class="checkmark icon"></i>
Yes
</div>
</div>
</div>
</div>
Semantic UI does not support draggable modals at the moment like JQuery UI does.
Default value of Detachable option is already true, which means that if you open a new modal the previous one will be moved to the background (= dimmer) and is not usable anymore (visualised with darker color).

Change Photoset Max Width to 340px?

Having some issues trying to get my photoset width to 340px without messing up the way the smaller photos in the photoset display. http://d.pr/icuf
{block:Photoset}
{block:IndexPage}
<div class="photo_set">
<div class="header">
<h1>photoset</h1>
{block:NoteCount}<a href="{Permalink}">
<div class="note">{NoteCountWithLabel}</div></a>
{/block:NoteCount}
<div class="clear"></div>
</div>
<div class="view">
<a href="{Permalink}">
<div class="link">View Photoset ↦</div></a>
</div>
{Photoset-250}
</div>{/block:IndexPage}
{block:PermalinkPage}
<div class="perma_width">{Photoset-500}</div>
{/block:PermalinkPage}
{/block:Photoset}
You won't be able to get a 340px width using Tumblr's default code. You have two options:
1) Don't use Tumblr's {Photoset} tags and display each photo individually with {block:Photos}...{/block:Photos} and style them as you want.
2) Use a plugin like this: https://github.com/PixelUnion/Extended-Tumblr-Photoset (full disclosure, it's something that I wrote)

Multiple Full Screen Backgrounds on the same page with hashes - CSS or maybe Jquery

I made a website that has a jquery slider with left and right arrows that move to the next slide (webpage). All of the content is contained in one webpage and uses hashes.
http://www.ilandeistudio.com
It needed to have different full screen backgrounds for each page (hash) so I used a CSS technique that puts full screen backgrounds in DIVs which I found here (CSS Technique 1)
http://css-tricks.com/perfect-full-page-background-image/
This works but the height of the image is running off the bottom of the screen and therefore adding vertical scrollbars and you can't see the whole background image. I don't mind distorting the backgrounds a little (they are all w1024px x h682px) I just want the whole image in the viewable area.
I haven't been able to get it to work with CSS, let me know if someone has a suggestion otherwise maybe someone could recommend a jquery solution; but I don't know how to make most of those jquery examples work inside the DIVs for the multiple hashes.
Here is the CSS I am using now:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
And here are examples of two of the slides
<div id="home" class="slide">
<img src="images/bg_home1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header">
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
</div>
<div class="content">
test content
</div>
<!--Content ends-->
</div>
</div>
</div>
<div id="about" class="slide">
<img src="images/bg_about1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<!--Header starts-->
<div class="header">
<!--Navigation starts-->
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
<!--Navigation ends-->
</div>
<!--Content starts-->
<div class="content">
test content 02
</div>
<!--Content ends-->
</div>
</div>
</div>
The code itself looks correct. One thing that you didn't include but I would make sure of is that the header and navigation you have listed are positioned absolutely on the page rather than floating left and using margins to position things. That will add space to the 100% of the page.
So the image itself is expanding to the height of the page and the heights of header and navigation are being added on top of that. Most likely that is the problem if you seem to scrolling the height of those objects.