I would like to add a navigation bar at the top of "some" of my phonegap based ios application pages. I have tried using JQM based headers and they don't seem to be steady enough ( i.e. they scroll when I scroll the content and jump back). I would like to use a native control using a phonegap plugin ( like NativeControls) However I haven't been able to find anything ( as far as I can tell NativeControls used to have navbar control but it got discontinued) Any ideas? suggestions?
One of the options is to use a tool bar control on the top of the page but then it does not really have a way to create a title in the middle and buttons on left and right. Also it has no way of adding the native "back" control either.
I have been researching it for a while but haven't been able to find anything.
Update:
I ended up writing my own Navbar and hooking it to a javascript call through phonegap
Checkout this edited plugin for UINavigationbar
https://groups.google.com/forum/?fromgroups#!topic/phonegap/XVru2zgB_yc
I've had this problem too. Didn't find any plugins for this also.
This is what I did:
I've created a CSS NavBar/TopBar with position:fixed
Used this solution to make it work on iOS 4 too: Fix position:fixed in iOS 4
Related
I am using worklight 6.2 Consumer Edition on WAS Liberty Profile 8.5.5.1 Server. I am using jQuery Mobile 1.4.2 to develop UI. When I install app on iPhone/iPad, status bar of phone is hiding some part of my app's header.
How can I fix this issue (if its an issue)?
This works fine in a default new app with jQuery Mobile that was generated by Worklight Studio. As you can see, the status does not overlap the text.
You can also take a look at the Worklight Starter with jQuery Mobile edition, that also works on iOS w/out the status bar covering the top of app. Compare your CSS.
You need to provide a screen shot of what you're seeing, as well as provide a sample application where you are experiencing it. This issue originates from your code. Provide code.
One possible solution would be to add some margin-top to whichever element is at the top of your applicaiton's HTML.
I am trying to use the iOS smart app banner on my website. I am currently using jquery mobile 1.3.1 for development. The problem I'm having is jquery mobile automatically hides the address bar on page load. Since the smart app banner appears to be a part of the address bar, the user cannot see the smart app banner unless they scroll up. Is there anyway around this problem? Ideally the page would load and show the smart app banner and not the address bar. However, at this point I would be fine showing both on page load. I know the folks over at HTML5 Boilerplate have solved this issue. See:
Hiding address bar without hiding the smart app banner on iOS 6
The problem with this solution for me is turning off the hide address bar feature in jquery mobile. I can't seem to figure out how to accomplish without altering the jquery mobile core code. I don't really want to alter the jquery mobile code. Mainly because I don't like changing code that I have to update when a new version comes out. Plus I am pulling the jquery mobile file from jquery's CDN. I would like to find another way to solve this problem. Any ideas? Thank.
Add
window.oldScroll = window.scrollTo;
window.scrollTo = function(){return false;};
before you load jquery mobile. This will override Jquery mobile hiding. then you can use the helper.js by reassigning scrollTo after jquery mobile script.
I'm building an iOS wrapper application for a web page, which was built using Bootstrap, at the top of my web app is a .navbar div, not fixed or anything and displays perfectly on first load.
The problem starts when I touch an input, type and then hide the keyboard. Once the keyboard has hidden the page has been moved back down, but the navbar is nowhere to be seen.
It turns out this was caused by a bug in the CSS code which gave a margin to the body. The simplest way to fix this was to change the CSS. Although I'm still none-the-wiser as to how control the UIWebView in such situations.
i'm developing a simple three tabs app for Android and iPhone, using IBM Worklight as framework. Every tab links to a div with data-role="page", as jQuery Mobile specifications.
If I implement the jquery fixed persistent tabbar like is explained there (http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html), i'm encountering some flickering on the tab item in page transition (with any transiction effect).
If I set the default transition to "none", I could resolve this problem, but I lost the transiction native-like effect.
This behavior appears only if i test the App with a real android device (Xperia Neo, GS2).
If i navigate trough the pages of http://jquerymobile.com/demos/1.2.0/ with my smartphone, especially here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-d.html i can't see the strange behavior, but the footer won't be persistent trough the pages, it just re-render like the whole content and this is worse (this happen with the stock browser or Dolphin, instead looks very well by using Chrome).
Is there a way to improve this effect or there is another way to implement fixed persistent tab bar?
I used as reference the default Android Contacts App.
Maybe you're getting this flicker because you're navigating between pages using rel="external". Try to pass from one page to the other without ajax and you'll see that flickering will dissapear
The problem is due to poor performance of the WebView of the Android environment in rendering 3d transition.
Solved by removing the transition effect with:
$.mobile.defaultPageTransition = "none";
Something else that could help is putting these attributes in the AndroidManifest.xml:
<supports-screens
android:anyDensity="true"
android:largeScreens="false"
android:normalScreens="true"
android:smallScreens="false"
android:xlargeScreens="false" />
<application
android:debuggable="false"
android:hardwareAccelerated="true"/>
I am using the new BrowserField2 in BlackBerry OS5 to display HTML content in my app. There are 3 options available for navigation through links in that content.
CURSOR navigation uses a block cursor and actually moves through the characters of the page. Not very useful for me.
POINTER navigation uses a mouse like pointer that you move around the screen and hover over elements. This could work but there is a bug however in that the browser field captures navigation and never lets go so this mode is effectively broken if you share a screen with any other managers. Once your focus enters the browser field you cannot move focus back out and into neighboring fields. RIM has acknowledged the bug but has no work around.
NONE which is for custom navigation but they offer no explanation as to how you would do this.
What I ideally want is to simply have trackpad movements move the focus through the links and highlight them. Then a click would activate the link. I assume I would select the NONE option above and implement my own focus navigation but I am not clear how this can be accomplished with the new APIs.
Is anyone familiar with the new browser2 component could give some guidance?
Thanks!
There's a workaroudn to getting back the focus out of the BrowserField using the NAVIGATION_POINTER.
I found it in this thread:
http://supportforums.blackberry.com/t5/Java-Development/BrowserField-2-Navigation-Mode/td-p/632172
"farahh" posted this:
I found out a hack..
with the navigation set to pointer mode, a click outside the browserfield manager invokes Manager.invokeAction(int). I used the getFieldWithFocus to verify which field has focus and then switch the focus to something else.
Cheers.
Nahuel
PD: i havent found out how to get the behaviour you want, i need that as well so if you got it working please let me know, its kinda urgent in my project =(
I actually reverted back to the older browser1 (OS4) component because the navigation problems in browserField2 (OS5) were a deal breaker for me. Luckily the OS4 browser does everything I need in terms of functionality and it has the exact navigation behavior I need and there are no focus problems mixing it with other views.