More Ramblings from a Los Angeles Programmer

November 17, 2007

iPhone Native Look and Feel Wikipedia

Filed under: coding, daily life, iphone, technology — Tags: , , , , — Josh DeWald @ 4:28 pm

As I mentioned before, I used the “schools edition” of Wikipedia and stored it on my iPod Touch (will work on the iPhone as well) for some hot off-line Wikipedia action. What quickly became apparent is that the set of subject index pages that come with it are actually kind of hard to navigate (small text, etc). I figured that somebody had made some set of style sheets that made web apps look like native iPhone apps, and of course someone did.

So what I did was make a basic perl script would crawl through the subject index pages (looking for “categoryname” div tags) and generate an html file that had the same look and feel. Currently all of the index goes into a single page, which gets you the “wipe” effect, but it could just as easily be put into different files. I had to modify the javascript slightly to allow it to link into the actual content pages (the default javascript assumes that all the links are internal to the file… either that or I just couldn’t figure it out). Basically, if an “a” tag has a class of “external” then it’s… external.

So if you grab iphonenav.js from the link above, and modify the click eventListener like so:

addEventListener(“click”, function(event)
{

var link = event.target;

if (link.className.indexOf(“external”) == -1){
event.preventDefault();

while (link && link.localName.toLowerCase() != “a”)
link = link.parentNode;

if (link && link.hash)
{
var page = document.getElementById(link.hash.substr(1));
showPage(page);
}
}
}, true);

You can download the perl script from my site. Just run it against “wikipedia/wp/index/subject.html”. Save the script with a .pl extension. My host seems to be trying to interpret the script, even if I have the extension be “.pl.txt”.

You can see what the end result looks like here. By the way… you should be able to just take that html file and drop it next to the main index page for the Wikipedia schools edition.

As usual with this type of thing, I’m sure people will look at the script and think “what are you doing!?” But it seems to do the job.

Advertisements

4 Comments »

  1. music for your iphone http://www.seeqpod.net/iphone

    Comment by iphone fan — November 18, 2007 @ 9:03 pm

  2. Josh,

    Very cool. I just thought of your project w/ Wikipedia while watching the video on Amazon’s new Kindle eReader. All networking goes over EVDO, and it has free Wikipedia access (everything else is paid). Kind of interesting different approach to the Hitchhiker’s Guide idea. It has the same network issues you mentioned wanting to get away from w/ your iPhone, but its nice to see so many different ways of getting access to lots of information while away from the computer.

    Comment by Stuart — November 19, 2007 @ 9:27 pm

  3. Hi, thanks for your blog post, I actually opted for the opposite approach, I.e. I’ve added a “internal” class for all the links that are on the same page, that way any links in my content do not need the “external” class attribute to be added to them and as there are a lot of embedded links that get squirted out of our CMS, it would be a nightmare 🙂

    Thanks again,
    Chris

    Comment by Chris Houston — April 8, 2009 @ 5:57 pm

  4. Excellent weblog right here! Also your web site a lot
    up fast! What web host are you the use of? Can
    I am getting your affiliate link to your host? I want my web site loaded up as quickly as yours
    lol

    Comment by Deloras — June 2, 2013 @ 1:41 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: