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
Features
- Light weight
- Easily customizable
- Zoom text feature
- Full jQuery Selectors Support
- Disable on pressing 'Esc'
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'
});
}); 
