Specifying different CSS for landscape and portrait orientations on the iPad

I have a web app that uses jQuery UI buttons. I noticed that on my iPad the buttons worked fine in portrait orientation, but in landscape orientation the buttons, and even regular links in a table, would not work properly when pressed (a different button or link than the one pressed would fire). I determined that this problem was caused by the following tag in my HTML:

<meta name='viewport' content='width=device-width' />

Using this tag causes Safari Mobile (the iPad browser) to zoom in on the page a bit in landscape orientation, making the fonts a bit bigger, which would be fine except that it apparently breaks link and button functionality in some cases. I got the buttons and links to work properly by using this tag instead:

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

This locks down the page so it doesn't (and can't) zoom in or out.

That fixed my broken buttons and links in landscape orientation, but I had really liked the way the fonts got bigger in landscape orientation. It gave me a way to have two different zoom levels in may app. If I wanted to see more content in a small font I used portrait; if I wanted to see less content in a bigger font I used landscape.

So, I figured out how to get the exact same effect using CSS "media queries." Here is some CSS that first sets styles for the iPad regardless of orientation and then specifies different styles for portrait and landscape orientation:

@media only screen and (max-device-width: 1024px)
{/* This block specifies CSS that only applies to an iPad
max-device-width: 1024px seems to only select the iPad*/

body
{margin-left: 0px;
margin-top: 0px;}

}

@media only screen and (max-device-width: 1024px) and (orientation: portrait)
{/* This block provides CSS that only applies to the iPad in portrait orientation */

body
{font-size: 16px;}

}

@media only screen and (max-device-width: 1024px) and (orientation: landscape)
{/* This CSS kicks in only when an iPad is in landscape mode. It makes the font bigger, the table rows taller, etc */

body
{font-size: 18px;}

}

You can put this block of CSS at the end of the regular stylesheet for a page and it will apply different CSS when the page is viewed on the iPad, allowing you to have a completely different layout on the iPad than you have on a regular browser. What is remarkable to me is how smoothly the styles change when I switch orientation on the iPad; I was afraid there would be lag while the page reformatted but I can't detect any.

How to avoid typing the full path of a file in Mac OS X

Occasionally in Mac OS X I want to write the full path of a file in a Bash script or something. To avoid typing out the full path (and possibly making errors) just:

• Go to the file in Finder.
• Hit Cmd-I to bring up the Get Info window for the file.
• Block and copy the path from "General > Where:" section of the Get Info box into your text file.
• Block and copy the file name from the Get Info box.

Workaround for jQuery .live() event handler not working on Mobile Safari, iPad, iPod Touch, iPhone

I have a web app where I use the jQuery .live() method to attach a click event handler to a table td element (to convert it into a input field when the user clicks the table cell and then post the input using ajax.)  Everything worked properly on all the mainstream browsers (Firefox, Safari, Chrome) but nothing happened when I tapped the table cell when viewing the app on my iPad.  Some Googling led me to this blog post:

jQuery’s live click handler on mobile Safari

This guy discovered that the .live() click event will fire on Mobile Safari (i.e. iPad, iPod Touch, iPhone) when it is attached to certain elements (like an anchor tag), but for some other elements it will only fire if you add onclick="" to the element tag.

I added onclick="" to my td tag for my table cell and voila, tapping on the table cell works now to convert it to an input field like it should.

The lineage model for hierarchal data in a SQL database

Recently I decided to make a web app to keep track of a number of policies.  There were a number of different policies, all of which had their provisions numbered and organized in an outline hierarchy that often went three or more layers deep.

The first thing I researched was how to structure SQL databases to handle hierarchical data like a product catalog with the products grouped into categories and subcategories. Or a org chart where employees are grouped into divisions and departments. I quickly learned that most people used either the adjacency list model or the nested set model,  both of which are described in detail in an article on the MySQL website: Managing Hierarchical Data in MySQL.  Another detailed article on both models is Storing Hierarchical Data in a Database.

With the adjacency list model you have a table which gives each record a unique ID number, and then you have a "Parent ID" field where you record the ID number of the record's parent in the hierarchy tree.  If you were doing foods, you would have a record for "apples" and the parent ID for that record would be "fruits."  Then when you need to generate an output of the whole hierarchy tree you do SQL that organizes all the records by connecting the various parent ID values.  Some articles I found on this approach include Tree Drawing with the Adjacency List Model  and Hierarchical SQL.  The thing I didn't like about the adjacency list model was that the SQL required to generate a simple display of the data seemed unduly complicated (lots of recursion) and likely to consume a lot of database server processing power.

I never did really grasp the nested set model, so I won't try and explain it. Needless to say it also involved very complicated SQL that seemed likely to put a big drain on a server.

Then I found an article about a variation on the adjacency list model: More Trees and Hierarchies in SQL.  The author's basic idea was to include a Lineage field in each record where you record the ID numbers of the full path to the record in the hierarchy with each ID number separated by a delimiter character.  For example, if you had a product tree with the iPod in it, the Parent ID field would be "MP3 Players" and the Lineage field would be "Electronics/Audio Equipment/MP3 Players."  This makes the SQL to output the basic tree much easier: you just do a simple SELECT and ORDER BY the Lineage field and you are done.

So here is the structure I ended up with using the lineage field model.  For a hierarchy like this:

• Plants
• Fruits
• Apples
• Bananas
• Peaches
• Vegetables
• Broccoli
• Asparagus
• Animals
• Poultry
• Chicken
• Turkey
• Meat
• Beef
• Pork

The table structure would be like this (except you would use ID numbers instead of the full name of each item as the ID):

Node	Lineage
Plants	/
Animals	/
Fruit	/Plants/
Vegetables	/Plants/
Poultry	/Animals/
Meat	/Animals/
Apples	/Plants/Fruits/
Bananas	/Plants/Fruits/
Peaches	/Plants/Fruits/
Chicken	/Animals/Poultry/
Turkey	/Animals/Poultry/
Beef	/Animals/Meat/
Pork	/Animals/Meat/
Broccoli	/Plants/Vegetables/
Asparagus	/Plants/Vegetables/

Once you put your hierarchical data into a structure like this then working with it is easy-peasy. Want to display the whole tree?

SELECT * FROM table_Foods ORDER BY concat(Lineage, Node)

This will output the data organized by groups and subgroups. Want to see just the items in the group Plants, organized by subgroups?

SELECT * FROM Foods WHERE concat( Lineage, Node ) LIKE '/Plants%' ORDER BY concat( Lineage, Node )

This will return just the Plants, grouped by Fruits and then by Vegetables.

Want to indent each item in your output based on its depth in the hierarchy? In your PHP code just count the number of slashes in the Lineage field using substr_count() for each record and set the indent accordingly.

I know this approach seems too simple but I have been working with it for a while in a web application and I haven't run into any dead ends yet, and figuring out the SQL for various tasks has been very easy.