Facebook link creating whitespace in page - javascript

I'm using Facebook's own script, and have implemented that on my site.
The problem is that it makes a whitespace of about 35px * the page height at the right side of the site. I cannot find it anywhere in firebug, and have isolated the script to be the cause.
How can I use it, or change it so I don't get that whitespace? really annoying to get a horizontal scroll because of this!
if I set a width to the fb:like that is over 400px(the div size) the whitespace disappears but the button is placed wrong
Script:
<script src="http://connect.facebook.net/en_US/all.js#appId=222642751115062&xfbml=1"></script><fb:like href="<My Page Name>" send="true" width="350" show_faces="true" font=""></fb:like>
Screenshot:
http://imageshack.us/photo/my-images/59/problemx.png/
CURRENT SOLUTION
Put the background-image on body tag to get it to make the whitespace be the same color as background, then removing scrollbars like this:
html
{
overflow-x: hidden ! important;
overflow-y: auto ! important;
}

I think the with of the like button is simply to wide. Try setting it to a lower value (width="150"):
<script src="http://connect.facebook.net/en_US/all.js#appId=222642751115062&xfbml=1"></script><fb:like href="<My Page Name>" send="true" width="150" show_faces="true" font=""></fb:like>

Related

Scroll PDF using JavaScript

I found a similar question Scroll PDF embedded in HTML but didn't see an answer. Does anyone have any suggestions for how to manipulate a PDF displayed within an iframe? Similar to the previous post link, I'm trying to scroll the PDF when the iframe doesn't have the focus (the host page does).
Thanks!
Actually there is an answer in the link You provided:
Hardly.
What you might be able to do is to put the iframe into a div with
overflow: auto, and give the iframe a very large height value so the
containing PDF is at full size. Make the surrounding div less tall
than the iframe. When your buttons get clicked, scroll the surrounding
div.
I haven't tested it so there may be some snag on the way, but this
could work - and is probably the best you can do.
~Pekka 웃
It's pretty easy. That's how you do it:
It depends on whether the iframe is "out-source", not from your server.
Let's just say that it is out-source
CODE
<div id="iframeContainer" style="width: 800px; height: 600px; overflow: auto;">
<iframe width="1800" height="6000" src="yourPDFfileSRC" scrolling="no">
</iframe>
//You have to know exact width and height of PDF file
</div>
 
<script type="text/javascript">
$("document").ready(function()
{
$("#iframeContainer").scrollTop(1400);
});
</script>
BONUS
You could animate it like that:
<script type="text/javascript">
$("document").ready(function()
{
$("#iframeContainer").animate({scrollTop: 1400}, 500); //500 - time of animation
});
</script>

Google plus button creating horizontal scrollbar

I had no problems adding a Facebook/Twitter sharing buttons but right now Google+ is driving me crazy, WHEREVER i put this code on my page (using Bootstrap grid), i get a 2-3 pixels on the right creating an horizontal scrollbar:
<div class="g-plus" data-action="share" data-align="left" data-annotation="none"></div>
Plus Script code at the bottom of my page:
<script src="https://apis.google.com/js/platform.js" async defer>{lang: 'fr'}</script>
Any idea how to fix it? I've tried to put my div in another div with fixed width and stuff like that but no effect, the script is replacing the div and forcing all css regardless my attempts ... i have no idea what is replacing the original div and how to work on it.
I'm a bit lost here, help welcome, thanks.
I had a similar problem and this worked for me:
iframe[id^="oauth2relay"]{
display: none!important;
}
Taken from this tutorial: https://www.youtube.com/watch?v=4vYfnZ_XB8M
Try inspect the button and find out which element has the scrollbar and add this CSS on it.
overflow: visible;
this solved my problem
iframe[id^="oauth2relay"] { position: fixed !important; }
G+ button adds an iframe.

Footer will not position itself at the bottom of page

I have this footer that will not stick to the bottom of the page.
I think the issue is with my HTML and body not spanning the entire site but I just cannot find the exact place to correct this. I know its a big no-no to link to my page but I simply don't know what code to post here.
I cannot set the content to static instead of absolute because then my menu items will start pushing the content divs around when they open.
To fixed position into bottom you can try this code
Html:
<div class="tofix">
<p>Fixed this div into bottom</p>
</div>
Css:
.tofix{
width:300px;
position:fixed;
bottom:0;
}
The problem occurs because of your #content. You just try to change its position as following:
#content{
position : static;
}
Or you just simply remove it because the position is set as static by default.
Remove the position:absolute from your #content.
Also It worked when I first opened the link, please don't change the live code while asking the question.

Scrollbars on overflow div do not appear when content is added to div using Javascript

I have an HTML Document that looks a bit like this, only is far more complex and harder to control:
<body>
<div id="title">This div does not do anything, just stays at the top.</div>
<div id="container">
<div id="navigation">Some navigation</div>
<div id="content">Most of the content</div>
</div>
</body>
Then I have a stylesheet that includes the following:
#container
{
height: auto !important;
overflow: visible !important;
overflow-x: auto;
overflow-y: scroll;
position: relative;
width: auto !important;
}
This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.
The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.
It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.
I know IE8 has some issues with overflow-y.
You should try with this maybe.
-ms-overflow-y: scroll;
Hope that helps.
Hard to say if this will work without seeing more code, but why not remove the styles from your css and add them with javascript, once the content has loaded.
The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:
document.all['container'].style.height = document.documentElement.clientHeight+"px";
Of course, this doesn't entirely circumvent the problem- for that we need a new function:
function resizeResults()
{
var resultPanel=document.all["container"];
var topPanel=document.all["title"];
var newHeight= document.documentElement.clientHeight;
newHeight -= topPanel.clientHeight;
resultPanel.style.height=newHeight;
}
Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don't lose the scrollbar or have it otherwise messed around when the user changes the window size.
Just remove the styles you have given for the element to make it scroll before loading ajax content to it.After loading ajax content then add those attributes again.

Changing The Size of Twitter's Follow Button?

I'm looking at the new Twitter Follow Button (https://twitter.com/about/resources/followbutton), but unfortunately my sidebar is smaller than the default size, thus throwing my whole site out of whack.
Is there an easy way to hack the script to resize the button, or at least to put a line break between the actual follow button and the account name?
If you look at the page source, then your twitter code converts from
<div class="twitter">
<!-- twitter code here -->
</div>
to
<div class="twitter">
<iframe ...>...</iframe>
</div>
Now it's easy to change the width of the button via css:
.twitter iframe {
width: 80px !important;
}
I'd wrap the button in a container with a nice class name and use CSS to adjust the styling.
.twitter-button-container{
width: 100px;
height:100px;
}
Something like that.
UPDATE
On second thought, it seems that the image is a background image to the anchor tag. I don't think it's possible to resize background images using CSS etc. You'd need to have the image in an img tag.

Categories