I am new for Onsen UI. I want to control individual page orientation like one page work only in portrait mode, one another for landscape mode and one for both. Is this possible with Onsen UI.
If you want to have a one page being displayed in one orientation and another one in the other then it is possible even though I wouldn't recommend it. Usually using media queries to change the styles of the page itself is the preferred method. However if you must do it then you can do:
<ons-if orientation="landscape">
<ons-page>Landscape page</ons-page>
</ons-if>
<ons-if orientation="portrait">
<ons-page>Portrait page</ons-page>
</ons-if>
Here are the docs for ons-if.
If you're using Onsen 1 then you can use ons-if-orientation
Update:
The above code does work, but I guess it's not what you want. It seems like what you want is not to display a page if the orientation matches, but rather to force the orientation based on the page if I understand correctly.
If you want to force a specific orientation then I'm sorry to say that Onsen does not provide that functionality currently. link
Cordova provides some features like this
<preference name="orientation" value="portrait" /> in the config.xml but I think that's for the whole app, not only for a specific page.
It seems that there is a plugin which is supposed to be able to do it on a per-page basis. There are standards about this still in development if I'm not mistaken, but maybe they're not implemented everywhere.
I guess there is something like
<link rel="manifest" href="manifest.json"> which you could put in your HTML, where the json contains {"orientation": "landscape"}, but again I'm not sure that this will work everywhere. Maybe it will work only in Android.
One last thing you could do is something like
#media only screen and (orientation:portrait){
body { transform: rotate(90deg) }
}
however doing a rotation like that is going to probably create more issues and is not recommended.
Probably the manifest.json could be a solution for android or just the cordova plugin otherwise.
Related
I'd like to create a twitter like stream out of a sap.m.list, hence when I get more data with a pulltorefresh control, I'd like to update the list with the additional rows, but should not move the list at all, and be hidden until the user scrolls the list down.
Any standard ways of doing this, or alternatively, custom CSS/JS recommended ways of doing this?
Thanks,
Matt
There's no need to drop down to jQuery here as OpenUI5 already contains the awesome iScroll library.
I've just setup a test app for you to have a look at here: https://github.com/js1972/ui5_pull_to_refresh.
Clone this; check the readme; then just run grunt serve to open the app in your default browser. You can use Chrome dev tools to emulate an iphone or android, etc.
I think this does what you're after - it works just like the GMail mobile app. You pull down to refresh items and at the end of the refresh your still looking at the same items but can now scroll up to see the new ones.
Will be interesting to see the performance if you have a thousand items... iScroll gives you allot of settings to play that may help (which aren't discussed in the UI5 SDK).
One thing to be careful of with browser scrolling is paint times. If the browser is not 100% done painting then iScroll can't calculate all the element dimensions it needs and you get strange results - typically just no scrolling. Sometimes you've just got to give a little time back to the browser by wrapping things in setTimeout(scroll_stuff, 0).
Hope this helps...
While not quite the answer I was after, looked into doing it another way, and provided you can work with automatically generated Id's that you'll need to calculate based on the row number, the following is one brute force way of doing it (I've borrowed it from another SO question and kept the animation for fun - Referenced SO Link):
var pOffset = $("#__item0-App--Main--MyList-76").position().top;
$("#App--Main--myPage-cont").animate({scrollTop: ( pOffset)}, 800);
I'm developing an app that loads a form from another website into an iFrame. The iFrame is set to 100% width and height while displayed. That website has JQTouch.
When I touch an input field in iOS 7 on the iPhone, the keyboard pops up and covers the input fields. It doesn't scroll, resize, or even let me scroll down to see the input field. If I type and then close the keyboard, nothing happens.
I've tried everything I've come across. Adding/removing height=device-height in the meta viewport tag didn't do anything. The thing that came closest to a solution was adding the preference "KeyboardShrinksView = true" in config.xml. That made it scroll (but not enough), and permanently pushes the site up about 20px or so.
I've been working on this for the last couple days with no solution in sight. Is this a bug? Is it the way JQTouch is interacting with PhoneGap Build?
UPDATE: Still no fix, but to test I took the form's page out of the iframe and set it using window.location.href="www.mywebsite.com"; They keyboard works in that situation. This is not a valid solution for me (yet), but may provide info on why it's not working.
UPDATE 2: I'm restructuring the app to use window.location.href, rather than an iframe or html object. This creates some small issues, but these are better than the keyboard not working. If anyone has an answer, I'd still like to see it.
Major Edit: I just realized the InAppBrowser plugin does NOT fix the keyboard bug alone. I did some more research, and this topic helped. I had to add "height=device-height" to every meta viewport tag. "width=device-width" should fix any problems viewing the site in mobile Safari. The final result is this:
<meta name="viewport" content="initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
One of these also had a semicolon thrown in there, so be sure to check and double-check for syntax errors, as they may cause the problem.
If this doesn't work, there is another solution that you might try in place of or in addition to the meta viewport fix. It's several comments down in that topic I linked and involves some changes to the CSS. Changes to this didn't fix anything in my code, but it helped at least one person, so it's worth checking out if you still need a solution.
I tested this fix with iframe and object, and it didn't work--InAppBrowser is still necessary.
/Major Edit.
Here are some workarounds that worked for me:
Use the InAppBrowser plugin. This allows the app to interact with loadstart/loadstop/loaderror events in the loaded page within the InAppBrowser. This is the solution I suggest. However, with iOS 7, you will need to hide the status bar manually, the solution for which is here
OR Load the page using window.location.href = [website url]. If you don't need to worry about interacting with or returning to the app or linking to external sites (both of which I needed), this is the way to go. It's pretty simple, but lacks some of the functionality of the first solution.
OR Get rid of JQTouch. I wasn't able to do this, but much of it is redundant when you're building an app with PhoneGap.
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.
You know in iPhone, The four components of a typical iPhone application are
a title bar,
a navigation list,
a destination page,
and a button bar.
for The Title Bar
The title bar includes the following elements:
Back button:
Screen title:
Command button:
My question comes, although i can use UI framework tool, such as:
Phonegap,
iui,
jtquery
to develop web app, but i can't display the TitleBar effect in Android,
i can't use below code in Android:
meta content="yes" name="apple-mobile-web-app-capable"
Actually, the above can work in Apple Safari Browser, but I can't use Safari to display our Android Project, which is i don't want to see.
Does anyone know how to fulfill this effect in Android, please help me, your help will be great appreciated.
to
"It's unclear if you developing a native android application or a webapp.
– alexanderblom yesterday"
sorry that i forget to mention, i want to develop a iphone-webapp-style application in Android. Since it's too difficult, i want to use iWebkit, but it seems only work in apple iPhone OS or Safari which contain the specific engine to display the beautiful layout, like below:( -_-! i am new so i can't post images here)
(source: appshopper.com)
If I'm not mistaken, if you want to custom in any way the title bar at the top of your screen, you have to do several things :
First, read this thread about titlebar customisation, as it's quite detailled.
Then, you have to add a few more things to it to match your requirements, all in the same xml file which will be your titlebar.xml:
-a button, on which listener you assign the same keyEvent as the normal back key of every android phone.
-a textview for whatever title you want to put in.
-a button for the command button, for whatever it does in Iphone (if you tell me what it does, maybe i'll be able to give more details)
Then, as I take it, you want to have it available on all your pages, without having to request titlebar customization on every activity, I would recommend you to use the same trick as I did : Define a superclass, which all your activities will extend.
then you you requestwindowfeatures in this class, and do all your customization in this one.Finnaly, You just have to call the variable of your titlebar textview in the oncreate of all your subclasses to assign the string you want on each page. If your string is generated dynamically from, lets say a file name you load from the internetv in a background thread, you will need to define a handler to the main thread as you can't update a view from another thread than the one that has created it.
Hopes that helps. If you have any question about that, feel free to ask, i'll keep an eye on your topic, because I had quite a pain to make my titlebar work properly.
good luck
I've got a UIWebView embedded in my iPhone app, and I'd like to keep a locked header and footer DIV on the page at all times, with a scrollable center DIV.
I know that I could do this using a header/footer that are UIView controls, but I want the header and footer to be HTML divs, as a pure HTML/JS/CSS solution will be easier to port to Android/PalmPre/AdobeAir, which is going to be on my todo list relatively soon.
I can do this using techniques like the one mentioned here:
http://defunc.com/blog/?p=94
But this requires that the user use 2 fingers to scroll the div, which is not satisfactory to me...
Any suggestions on how to do this?
Thanks,
Brad
I found someone that implemented a reusable solution for this, with a header and a footer:
http://cubiq.org/iscroll-4
I'm not too familiar with the UIWebView, so this may be a totally silly suggestion. But is there anything stopping you from having three UIWebViews on the page? One for the header, one for the body, and one for the footer. Because breaking it up sounds like the right idea.
Is this what you're looking for? Open this link on your iPhone device or simulator.
The index.html file has three div elements for "header", "container" and "footer" directly under the body, while all the work is done in the fixed.js file. The document is fixed in place by canceling the normal action for the "touchmove" event:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Then, a lot of work goes into creating event listeners for the "touchstart", "touchmove" and "touchend" events which are attached to the "content" div under "container". The logic boils down to simply moving the "content" div up and down.
This solution is 100% HTML/CSS/JavaScript, however there is some WebKit proprietary CSS and JavaScript which may limit portability. It may take a bit of tweaking to work on another mobile device but this would be a good proof-of-concept to start from.
I did not create this awesome sample project, I'm merely bringing it to the community's attention. For more information and a link to the zipped project, read Richard "Doctyper" Herrara's entire post on Fixed positioning in Mobile Safari.
May be clunky, but you could reposition the header and footer over top of the div as the user scrolls. This way your main div doesn't need to be scrollable. No help for anything (still) using frames though.
This is one of the more irritating browser issues with the iPhone/touch, I wish you could just focus on part of the page like a normal browser.
For a CSS only reference the Safari CSS Reference probably has what you are looking for. You'll be especially interested in anything starting with "-webkit" or "-khtml" as those are extended properties only available with WebKit like 3D and touches. Should apply to Android as well.
With JavaScript the Introduction to WebKit DOM Programming Topics and WebKit DOM API Reference are go-to guides. Definately take a look at the light-table demo for some copy and paste javascript on handling your touches as that's how I would solve this.
I have implemented iScroll on iphone and it is really smooth and fast and you can do whatever you want. Disadvantages are that android (1.6) refuses to scroll how I wanted and sometimes block other javascript if there are any.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">
Add those to your html code may solve your problem.