facebook like & send button flyout direction - javascript

How can I set the direction of the facebook "flyout" on the like or send button. We currently float our facebook social plugins on the right side of the page. But, when someone opens the facebook "flyout" it opens right, expanding the page when ideally it would open to the left.
Example: http://compfight.com
I promise, we don't need you to like the site:) Any help would be greatly appreciated.
<div class="side-right">
<fb:like href="http://compfight.com" send="true" layout="button_count" width="150" show_faces="false" action="recommend" font="" class=" fb_edge_widget_with_comment fb_iframe_widget">
</div>
The class side-right has a float:right; and text-align:right attached to it.

Try adding this style to your page:
<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
}
</style>

You can HIDE the flyout if need be, as in Firefox where the flyout can push the content out of position (we had a LIKE button in a jQuery slider in a sidebar, and each LIKE clicked was pushing the sidebar image out of the frame.
Using Andrew's CSS from the post above, I found that a simple display:none did the trick.
<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
display:none;
}
</style>
That precented our content from being forced upwards and out of frame.

No support for this at the moment as everything is within an iframe and out of your app's control.
Subscribe to the official bug to get updates on the issue:
https://developers.facebook.com/bugs/1420124294938118/

You can't customize the location of the fly out window but see my alternative here.
Facebook send button flyout

does not do it automatically?
http://jsfiddle.net/Zf7mY/
example with
.fb-like { float:right; }

I just added fb like to div with overflow:hidden...
Add comment to your like is not so important to destroy your web design, you want that like, comment is just bonus ;-)

Related

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.

Force the user to the top of the page?

This is my website: http://www.ragewarsclan.com
I was having trouble integrating a Forum into my website.
I used object at first then realised that this wouldn't be the best solution, so I switched to iframe and used this code:
<div style="margin: 0 auto; width:100%; height:100%;
overflow: auto;"><iframe src="./smf/" width="100%" height="100%"></iframe></div>
This only seemed to work for chrome as in other browsers the height of the forum would only be something like 250px so I changed from having 100% to 1750px.
However, now, when the user clicks on one of the forum categories, it puts the user near the bottom of the page so I used jquery and used this to try and force the user to the top of the page when a forum category has been clicked:
<script type="text/javascript" src="jQuery-1.4.1-min.js">
$(document).ready(function(){
$(this).scrollTop(0);
});
</script>
Although this hasn't seemed to have worked and I'm not sure why...
Thanks.
you can make your forum categories links and set their href to an element at the top of the page
http://jsfiddle.net/sTr8F/
<div id="top"> top of page. scroll down to find link and click on it </div>
forum category
scrollTop doesn't scroll to the top, it returns the y-offset of the page.
If you need to scroll the page to the top using jQuery (so you can do it also smoothly) you can use animate
$("html, body").animate({scrollTop:0},500); //will be done in 500ms

HTML, JavaScript: Frameless Windows

How to produce frameless window in HTML5, JavaScript, please?
I searched the web and found mostly links to use libraries. I wish to develop my own frameless window from scratch, without using a third party library.
By frameless window I mean a window having no frames, no status bar, no default minimize button, no default close button, no roll bars... It looks like a standalone image with painted close button.
Would be anybody so kind and provide me with ideas or code that will be accepted by most of the browsers?
EXAMPLE:
As few of you asked, what exactly I mean, I found a very nice example at Rapidshare. There is a large blue/orange button in the middle of the screen saying Upload. Just press it, please, and a frameless window appears.
The window represents exactly what I am trying to achieve. I have seen it many times, when displaying enlarged images, or prompting for login information, etc.. I like the animation associated with displaying that window too.
just for quicks to show the concept ..
create two divs directly under body
<div id="backmask"></div>
<div id="contentwindow"></div>
<!-- somewhere else in your page -->
click me
css for these ( roughly )
<style type="text/css">
#backmask {
display:block;
width:100%;
height:100%;
background-color:black;
position:absolute; top:0; left:0;
z-index:1000;
display:none;
opacity:0.7;
filter:alpha(opacity=70);
}
#contentwindow {
display:block;
width:800px;
height:600px;
background-color:white;
position:absolute; top:50px; left:50px;
z-index:1001;
display:none;
}
.bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
</style>
and then ( im using jquery for quicks )
<script type="text/javascript">
$(".showinwindow").click( function(e) {
/* we don't want the visitor to leave, stop the normal action */
e.preventDefault();
/* get what to show */
var contenttoload = $(this).attr.("href");
/* set the body up */
$("body").addClass("bodywithwinOpenClass");
/* show wins and masker */
$("#backmask").css("display","block");
$("#contentwindow").css("display","block");
/* load the content */
$("#contentwindow").load(contenttoload);
});
</script>
this was just typed in directly and not ran, contains no candy ( for positioning etc ) hope it explains the concept behind all the pluggins etc you will find
the reverse is needed to "close" it
no frames
That's your decision to use (i)frames in your document or not
no scroll bars
With CSS you can suppress scroll bars, or build a layout which resizes exactly to the window size
no status bar, no minimize, no close, no roll bars...
That is possible with chrome-feature descriptors when creating a popup with window.open. Yet, you will not be able to create unclosable windows, hiding the close buttons also requires some privileges.
You seem to want a fullscreen application. Have you considered using the new fullscreen API?
http://www.codelifter.com/main/javascript/amazingframelesspopup1.html <-- pretty much covers all you can do - you can't launch a chromeless browser window from a web page.
What are you trying to achieve?
That's easy enough - it's not a window - it's actually a div on the page floating over the rest of the page content - there are plenty of ways to do it with a framework like jQuery.
Tutorial
Essentially all you need is a hidden positioned div with a high z-index and a bit of script to show/hide it:
<div id="popup" style="z-index:1000;display:none;position:absolute;top:100px;left:100px;">Some content</div>
<button onclick="document.getElementById('popup').style.display='block';">Open</button>
<button onclick="document.getElementById('popup').style.display='none';">Close</button>

jQuery Mobile, transparent black overlay effect

I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don't want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.
This effect is similar to the Twitter iOS app, when you are typing in the search bar.
$('#search').ajaxStart(function() {
// what do I put here?
});
Thank you for your help everyone! Much appreciated.
I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don't want the overlay div to always be present (but just hidden), you can add it on the fly instead:
$('#search').ajaxStart(function() {
$('#content').wrap('<div class="overlay" />');
});
(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)
Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar's suggestion), just unwrap it again with this:
$('#content').unwrap();
The rest is CSS.
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
}
Keep in mind... this may not in fact be the right CSS approach, depending on what's already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things... all conspire to make your overlay not cover only the content area. If you run into that trouble, it's a separate SO question though. ;-)
JSFiddle: http://jsfiddle.net/Ff5wV/

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