Archive for the ‘Code’ Category

Scroll Down the Page!

I often read blogs that can be pages long. The most recent comment is often at the very bottom of the page. On a Mac or PC, it’s easy to scoll up or down a page using various methods. It is a little more work on a mobile device such as a tablet or phone. While jumping to the top is easy enough (just tap the top center of the screen), there is no built in feature to jump to the bottom of a page.

Well, with a little JavaScript saved as an bookmark it is easy.
Bring up a page, any page, and then bookmark it saving the bookmark name as “Scroll Down”. Now, go back and edit it. Make sure you saved the name as Scroll Down and then put the following JavaScript in the address.
javascript:window.scrollTo%280%2Cdocument.body.scrollHeight%29%3b%0a
Go ahead and save the changes. Now, when you want to scroll to the bottom of the page, just select the Scroll Down book mark and the page will quickly scroll to the bottom!
Waaa laa! Easy!

Snoopy – View source code on iOS device

Snoopy is a bookmarklet by Mark Perkins, a freelance web developer living in Brighton, England. It is for viewing the source code on web pages. He built it for use on mobile browsers (such as Mobile Safari on the iPad) where you can’t view source or “look under the hood” as he says.


Snoopy screen shot
Snoopy has three tabs. Overview, View Source and View Generated Source.

Using the bookmarklet will give you an overlay featuring information that Snoopy can ‘sniff’ out of the page, such as the doctype, what JS libraries are used in the page, what analytics, what font embedding technique is used, etc. It also gives you the ability to view the raw and/or generated source of the page.

The Snoopy bookmarklet code in action (click to try!): Snoopy. Loads at the top of the page.

Jump on over to Mark’s site and grab it. Or, just press the Snoopy link above, view source and make a bookmarklet!

If you are offline (of course this works if you are online as well) and want a simple method to see the source code, add a bookmark using the following Javascript and name it what you want (maybe “View Code”).

Add bookmark

Then edit the bookmark and in the address field put in the following code:

javascript:var%20sourceWindow%20%3D%20window.open%28%27about%3Ablank%27%29%3B%20%0Avar%20newDoc%20%3D%20sourceWindow.document%3B%20%0AnewDoc.open%28%29%3B%20%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%20%2B%20document.location.href%20%2B%20%27%3C/title%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%20%0AnewDoc.close%28%29%3B%20%0Avar%20pre%20%3D%20newDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%20%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B

Add bookmark

(Click this link and a blank page with just the code will appear. Easier to copy when you are doing this on a mobile device).
Save and you now have a simple way of viewing source code even if you are off line.

Return top