disqus comment box overlap with tumblr page - tumblr

I successfully performed a manual installation of disqus comments on my tumblr.
However, when I click on an individual post and scroll down the page, the disqus comment box shows up before the end of my post, so there is an overlap of text with the comment box.
Here is an example of this happening on a page of my blog: http://katmanduu.tumblr.com/post/108878690808/memories
I am new to this so would appreciate any help to fix it. Perhaps something went wrong with the manual disqus install. I pretty much followed the exact instructions and copied/pasted how to install it from here: https://help.disqus.com/customer/portal/articles/758168-tumblr-manual-installation-instructions
Any thoughts or advice would be appreciated. Thank you!

Yes in your css you have a height set on the post container of 500px, so the discuss stuff is appearing beneath 500px.
If you change this property in the css it should fix the issue. Just remove the height property from:
#layer {
height: 500px;
}
I've tested it in the browser and it appears to fix it in Chrome.

Related

I want Fancybox to jump to anchor on close

I am trying to get Fancybox to close and jump to a specific section anchor when when link is clicked within the fancybox ajax content. I have been trying several variations on this:
<a onclick="$.fancybox.close(); href="pricing">See pricing</a>
But every time I click the link it returns to the section anchor where it was initiated. Am I missing something really obvious here?
I Found the answer supplied by Avinash at how to prevent scrolling of page behind fancybox-2
I would thank him in comments but don't have enough points yet. If he reads this - Thanks :)

Karma Wordpress template: Facebook icon for comments overlaps the default icon

If your look at this screenshot: http://cl.ly/image/1J3m2e2x1G1z, you'll notice that the facebook iframe element overwrites the Karma comment bubble. Could anybody help me with either removing the bubble alltogether of with removing the facebook element?
thanks
This can probably be fixed pretty easily with css. If you have a link to the site I can take a look at it and tell you what you need to add to your stylesheet. Also, t.thielemans is right, it would be best set up a child theme (Not nearly as complicated as it sounds) which would prevent the changes from going away if you update your theme.

Facebook hide content from non-fans in a unique way

I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)

Facebook XFBML like button will not resize width - using Joomla and K2

I just installed the Facebook Like button XFBML plugin on my blog site, which uses K2 and Joomla (I copied the code directly from facebook developers.) The problem is that the plugin is too wide - it's the default 450px wide. Even when I enter 400px, and redo it, it stays 450 px wide. I can't seem to get it to resize for some reason. This is a big problem, because the right side of the comment box is hidden (I have a column on the ride hand side that covers it.) So, you can't push the "post" button. I've searched google and your database, but I can't find any posts about a similar problem. And I'm not sure where to go for help. Here is a link to an article on my site so you can see what I mean:
http://www.artdotlife.com/art/studio-blog/entertaining-baby/item/148-if-snow-white-and-the-seven-dwarfs-were-released-today-it-would-incite-mobs-of-angry-mothers-little-people-and-screenwriters-here%E2%80%99s-why
Thanks!
Ok, your using Joomla, no problem. When I look at the code all I see is . Using Firebug I can see that the comments plugin is runnin at 550px.
When you edit this module do you turn the editor off? I would try that and make sure you add the width variable to the comments tag as it's not showing up.
Comments also requires an href tag to work properly if I'm not mistaken. Not the issue with the width but just a heads up.

Right align Facebook like button

I am able to put a Facebook like button on my website, but how do I make it to be right-aligned within the div/iframe it is in?
I tried applying various CSS properties, but I could not get anything to move in the iframe.
I think this link could help too:
http://shades-of-orange.com/post/2011/01/09/Embed-Facebook-Like-Button-e28093-Right-Align-with-css-and-Settings.aspx
It says to set the width to "0". Then the box will be autoresize by Facebook and you can apply a float right to that box.
iframe is an inline element, you can use
text-align: right
for a div that contains that iframe, or float the iframe to the right, but just make sure to clear the float afterwards.
sample: http://jsfiddle.net/Mujj6/3/
and: http://jsfiddle.net/Mujj6/5/
Seems as though there are many ways to achieve this that work in different situations.
None of the above seemed to make any difference to the position of my 'like' button, however a little trial and error with a "margin-left" tag and I got it in the right place.
Thanks for everyone's input. The position relative trick doesn't always do it for me:
div.around-fb-like{
position:relative;
float:right;
}
So far this has been more dependable:
#fb-root{
position:absolute;
left:-1000%;
}
What is described in Embed Facebook Like button – Right align with CSS and settings works. However, in my website, I had to change the style to
position:relative; right:-130px;
the 'like' social plug-in seems to have changed styles within the iframe. what's the best way to prevent the 'like' from flowing right, on the following page?
[http://www.biographile.com/the-righteousness-and-ruin-of-science-on-this-week-in-history/16573/][1]
With DIV it's easy:
.fb-like{ vertical-align:top;}
posted also on SimpleMediaCode.info ( http://e-art.lv/x/fbas )