Facebook Like button - prevent XFBML version from resizing height - javascript

I'm trying to use the XFBML version of the Facebook Like button. On a page with zero likes, the main problem is the order of events when the page loads:
HTML loads
Like button loads
Button expands height, pushing content below it down
Button sees it has no likes
Button reduces height, moving content below back up
This happens regardless of how the Javascript SDK is loaded (standard or asynchronous) and if "show faces" are enabled/disabled.
Is there a way to prevent this distracting automatic resizing from happening?
Here's a test page showing the behavior.

I have been frustrated by this many times over. I finally cooked up a hack in jQuery. It works in Chrome, FF and Safari. Sorry I am not near an IE computer.. but the concept should remain.
HTML
<div style="display:block;float:left;width:450px;min-height:35px;">
<div id="like" style="display:none;float:left;width:450px;height:35px;overflow:hidden;">
<fb:like href="" show_faces="true" width="450" font=""></fb:like>
</div>
</div>
jQuery
$('#like').delay(500).fadeIn(500,function(){ $(this).css({'height':"inherit",'overflow':"inherit"}); });
Explanation
First, create a div with a min-height of 35px, then create a child div with an id of like, display of none, height of 35px and overflow of hidden.
With jQuery, reference the like div and delay a fade in. Upon completion of that fade in, reset the css attributes (height and overflow) to inherit.
In theory this allows the like button do it's little freak out behind the scenes and then gracefully brining it into the page.
Hope this helps, and or Facebook just fixes this.

You could "double-store" the likes and Facebook user ids on your side (using FB.Event.subscribe('edge.create', function(response) { ... });) and then check if your logged-in Facebook user has friends who liked your page.
That may be overly complex, though.

Related

One-page scroll plugin: don't want content to slide

I want to change my website to one-page scrollable. I'm trying to achieve something like this. When a user "scrolls" the content changes. I thought I could do that with the one-page scroll plugin, but wasn't successful.
Further explanation:
I want menu and few other elements to be "fixed" (visual explanation).
I want to just change the content, not slide it up or down as the plugin does.
To sum up, I want to trigger animations (block revealing effect etc.) when a user scrolls. I was thinking about making a website one-page scrollable and when a user scrolls, just redirect it to a new folder with HTML/CSS/JS files (menu stays the same, content changes). Maybe that would be one possible solution to my problem?
Anyone willing to share the solution with me?
First things first. The site you're referencing isn't using any scroll events. Open the site in Chrome and open developer tools. Then set the view to mobile (or tablet, same thing). If you're in mobile mode in Chrome, your mouse acts like a finger would on a real Smartphone. By that logic your 'swiping' over the screen with your mouse should trigger the scroll event, but it doesn't. Therefor, it isn't actual scrolling that is triggering the fancy animations.
I believe Fleur Moreau used an 'mousewheel' event listener to trigger the animations.
var link = document.querySelector('body');
link.addEventListener('mousewheel', function (event) {
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
}, false);
or if you're using jquery
$('body').on('mousewheel',function(event){
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
});
Good luck with your project

Text Disappears after page scroll and toggle

I saw a good website template and started making a website. The link is: https://html5up.net/lens. In the process, I observed a typical UI bug, where in if a user scrolls down the page and clicks on "X" of the image (to see fullscreen image),toggles back, scrolls to the top of the page, the content which was visible before disappears though it still appears in the DOM.
I saw the js function written for the toggle, it's straightforward and works fine until we don't scroll on the web page. Please see bug screenshot.Screenshot of the bug
This is a known, ongoing issue with Chrome and CSS visibility. You can 'fix' this by updating the CSS of the affected children, ie. changing classes or simply setting the visibility of the child element manually. I believe this to be because Chrome automatically prevents the rendering of the divs because at the time they are called to be shown, they are off screen and not viewable.

Sliding page transitions with new content pre-loaded underneath

I am working on a project where the client wants a way of transitioning between content that basically works like page turning on an e-reader app. When you click on a link to go forward, the current content slides to the left and new content is revealed as it slides. If you click on a link to go backwards, the content slides in from the left and is superimposed. (If you're jumping to a page further off it's fine for the page to reload.)
There needs to be a distinct URL for each content block, and ideally this should work all the way down to IE7. Assume there are at least 50 pages, each with at least 2-300 words.
I know there are lots of jQuery page transition options, but most of the ones that I've looked at slide in the new content while the old content is sliding off or fades in the new content after the old content is gone (think slide.js). What I need is basically curtain.js that is vertical, triggered by a link instead of scrolling, and doesn't need to load in all of the content on the page at once.
Here's one way I've come up with possibly building this:
Current content is loaded in from the database (or whatever)
Content for the previous and next pages are also loaded in and stored in hidden divs
When a link is clicked, the current page slides off (or the previous page slides in)
The content that's no longer needed is deleted
New content is "preloaded" with AJAX and hidden
Local URL also changes with AJAX
Here's a crude diagram
That seems really inelegant, though. Is what I've outlined above possible to do? What would be a better way of doing this?
I am okay with JS/jQuery and PHP, learning AJAX.
I'd suggest jQuery UI tabs
No need to deal with AJAX. Just get the server to spit out the 50 pages of texts once and that's a wrap.
It's pretty straightforward to hook into the API, which gives you more control over the entire procedure. Enough control to hook up a function that updates the address bar when you tab through.

Use facebook as (alternate user account) causing like button to disappear

I noticed today that if I am logged in to facebook, and have selected one of my alternate business profiles (under the *, use facebook as) then it tries to put my original profile picture and a red box that says "switch" up on my pages that have the like button included using the javascript sdk, in place of the normal like button.
Here is an example of a page on which this happens: http://www.infolists.com/Arts/Painting/000000000128.php
Because I only leave enough space for the like button, it completely blows up my page layout. So that everything in that layer falls behind the layer for the next line.
Unfortunately, you have to be logged in to facebook AND using it as an alternate profile (such as a business or fan page) to see the issue. Which I admit is rare and the reason I never noticed it before.
But there has got to be a workaround for this. I've tried searching but couldn't find anyone else with the same problem.
Any help would be appreciated.
As far as I am aware, fan pages can only like objects within Facebook. The like button on websites are meant for personal profiles only.
Your only option to maintain the same layout would be to fix the div container of the like iFrame to a fixed height. The overflow hidden should also help (already set).

Window like facebook chat

The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.

Categories

Resources