jCouch – A jQuery Plugin for Distraction Free Page View

jCouch is a very lightweight jQuery plugin that provides you the feature of viewing a web page in distraction free mode. If your website is text oriented and the visitors on your site prefer reading your site content then this plugin will allow the users to read your web pages in the most convenient way without being distracted by other less useful content on the site. The plugin allows you to combine the selective parts of the web page in a single view. See the live demo.
 Features

• Light weight
• Easily customizable
• Zoom text feature
• Full jQuery Selectors Support
• Disable on pressing ‘Esc’

Live Demo Download Script

Options

target: (required, string) The elememts to be included in couch mode (comma separated), eg. #header, .post-body, h2
bgColor: (optional, string) Background color of the couch mode. eg. '#ffffff', 'red' etc. Default is white
width:(optional, string) Width of the content in couch mode. eg.'500px', '65%'. Default is full screen.
amplify:(optional, numeric) Factor by which the text-size is to be zoomed. eg. 0.2, 0.5 etc.

How to Use

You need to include following files in your web page before using jCouch:

• jCouch CSS file
• jQuery library file
• jCouch JS file

<link href="jCouch.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jCouch.min.js" type="text/javascript"></script>

Sample Usage 1

$(function(){
 // The selectors of couch buttons
 // Multiple selectors can be used to enable couch mode
 $('.couchBtn, .couchImg').jCouch({
  target: 'h1,#post-data', //list of elements to be couched
  bgColor: '#ffffff',  //background color
  width: '500px',   //width of couched content
  amplify: 0.2   //Factor by which text is to be zoomed
 });
});   

Sample Usage 2

$(function(){
 $('#couchBtn2').jCouch({
  target:'#leftcol .widgets',
  bgColor: '#f7f7f7'
 });
});   

Sample Usage 3

$(function(){
 $('#couchBtn3').jCouch({
  target:'#leftcol .widgets:nth-child(2)', //jQuery selectors are supported in target
  bgColor: '#C1371A',
  width: '250px'
 });
});   

Sample Usage 4

$(function(){
 $('#fbcouchBtn').jCouch({
  target:'#rightcol .widgets:nth-child(2)',
  bgColor: '#3B5998',
  width: '250px'
 });
});