Disabling or Changing the Color of Tab Highlight Color

You may have noticed that when you tap a link on a web page in Safari on your iPhone that it lightlights the area a light gray. For normal web pages this might be okay. I mean, it's nice to get a visual queue that the page is responding.

But let's suppose that you want to control the highlighting. And you don't like Apple's light gray color. Maybe you want to do some super-cool highlight routine controlled by a Javascript routine, or you want to do things the same way but you want the color to be blue or something. How do you:

• Change the highlight color, or...
• Get rid of Safari automatically highlighting your tab all-together?

-webkit-tap-highlight-color:

I'm a control-freak when it comes to programming so when I saw this I was like really happy! If you use the rgb() function with the fourth parameter, you can set the opacity. Setting it to zero hides the highlighting.

To see Apple's documentation on this CSS tag with examples click here.

Dimensions of the iPhone Display

Here for a handy reference is the dimensions in pixels of the iPhone display.

Original Source

.

If you use the following to scroll the URL Text field off the edge of the display:

.

setTimeout(window.scrollTo(0, 1),100);

.

This would give your web app an extra 60 pixels vertically to work with on the display.

Apple Sanctioned API Coming in February

MacWorld had this post today. This really sounds good! I'm hoping there will be flexibility of say coding in C, and still being about to create web apps that can run off line a-la Google Gears type setup. Can you tell? I think I hear the sound of hundreds software developers drooling and panting. At least we have something to look forward to!

Mobile Safari Changes for 1.1.1

Ok, I've been finding alot of useful stuff that Apple did for iPhone 1.1.1 that will help use developers alot! Instead of listing each change in a seperate post, I decided in this post to give you a bulleted run-down that I captured after going through the online documentation that Apple has. Let's look at the new features:

• For the viewport meta tag there are two new constants available for you to use:
  device-width
  device-height
  for more info on using them go to this page here and this page here.
  
• The next item doesn't explicitly say that its for 1.1.1, but I've never seen it before. Over on Google Groups, one question has come up on how to keep Safari from creating a phone hyperlink on a number that it thinks is a phone number but is not a phone numer! Introducing the meta tag:
  format-detection
  for information on how to use this meta tag, go to this page.
  
• Here's another item not linked explicitly to 1.1.1, linking to a youTube video. Saw some questions in the Google Groups on this. Here is a page that gives you the syntax.
  
• So you have an input form on your web page. And you don't like how mobile Safari either auto-corrects the user's spelling or auto-capitalizes. Or, maybe you want to make sure that one or both of these things happen during text input. iPhone 1.1.1 adds two new attributes you can use on an input tag to address this problem:
  autocorrect
  autocapitalize
  How to use these attributes...
  
• Read some interesting information on one-finger events. What interests me here is the mention of a working onscroll event.
  
• Alright, we know that the onresize event doesn't work properly on the iPhone. Well iPhone 1.1.1 introduces the onorientationchange event to use in your body tag. Why they just didn't make onresize work is beyond me. But at least now we can check this without using setTimeout hacks! More information on this event. Oh yes, here you will find out that they added a new property to the window object: orientation. So, in your event handling routine you can check window.orientation for a value and decide what to do. Cool! Hey it returns the angle in degrees how the user re-oriented their iPhone! Doubly cool!
  
• You might want to check out this list of Supported Events for the iPhone as of 1.1.1.
  
• There is a new debugging console built into Safari for 1.1.1.

Well, that is about it. I know they made some CSS changes too but what precisely I do not know. But hey! All this stuff I've bulleted is very good stuff! All you web app developers for the iPhone / iTouch: enjoy!

CSS Styling Issues

I've been doing a little work on my "super-secret" iPhone project and I noticed that my page layout is more messed up than usual. Me-thinks it has something to do with the 1.1.1 update! Alot of the style sheet stuff I used is copied right out off Joe Hewitt's iUI css file. I guess that might mean that iUI got messed up too. I haven't had a chance to bring up the sample on his site on my iPhone.

Looks like I have some style fixin' to do! Fortunately, though it messes stuff up, it doesn't mess things up enough to make the application useless.

