Introduction: Javascript Bookmarks, for Iphones/Ipod Touches

Picture of Javascript Bookmarks, for Iphones/Ipod Touches

Do you ever want to look something up on Wikipedia, but don't feel like waiting for the Wikipedia web page to load, then typing in your query? Or how about when you want to define a word (in Google) but don't feel like typing the entire string with that ungodly small keyboard?

Here is my solution, bookmarks with Javascript as the URL that do the dirty work for you. Read on.

Step 1: Add a Bookmark

Picture of Add a Bookmark

This step is simple. Just add a bookmark.

-Open up Safari.
-It doesn't matter what page you are at.
-On the bottom of the screen there is a "+" sign, click it.
-A dialog box will pop up, select Add Bookmark.
-It will allow you to change the name, for this instructable we will use "Wikipedia Search"
-Then click Save (Top left corner of screen).

You have now created the bookmark that we will be editing.

Step 2: Edit Your Bookmark

Picture of Edit Your Bookmark

Make sure you are on the 'normal' Safari page, so you are simply viewing a webpage.
Click on the book on the bottom of the screen to open up your bookmarks.
Click Edit, then on the bookmark you just made (Wikipedia Searcher.)

You'll then want to clear everything in the URL box, which is the textfield directly underneath the name of the bookmark.

This part is tedious, but is the backbone of this entire Instructable. Enter EXACTLY this into the URL box (I'll explain it in the next step):

javascript:%20var%20x=prompt(%22Search%20Wikipedia:%22);%20window.location=%22http://en.wikipedia.org/wiki/%22+x;

Phew, that was tough wasn't it. Especially on that tiny keyboard!

Step 3: Explanatory Page

Picture of Explanatory Page

Let's disect that javascript shall we?

javascript:%20var%20x=prompt(%22Search%20Wikipedia:%22);%20window.location=%22http://en.wikipedia.org/wiki/%22+x;

First of all, 'javascript:'
This simply tells the browser what's going on.

Secondly, the %20 and %22. These happen to be the codes for a space and ", respectively. URLs don't support spaces (and neither does the Itouch keyboard when inserting them) so these are necessary.

var%20%20x=prompt(... basically means var x=prompt(
This sets the variable x (CASE SENSITIVE) to whatever you happen to enter into the prompt box.

The prompt box code has two parts, the first is what will be displayed (Like "Search Wikipedia") and the second is what will already be entered in the prompt box (in this case I have nothing ("")).

We then end that particular piece of code with a semicolon and start another.

window.location= navigates to the URL in quotes after the equals sign, in this case, "http://en.wikipedia.org/wiki/"+x

The x simply goes at the end of the URL, which Safari navigates to, SIMPLE!

To use it, just click on the bookmark!

Step 4: Troubleshooting

There are a couple reasons why this might not work for you:

First, the variable is case sensitive, you MUST keep it the same. X and x are completely different while coding in Javascript.

You MUST insert the %20 and %22's. Failure to do so will result in catastrophic meltdown.

You MUST insert "http://" before the URL, otherwise it'll just add whatever you tell it to navigate to after the URL it's already at.

And you MUST put in the semicolons to sanction off the different parts of code.

Step 5: Extras/Conclusion

I also made one for defining words with Google.
Basically, it navigates to "Define " plus the word you put in the prompt box. I love it, and here it is:

javascript:%20var%20x=prompt(%Define:%22);%20window.location=%22http://www.google.com/%23/search?source=gp&q=define%20%22+x;

You can make these for any website you want, as long as it puts whatever you search for in URL.

I hope this Instructable enlightened some minds, and if you have any questions (or if there is a typing error in the javascript) feel free to comment and let me know!

Comments

mbresciani (author)2009-08-04

Great Instructable!

The second example has a typo in it, It should read:
javascript:%20var%20x=prompt(%22Define:%22);%20window.location=%22http://www.google.com/%23/search?source=gp&q=define%20%22+x;

Mr Criver (author)2009-05-13

Cool instructable. Since I use MobileMe I can sync my bookmarks with my desktop PC. That way you can easily enter the desired line when you edit the bookmark. However, the second example (the Google one) doesn't seem to work, even though I literally copied and pasted the line you wrote down in this instructable. What do I do wrong?

Kaldosh (author)2008-09-10

you can take screenshots on an iphone which makes a better picture than photographic the screen. hold the home button, then tap the lock button, then release both. the screen will flash to confirm.

Jackhole (author)2008-07-30

I realized that if you turn the Iphone sideways, you get a larger keyboard with a space, as well as {}. You can just subsitute those. And sorry if this is a bit hard to read! I'll make my next one more readable.

About This Instructable

3,398views

10favorites

License:

More by Jackhole:Javascript Bookmarks, for Iphones/Ipod TouchesBatch Wikipedia Searcher
Add instructable to: