As many of you know, I am a big fan of the website Tapiture and in recent weeks, I have been thinking about what I could do to help improve my experience with Tapiture. One of the biggest issues I have had with Tapiture is that they do not have a formal process for Tapping on the iPad. I decided to take it upon myself to make it possible to Tap images from Safari on the iPad.

After the jump, you will find a short multi-step process that describes in detail how you can add the Tapiture bookmarklet to Safari on the iPad. If you have any feedback, or comments, please share them in comments.

If you are not reading this on an iPad, please browse to this article in Safari on the iPad. You will need to copy and paste code from the article to Safari on the iPad. Here is a short link you use to quickly find your way back to this article: bit.ly/tapipad

So, what is Tapiture? Well, Tapiture is Pinterest clone that is more geared towards men, and the things men like. I have been a huge fan of it since it was in beta a few months ago. New in January 2013, Tapiture launched a whole new branding and design initiative to take the site to the new level. They also announce that they now have over 1.2 million unique vistors each month and it is growing at an alarming rate.

Tapiture offers a bookmarklet that allows you to “Tap” multiple images on a page. While this bookmarklet is good, I found it difficult to “Tap” a single image on a page with main images. After realizing this was a problem I could fix very easily on my own, I decided to take a shot at making a Google Chrome Tapiture extension. This was my first attempt at a Google Chrome extension, but I very pleased with how it turned out. The Tapiture extension allows the bookmarklet to live in the info bar instead of the bookmark bar. Best of all, it adds the ability to right-click an image and tap that single image.

Download link and screenshots available after the jump.

If you have ever developed for the mobile web, you have probably come across this little snippet of JavaScript which enables you to hide the mobile browsers address bar:

function hideURLbar() {
	window.scrollTo(0, 1);
}

if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
    addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
    }, false);
}

This code hides the browser address bar in iOS and Android if the length of the pages content is long enough. This is a very common function and is excellent if you would like to increase the mobile browsers content viewable area. I have one small problem with it, it doesn’t take into account page anchors (http://www.example.com/#comments). When the page loads with a page anchor, it cancels out this anchor and scrolls to the top on load.

I propose an improvement to this code javascript snippet that will add a page anchor check statement prior to the window.scrollTo(0, 1); function.

function hideURLbar() {
	if (window.location.hash.indexOf('#') == -1) {
		window.scrollTo(0, 1);
	}
}

if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
    addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
    }, false);
}

Today, I have officially released version 2.0 of my popular premium business WordPress theme, Simply Business. Simply Business WordPress v2.0 brings a ton of new features, bug fixes, and full WordPress 3.3 support! This theme can be purchased on ThemeForest.net for only $30.00.