iPhone Development Speculations on arstechnica.com

This article definitely has got my developer mouth watering. I hope that what it's saying is all true. This will rock!

Apple is working on solutions that will help developers get more face time on the iPhone, but there are currently no plans to offer a "true" iPhone SDK that would allow developers to create native apps, a source at Apple has told Ars.

The company is currently planning a handful of updates to Safari and the iPhone that may appease some of the common complaints about developing for the device. For example, Apple is currently jamming on adding offline storage capabilities... to read more click here to read the actual article.

Discovery: Javascript Variables Need Declaring

I've been working on this iPhone App... which had been rolling along nicely.

Then... after adding a few lines of code, it stopped working (what I had gotten done so far anyway).

Narrowed it down to this line:

sCurrPanelCode = sID;

"Weird!" I thought. So I used a try/catch on this line with a message box.

The message returned: "Can't find variable: sID"

I would have assumed if I hadn't declared it it would have created it automatically and returned "NaN".

Nope! Just keep a weather eye out for this one mates!

Exploring the iPhone Safari DOM

You may recall my post about how neat it would be if someone would write a tool to explore the iPhone's DOM sort of like done on BrainJar.com. My idea was to use Ajax to display the information on a regular sized monitor. Nice idea. But new code needs to be written.

All of a sudden I had an epiphany. If I didn't mind looking at the DOM on the iPhone's display, I could just go to the page Mike Hall created on his site and use it on my iPhone!

It worked!

Yes!

• Put the following URL into your iPhone: http://brainjar.com/dhtml/domviewer/demo.html
• Use your fingers to enlarge the page that comes up to a decent size.
• Look on the page for the text: "The DOM Viewer can be used explore this page's document tree."
• The word "document" will be in a slightly different font.
• Tap the word "document" with your finger.
• A new window will open up in the browser showing you the DOM tree!
• Use your fingers to zoom this output to a readable size.
• Go crazy discovering new interesting stuff about iPhone Safari!

Thanks Mike Hall for creating such a useful tool!

Note: you may have to tap links more than once to get them to work.

Some iPhone Development Tools

Here's a list of some development tools for the iPhone that I've stumbled upon. I found this batch on the Juixe TechKnow page talking about the iPhone DevCamp. At this point I have yet to really use all the functionality offered by them. I've just visited their pages and read up on them abit. I've not included everything from this page because I've got links to those other things elsewhere on my blog. I've tried to flesh out some more details for you though.

• iPhoney - This is a free, open-source web simulator one can use for working on an iPhone app on your PC. One little note: I keep debugging turned on in IE and this page gets some javascript errors. Tisk, tisk!
• Ajaxian page covering iPhone development tips. Right now there are some tips on using Javascript to check the orientation of your iPhone and adjust for it, getting rid of the tool bar, using the "viewport" option of the meta tag, and a few other bits. As with many resources out there right now it is a bit sparse.
• David Cann's iPhone Simulator. It's fun to flick the list up and down in this simulated iPhone. I'm not sure (its not clear to me) if this just allows you to play with a virtual iPhone on your PC or if somehow one can use it to debug their own iPhone apps.
• TestiPhone.com - iPhone Simulator. This one really looks attractive to me. Supposedly it works best if you use it with the Safari 3 browser. It also works with IE7 and FireFox 2. You can type in your URL in the simulated URL textbox and press ENTER. And it works. I tried this one out abit. Note the Google page doesn't automatically come up. Hitting the "Refresh" button does not work right. I had some frame issues. But this shows real potential. If they get this working completely, one could try stuff out without needing to install alll sorts of stuff on one's PC. Currently it does not support zooming, though they are working on it.
• Firebug for the iPhone. Joe Hewitt has created this tool for testing Javascript on your iPhone. It appears to allow you to enter javascript into a web site on your regular PC, the site in turn "sends" the javascript to your iPhone, the iPhone then runs the javascript and returns the results. The results are displayed on your nice large computer monitor of your PC instead of the iPhones relatively small screen. The server stuff is written in Python. I don't know Python, but Joe's thoughts have given me some ideas of my own.