I'm trying to make a iPad like toobar at the bottom of my webpage, using the free jqTouch framework. Here's an example I was trying to copy off (first random iphone image i googled for).
Now, a previous StackOverflow question sorta answers it .. but i'm not sure how to extended that answer to include
4 or so sections (eg. friends, person logged in (if they are), etc.)..
Keep that toolbar at the bottom, no matter what. The middle content is scrollable. but the header and this footer should always be visible.
Can this be done?
Actually your link won't help you at all because position:fixed isn't supported in Mobile Safari and brokenly supported in Android. You are going to need a plugin like iscroll, and some fixed positioning, it a bunch of work to get it all working together. However fear not, if you are not interested in going through the pain of developing this yourself, people have done the work for you. See the DataZombies fork of jqTouch, and you can see that in the demo he has a working bottom toolbar (with Badges even!)
To include a tab bar in jQTouch, you'll want to download a later version of jQT than r109, the default package from their homepage. Go to its GitHub to grab a later version of source.
Then, take a look at this post:
Fixed header in Jqtouch, and this demo: http://demo.lvengine.net/mobileuplink.
i'm working on my version, to add a fixed tabbar on jQtouch
http://www.itabbar.com
it's working with jQtouch, iScroll and the iTabbar
this work with the latest jQtouch version
Here a online demo (only Safari and Chrome for desktop browser)
Related
Building an ionic app and I noticed that ion-header is always fixed to the top of the page, I cant seem to find a way within the frame work to enable it to scroll with the content so I have now totally removed it from all my pages and just added a header to the in the form of a which has the back button etc
What I am wondering is, if this is the standard way to achieve what I want or is there a better way ? is there any issues i may encounter by removing ion-header etc..
Well the first thing that I must say is that having the header fixed at the top of the page is a standard both on iOS and Android, so that's why Ionic does it - mobile app users expect your app to behave like that just like 99% of the rest of the mobile app do.
Is there any issues I may encounter by removing ion-header etc..
Since Ionic expect the header to be in a specific place within your pages, you may have issues related to:
Page transitions: Like you can see in this answer the iOS page transition won't work properly if the header is not placed where Ionic expects it to be.
"Overscrolling" on iOS: When you are at the top of the page and you still try to scroll a bit to the top on iOS, you'd expect the content of the page to scroll but the header to remain in the same position. If the header is not fixed at the top you'd see a section with a white color background at the top of the page when overscrolling.
iPhone X safe areas: Ionic uses some CSS rules to make sure the header has some extra padding at the top in devices like the iPhone X to handle the top notch that those devices have. If you place the header in a different way, you may need to fix that manually with your own CSS rules.
Status bar overlapping: Also related to the previous item, the header prevents the content to be shown behind the iOS status bar. If you don't have a header, you may need to add some extra padding to your content to avoid this.
If you really need to hide the header in your app, one way to avoid these issues would be to make the header to be hidden when the user scrolls. That way the header would still be where Ionic wants it to be, but it will go away as soon as the user scrolls (this is also a known pattern that some apps do). Please take a look at this amazing post to know how to do something like this:
I also have this issue. I am using Ubuntu and just completed the Hello world tutorial. I wrote some more text and I am unable to scroll. I can see where the words keep going but nothing I have tried lets it scroll. I have not made any HTML/CSS edits. I have only added more text to the <p> tag.
There is some default CSS applied for chrome packaged apps. Putting the following in your CSS should re-enable scrolling:
html {
overflow-y:scroll;
}
Someone is putting together a cool guide which might have some more tips. See https://gist.github.com/maicki/7622137#scrolling
Chrome apps have a default stylesheet applied to them, to help the web "page" be more of an "app" by default.
For Chrome Apps on Mobile, we also include this (well, a nearly identical) default stylesheet.
So that is the reason for that behavior. Scrolling is absolutely useful in very many contexts, and is absolutely supported in any DOM element by adding overflow-y: auto;.
It was simply deemed to be the wrong default for packaged apps which live inside a dedicated window of set bounds and where we encourage not having full page content overflow (very much the opposite of the web). Most apps usually surround a main scrolling element with fixed navigational elements (but not always).
FYI, there is also another open issue for Chrome Apps on Mobile to replicate yet more of the Chrome for Desktop default styles.
Im new to monotouch but want to build an app that is something similar to this.
The 1st image is the home screen you see when you open the app if your logged in.
Pressing each of the buttons or images navigates you to a view like the 2nd image.
How would I build something similar, Im using the latest beta 5.1.1 that I believe contains the monotouch.dialog baked into it.
Would I be able to do something like this with monotouch.dialog?
The first screen looks more like what three20 can do (i.e. I'm not sure how I could do that with MonoTouch.Dialog without a bit of work - but I never tried something like that). There are MonoTouch bindings for Three20 available on github.
The second and third screen are more in line with what MonoTouch.Dialog can do, right out of the box (or it's Sample test app). They are not all standard Element but the library is easy to customize, by inheritance, to get almost anything you want (e.g. down to owner-drawn elements).
There's a lot of questions (with answers) that covers MonoTouch.Dialog. If you hit any problem, to achieve something specific, then you're welcome to ask them here on stackoverflow!
I am currently trying to replicate the functionality of the Sticky application (fourth example under "samples") in my GWT application, specifically NoteView (see the class NoteView in SurfaceView.java in my personal repo or download Google App Engine's SDK, where you'll find it in appengine-java-sdk-1.5.1/demos/sticky).
However, as hard as I try, I just cannot find the place where Google put in the gripper bars on the bottom right hand corner of every note, and where their code allowed the user to resize the note. grepping for "resize" and "resizable" in their sticky dir was not fruitful, and the CSS "resize" functionality was not used either. Also, GWT Textareas are not automatically resizable in the way that these notes in GWT are, and I don't know how to enable this or set it up.
I'm sorry but it really just is a textarea, and your browser does the rest (most browsers make textareas resizable nowadays).
Using Firebug or a similar developer tool, can you tell which differences are there between the Sticky sample and what your code does?
I figured it out -- it was old crud css left over from a gxt implementation. As soon as I removed the css file, the textarea automatically had gripper bars.
I'm an iPhone developer, but new to web development. I've done some basic HTML websites and made one in iWeb as well. I'm trying to branch out to mobile web development now, so I checked out Dashcode.
Anyway, I'm trying to put a Call Button, Mail Button, and Map Button in horizontal alignment. I realize that I can add a Column Layout and have two buttons in a row, but that's the most I've gotten.
Any ideas? Thanks!
Thomas
Edit: I still haven't figured this out yet. I was given advice about a fixed position button bar, but I am not sure how to implement it. I've been looking at code, but haven't gotten it yet. Still trying though. Any help is appreciated!
What i do usually is to select the element you can't align horizontally and then go to the inspector -> dimension tab and in disposition you select fixed absolute.
This should work but beware because if you've the intention to change element's place dynamically you may have some surprise...
I think you are looking for something like this.
A fixed position button bar is created with several buttons side by side.
/Mogens