Splitting images to prevent image copying from web sites

Image plagiarism is one of the common issues faced by websites, specially by designers and photographers. Besides the technique of attaching a copyright text or a hidden watermark, the other most common method of preventing casual copying of images from websites is by disabling right-click using JavaScript. Another scheme I recently found uses a method wherein the image is split into three parts and then displayed on the page. So whenever the user tries to save the image he gets three different parts of the image rather than a single image. This prevents casual copying of images from web pages. Of course, this is not a fool-proof method, and with some workaround one is able to create the original image but with some extra effort. This method can also be useful to prevent automated bots from easily downloading your images.
Read More

Building a self-correcting email input field

Email is one of the common input fields in any web form. Many sites use two email fields to make sure that the user has entered correct email ids. This is a common idiom in web design, and it is surprising that it has not changed over all these years. One of the interesting alternative I found is the ‘MailCheck’ JavaScript library. The library enables you to offer the user a suggestion for the domain name if he makes a mistake while entering. A demo is shown below.
Read More

Using the new Page visibility API in your apps

One of the features lacking in the current browser api is that of determining whether the web page is currently visible to the user or is hidden (either in another tab or window).

The new Page Visibility API allows you to do just that – determine whether your web page is visible to the user, is hidden in a background tab or window, or is prerendering. It allows the developer to use the page visibility state in JavaScript logic to make the user experience more friendly; for example, by stopping video, animation or slideshow playback whenever the user switches to another browser tab or window, and resuming whenever the user switches back. Also if your page is doing some ajax processing periodically, which consumes precious system resources, we can pause it when the page is not in focus. Other use can be in analytics, checking how long the page had been in actual user focus, rather then as a hidden tab or window.

Check the below demo page to see how this works. The demo was tested in Safari, Opera 11.10, Chrome and Firefox.
Read More

Create a infinite scroll page using jQuery

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to a particular element – a ‘waypoint’. This can be used to highlight when a element comes into view, load additional html or throw a popup. In this post we will use it to create a infinite scroll page.

An infinite scroll page can be useful when you do not want to add pagination, but would rather load the content on the same page when the user requests.
Read More

Building Reactive web content

Reading is an active process. Weather you are reading a web page, a book or any other media, the information tends to generate ideas in the mind of the reader. An active reader asks questions, considers alternatives, questions assumptions and analyses the argument of the author. An active reader doesn’t passively store up information, but uses the author’s arguments to create a framework to further up his ideas and understanding.
Read More