How to implement the half page scroll functionality - facebook

On Mouse scroll event in Facebook, How some portion of page is not scrolling, while other part going down?

You can do that in the CSS file, just by adding position:fixed; to the class you want to fix. http://www.w3schools.com/Css/css_positioning.asp

Related

Ionic - block vertical scroll when don't need

I have an app in ionic and in pages when I don't have scroll the page allows me like scroll anything... Don't show scroll, is like pull to refresh. I don't know how to explain that. Page is like elastic...
And I don't use pull to refresh, I check if I have any margin or padding but not. Maybe it's just a property...
For example in iphone messages app if we scroll top to bottom we see some margin in top like if the page were elastic..
Thank you

Can I use Ionic's ion-nav-view without the arrows at top and bottom of my app?

I have an application which contains generated code for ion-nav-view. When I remove the code, the entire app disappears. I want to get rid of the arrows generated by ion-nav-view. Is there a way to do this without throwing away the entire app? I just want a view without the extra nav buttons.
The answer is that a button bar child element which was an href styled as a button, i.e.
<a href="/page1" class="button">
was being parsed and displayed into the topmost and bottom most region as part of the ion-nav-bar. The solution, in my case was to remove the anchor styled as a button in another part of the app, and the phantom objects at top of page and bottom of page go away.
I'm not sure what that magic logic was supposed to achieve, but I'm not a fan.

Stop AddThis buttons from sliding into place

I am using the AddThis Sharing Sidebar.
Every time a page loads, the sidebar slides into position from the center of the screen.
How can I stop this sliding animation?
I just want the Sharing Sidebar on the side of my page, without any sliding animation.
Did you try removing the css classes addthis-animated and/or slideInLeft from the div tag with id at4-share ?

Hide address bar on iPhone

I've seen plenty of scripts on the web about hiding the address bar by scrolling down to hide it etc. But I noticed that Apple actually hide it completely as in make it disappear!
http://help.apple.com/iphone/5/interface/ on your iPhone you will see the bar removed...
How do I do this? Thanks
They're doing event.preventDefault() on the touchstart event and handling scrolling in their own code.
They're not removing it. It's behaving in the same way as every other webpage does in Mobile Safari. The difference appears to be in the way they're displaying the page itself. If you tap on the Status Bar while looking at that webpage the navigation bar appears for you.
I switched my useragent on Safari to Mobile Safari and it looks like they're not actually scrolling the page when you swipe, but have a div setup with overflow:hidden; and you're scrolling inside that div instead of the page itself.
(Edit: This appears to be in addition to hiding the bar by scrolling down the page)
To hide the address bar, use jQuery and execute the following on document load:
jQuery(function($) {
$('html,body').scrollTop(0)
};
The address bar will disappear and will reappear only if the user touches the screen to make it reappear.

Facebook Send flyout clipping issues

I have a problem with the flyout generated by the Facebook Send button. After clicking the "Send" button the flyout is generated and displayed behind some elements. Obscuring the buttons in the flyout.
I read that this is because of a parent element with the overflow:hidden style. However, I cannot remove this attribute since it will mess up the rest of my sites layout.
I tried to dynamically remove the overflow:hidden attribute upon clicking the Send button (Accepting the layout mess if someone actually uses the send button). Using the following code:
FB.Event.subscribe("message.send", function(response) { //Remove the
overflow:hidden styling here });
Unfortunately this event only fires upon actually sending the flyout form, which is too late as need to take action as soon as the button is pressed that shows the flyout.
Could anyone tell me how to bind an onclick event to the "Send" button or how to reposition the flyout completely. Or perhaps there is an alternate solution I have not yet considered.
Thanks in advance
Fixed position might work for some, but for most it will mess up your layout.
What worked for me is to take off any overflow: auto higher up in your CSS.
I did that and it works great!