Using -webkit-overflow-scrolling in iOS5 (Sticky headers and footers - webkit

in iOS5 (as we all know by now), Apple has introduced -webkit-overflow-scrolling which allows for native scrolling. My question is when applying sticky footer and headers - if you scroll up to the top/bottom part of the page - it will let you "bounce" outside the top header or footer.
Is there anyway to just have the INNER CONTENT bounce or be elastic and not the entire window? I'd like the header and footer to stay at the top not be able to see the grey are behind a "webapp".
Thanks,
Greg

It's currently a known issue with native div scrolling on iOS 5. More information and a partial fix here.
Apple is supposedly aware of the problem and I guess we are waiting on a fix.

I unfortunately haven't been able to find a way to do this while using -webkit-overflow-scrolling (as opposed to handling touchmove events where I'd just use the preventDefault method of the event object).

Related

How to Set Scrollbar theme in XAML webview?

I'm creating a windows 10 xaml app. One of the views contains a webview which fetches some html.
My problem is that although the default theme on the app is set to dark, the scrollbar in the webview is always light, which jars against the rest of the UI.
I've tried setting the RequestedTheme=dark on the webview, but no joy
Unfortunately this isn't possible since the WebView is based off of Edge and Edge doesn't currently support it, as you can see here. If Edge gets this feature, you could simply insert a STYLE into your head element to define the color.

Sencha Touch 2 fixed header

Is there a way to have a fixed non animated header in a sencha app and still retain page animation and browsing history?
I need my header to not animate on a page slide. The way i tried it is:
-main container (v box)
--header container
--card container(card layout)
---card
---card2
---card3
Etc
And I manually switch the cards inside the card container with setActiveItem(index)
The header is never animated in/out but I dont have history now so the only way to have a back button is manually hard coding it with setActiveItwm(prevIndex)
Its an unfortunate and dirty solution maybe somebody else has a better one.
Yes I achieved it using sencha architect to test. From memory I created a base container that had layout vbox. Inside that I had a top tabpanel and under that a tabpanel. I then set the flex on the top panel to 0.2 and the tabpanel to 0.8. That way my header will always be 20% height on any device. I hope this helps.
You require Ext.navigation.View
Use Ext.navigation.View and create basic navigation between views...then hide the navigation view you can do that by making the navigationBar property as hidden:true
Next have a common navigation header as you have mentioned above...
Going forward using a button lets say would be by using
button.up('navigationview').push({xtype: 'card2'});
This button will be somewhere in your card which takes you to next card
Similarly for going back on button click
button.up('navigationview').pop();
button.up('navigationview').pop(2);//Will take you two views back and so on
These buttons will be on your common header

UIWebView: how to hide part of the content of a webpage?

In my app I have a webview that is used solely for displaying the facebook page.
However, the client does not want the top blue bar of facebook to appear; he wants to hide it.
Is there a way to do this?
The bar is 45 pixels, so what I did is I moved the UIWebView in IB in such a way that its top 45 pixels are behind my navigation bar (thus not appearing).
However, this is not an ideal solution, as the user can see that content when he scrolls up, before bouncing. He can see but not touch it, which will be frustrating for some users.
I tried turning the bouncing off, but then the UI becomes too rigid, and not fluid.
I looked up in Google and Stackoverflow for a couple of hours but didn`t find a solution.
Thanks a lot!
You'll have to edit the HTML/CSS of the page itself to hide the HTML elements in question, probably using regular expressions, and feed it into your UIWebView with loadHTMLString:baseURL:.
I've done similar manipulating before and it works, but... it's a different ballgame when the webpages in question don't belong to you. Any time Facebook updates their layout, your app behavior might change until you have time to get an app update approved. Clients want what they want, but make sure your client knows what he's asking for!
First test out the javascript code used to hide whatever elements in the webpage and then pass up to stringByEvaluatingJavaScriptFromString of UIWebView to run it.

How to create a Controller to simulate the Springboard feature of the iPhone within your own application

I am trying to design a feature in my application for the iPhone that simulates the Springboard feature (Main menu of the iPhone that allows you to view more apps), or the way Weather application works that allows you to flip between views.
Does anyone have any samples of this how I would go about doing this. It's seems very trivial but I am wondering if I am missing something that is already available either as an Apple example or someone who did a tutorial on this.
The image below show how the user would use it.
alt text http://www.agilitesoftware.com/SpringboardExample.png
As they slide their finger to the right (or left) the other image would begin to show up. And it would animate smoothly. The faster you swiped your finger the faster it would move to the next view.
Update: The other feature is that it should mimic the same feel when you slide your hand across the display that is snaps to the current view into place. It should not keep sliding across if there is more than 1 view to the direction you swiping your finger.
I've seen other applications use this so that is why I am asking.
This is accomplished using the UIScrollView with the pagingEnabled property set to true. Just add each of your views, adjust the contentSize, and it will automatically "page" to the width of the screen across the content.
There is a sample app (with code) with exactly this functionality on the iPhone developer site on Apple.com (I believe it's called "PageControl".) - I'd suggest checking it out.
d.
I'm writing an app that uses a similar UI. As NilObject recommended, we're using a UIScrollView with pagingEnabled=YES.
You may also be interested in this example code involving just two child views. I'm trying it out now; it's an interesting technique but I've had to write some additional special-casing code for some odd situations that resulted.
There's also another question on this site that asks about creating a grid of icons like the home screen.
I would check out Joe Hewitt's code from the Three20 project for this. It provides a nice interface and further refinement of the UIScrollView implemented as TTScrollView and TTScrollViewDelegate, TTScrollViewDataSource.

Animating Tab Bar page switching

I'm quite confused with the whole animation stuff in iPhone SDK. I tried to study throught the SDK documentation, this website or tried googling it out without success.
I'm unable to get my scenario work.
I have single XIB file, with tab bar and a 4 tabs.
In a special event i want to switch from one page to another "in code", so I call eg: [tabController selectedIndex: 0].
I need this transition to be animated. Is there a way?
If user switches tabs manually, no animated transitions are needed
Also I have one subquestion:
In one of the tabs I have a UITableView with set of items. When user clicks any of these items, another set of items are beign shown (sort of hierarchy browser)
I tried to animate this transition using -deleteRowsAtIndexPaths:withRowAnimation: and -insertRowsAtIndexPaths:withRowAnimation:, but without luck.
Desired transition is shifting the old items set to the left side and the new items from the right side.
This is first time of my iPhone development, when I got lost even with all the forums and documentation. :)
Thanks in advance to anyone trying to help me!
As for your first question: Yes you can.
Try this link for some answer:
transition on tab bar sample code.
In short words: you should add a delegate object to handle the tab bar switching by setting the tabBarController.delegate = self.
Yet, what this forum post won't tell you is that you need to "import" some framework to do it.
First - right-click on the framework folder on the left hand list in Xcode and add an existing framework named: "QuartzCore.framework".
Than - add these lines to your tab bar holder (on .h file):
#import <QuartzCore/CAAnimation.h>
#import <QuartzCore/CAMediaTimingFunction.h>
As for your second question, try to replace the datasource (array or what ever) or create login function on the cell to replace its content.
Enjoy!
First Question: No, you can't animate tab switching. Please read Apple's Human Interface Guidelines on this. Tabs are meant to switch instantly. An animated transition would break the "tab" paradigm.
Second Question: When you tap on a row, the user does not expect other rows to disappear and new ones to appear. Instead, this sounds like a case for a UINavigationController. Please refer to Apple's sample code, specifically the UICatalog for sample code on how to implement this.