How do I create an App-like header with html/css? - iphone

I'm building an app with Phonegap/Cordova and Web standards, such as HTML and CSS. However, somewhere on the part of creating this, my skills aren't sufficient.
Ok, let's get this straight: I'm trying to create a navigation bar at the top of the screen. Very basic, even without buttons, just plain text with links.
Check-out this screenshot. As you might see or not.. The middle one isn't exactly placed in the middle. I've tried with div styles, span classes and tables seem the best option.. Yet still insufficient.
What's the best option to create such header?
p.s. No, of course there won't be a border in the table :D - Just for viewing. ^^

I did an example of something like this for a talk... here's a basic version with just a header and some scrollable content: http://jsbin.com/UWeQeli/1/edit
Hope it helps.

Related

Is there a way to add extra margin space to a page in PDFKit/PDFView?

This is perhaps a more general question as I'm looking for ideas on how to approach a problem working with PDFView/PDFKit. I have a small sample application that allows you to display a page, select a range of text and then associate a comment with that text. Once the comment is saved the comment is displayed on the PDFView page in the margin via an overridden draw() function for PDFView.
Problem is that with very small margins the comments can be very squished. I've been looking for a straight-forward solution and would very much appreciate ideas on how to address it.
The obvious (ie, easy) solution is to change the actual "page size" in the PDFView and have wider margins, but of course PDFKit has no support for that (I don't think). Another thought was to go to a custom PDFView library but the only ones I found when I last looked were iOS (not Cocoa) based.
Last idea was to instead of drawing directly on the page have some sort of pop-up window (like a sticky-note) contain the note but then it would need to be moved dynamically with the scrolling of the page. And of course one other was to recreate the PDF dynamically for viewing and make all the pages larger... but I've not dug into how much of a performance hit / effort that would entail.
Maybe there's a simple/obvious solution that I've missed?
I created a simple sample app in gitHub which shows the basic functionality for people to play with if that's of help. https://github.com/jcnolan/PDFMarginTextView

Tips of making a list in email

I am designing an email template. I have a running list of brand names hyperlinked to their websites. I would like it to be displayed inline for full-width, and stacked for narrow screens. I had separators in the past like a bullet or a vertical rule such as this: "|". But in mobile it's awkward considering only one name appears per line.
The next thing I tried was to enclose each list item in a border, but Outlook10/13 aren't handling the padding and margin as you know. I want a simple solution that I can show to novices when they populate the template. Any ideas? I'm adding screenshots of what I tried with the borders. But any other idea is welcome.
Thanks!!!
Full Width:
Mobile:
I have tried a lot of ways myself and one thing i found out was having logos in place of links often work better. I know images have to be downloaded but once they are downloaded it looks good. If you do go with images, you can style the alt tags to look like above when its not loaded.

Flip from one ViewController to another iBooks Style

I'm trying to load in content from a database and allow the user to flip through it like pages, then at the end of the content, give them options to go to another section of content (probably with buttons). The content is currently just formatted with html, but how do I implement the buttons to navigate? I'm a little new to Xcode so maybe I'm not even looking in the right direction.
refer a this opensource: https://github.com/devindoty/iBooks-Flip-Animation
this is very little code and perfectly works.

How to rebuild the email-app (specificly the mail-overview)?

I want to reabuild the email-app one to one for a private-message system.
I am working at the moment on the email-overview-screen.
Now I have a ViewController for this with a UITableView and a UINavigationBar on it.
2 simple questions:
How do I get more then one line in the cell, specificly 2-4
different font-types (bold / not bold / blue) exactly rebuilded as
seen in the link above?
How do I can add a PullDown-Refresh functionality? (You know, this
pull down, oh refrash, thing, emails have)
Use a custom cell, you can put in whatever information and links and styles as you want. You can even use UIWebViews as the cells, which could make styling and links easier.
Many examples of this have a look at the answers to this SO question.

Left-aligned tabs in GWT

I have a project in which I need a way to display essentially a list of tabs, each with their own content pages, down the left side of the page. I'm using TabLayoutPanels elsewhere to good effect, but after looking at how they are constructed it seems like it would be quite a bit of work to undo Google's carefully constructed layout and get it to work in any other orientation than top-aligned.
This doesn't seem like it would be an uncommon layout, so does anyone know of a successful implementation of this kind of container?
Best you can do is use DeckPanel, and make your custom tab controls to switch visible widget in that DeckPanel.