My Monkey Do

A Log of Coding Solutions

iPhone

What keyboard does an HTML input bring up?

by

I was having trouble figuring out what input type brings up what keyboard on the iPhone and iPad.  Turns out the number type doesn’t bring up the numeric pad.  Only “tel” does.

This is a great article on what input type brings up what keyboard:

https://about.zoosk.com/ko/engineering-blog/mobile-web-design-use-html5-to-trigger-the-appropriate-keyboard-for-form-inputs/

When your input is surrounded by a form tag, the keyboard will show a blue “Go” button.  Otherwise it will show a regular return button.

http://stackoverflow.com/questions/22986347/go-vs-return-button-in-ios-keyboard-for-html-input-forms

CSS iOS div lines disappear on zoom in

by

Problem

In iOS devices sometimes safari can display an annoying line above and below div elements.  Like so:

Unwanted div lines

 

Solution

The solution is quite hacky and hopefully this is a bug in Safari and it gets fixed soon.  The solution is to put a negative 1px margin on the sides you see the lines.  So if you see the lines above a certain div, set the top margin to -1px.

Thanks to this blog for the solution.

 

iPhone Viewport and position absolute

by

Problem

I have a div with id “stripe” that is using absolute positioning to be at the top of the page and span 100% of the page width.  It overlays the top part of the website.  The rest of my page is 1000px wide.  When viewing on the iPhone, the “stripe” div is only a portion of the screen width.  Why?

 

Solution

If you debug the website for the iPhone, you’ll see that the width of the “stripe” dive is only 320px.  Sound familiar?  That’s because the width of the iPhone is 320px and so 100% of the viewport is 320px according to the iphone.  There are many possible solutions for this.  One solution is to make the “stripe” div’s position relative.  The relative allows the 100% width expand the entire 1000px .  Then in the following div set the margin-top to negative of whatever the “stripe” div’s height is.

Debugging Websites for iPhone

by

Problem

I created a website that looked great in IE7+, FF, Chrome, and Safari, but on the iPhone a few things looked off.  Problems could be from the viewport being 480px wide but the website is 1000px wide so using percentages can mess it up… that’s another post sorry.  The problem is, how do I use something like firebug to debug the css and html in the iPhone mobile Safari browser?

 

Solution


The best solution is if you have a Mac OS X and the iOS 5 SDK.  If you don’t have a Mac or  you don’t have iOS5 SDK and don’t want to download it from the Mac App Store, move on to the next solution.  This solution involves a great FREE tool to debug, profile, and inspect  web applications running in the iPhone simulator is iWebInspector by Max Firtman.   This tool, as it says in the tool, enables a private API available on the iOS 5 framework.  It lets you inspect the web page or webapp  similar to firefox.  To use it:

  1. Download, install, and open  iWebInspector
  2. Click on the “Open iOS Simulator” button
  3. In the Simulator, open Safari and go to the URL you wish to debug.
  4. In iWebInspector click on the “Load from Safari” button.
  5. Click on the link it displays
  6. Now you should see the DOM and all it’s CSS attributes.

One thing annoying is that you can’t add CSS attributes to existing CSS classes.  A way around this is to add attributes to the element.style section for the element you want to alter.  Another thing I noticed is that the Simulator freezes from time to time.  To “unfreeze” it I had to quit both the simulator and iWebInspector and start over.  Other that it’s great!

 


A second option to debug a website in the iPhone is by using Firebug Lite.  Here’s what you do:

  1. Open this page in your iPhone browser and bookmark it.
  2. Rename the bookmark to “Firebug”.
  3. Tap the code below twice and choose “Select All” and then “Copy”. 
    javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
  4. Edit the Firebug bookmark.  Remove the URL and paste the copied code into the bookmark.
  5. Save it.
  6. Go to the page you want to debug
  7. Once the page loads, select the bookmark named “Firebug” and it will run firebug on the page.

I prefer the first solution over this one because obviously, Firebug is very small on the iPhone.

 

keywords: iphone safari on desktop, iphone firebug
sources:
http://www.iwebinspector.com/
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

New iOS 5 Apps

by

Find My Friends

This is an app I wanted to do for a while, but never got around to actually doing it.  The app lets you find your friends on a map.  You can request to temporarily or permanently follow a friend.  Once your friend accepts, you can see where they are.  A benefit of this for me is if someone is coming to pick me up or we are both at a large crowded event, we can spot each other.  In my one day of using this however, the location of my friend and sometimes myself is not very accurate.  In a matter of minutes, my friend jumped from one house to another to an onramp.  Find My Friends is available in the App Store for the iOS 5.

One feature I would like to see in this app is an alert function.  So if a friend were coming to pick me up, I could set an alarm to trigger when my friend is within a certain area.

 

Cards

This is a pretty cool app where you can create you own cards with a personal message and a photo.  Once you enter your apple id you can pay $2.99 in the US which includes the postage and the card will be physically sent.  Cards is available in the App Store for the iOS 5.