• http://yourhere.gandtblog.com/
• Copyright 2012, Daniel Sternlicht
• http://www.danielsternlicht.com
• Dual licensed under the MIT or GPL Version 2 licenses.
• Enjoy :)

"youRhere" is an awesome jQuery plugin which give your readers a chance to mark their article reading- progress by just clicking it.

• 100% Free
• Using HTML5 local storage API
• Full "rtl" & "ltr" support
• First time usage wizard
• Very easy to implement
• Cross Browsers support
• Multiple configurability options
• 1 JS file - Only 12k
• Minimized version - Only 8k

As I said, it's very easy to implement "youRhere" in your website. All you have to do is to include the "jquery.urhere.js" file, and then activate it on the relevant container. For example:

<script type="text/javascript" src="js/jQuery.Last.Version"></script> 
<script type="text/javascript" src="js/jquery.yourhere.js"></script> 
<script type="text/javascript">	
$(document).ready(function(){	
	$('#content').yourhere();	
});	
</script>

When you activate the plugin, the activation function can pass a few arguments which allow you to control the plugin. Here is a list of options with their default settings:

firstTimeWizard: true,
useLocalStorage: true,
autoScrollToMarker: true, 
markerDirection: 'left',
tempMarkerBackground: '#B7B7B7',
markerLineBackground: '#FFF82A',
markerBackgroundOpacity: '0.7',
markerBackground: '#000',
markerWidth: '5px', 
supportedElements: 'h1, h2, h3, h4, h5, h6, p, ul, li'

Let's have a quick look about "youRhere" options.

Sets the activation of the "first time wizard" when the plugin detect it's the first time the user enter this website. Accept "true" or "false".

Controls the HTML5 Local Storage API that allow the user to save his reading progress by marking a line. Accept "true" or "false".

In case your "useLocalStorage" is set to "true" you can specified if you want the users window to scroll automatically to the last line they have marked. Accept "true" or "false".

Controls which way the marker will appear. Your choices between 'right' or 'left'.

Controls the scrolling "marker" background. Sets a "Background" property to the ".yourhere-tempMarker" DIV. Basically can accept anything you want including background colors, images, positions and so on..

Controls the background color of the highlighted line. Accept any color with any format you want. f.e "black", "#000000", "rgb(0,0,0)".

Sets an "Opacity" property to the highlighted line background. Accept any number in the range of 0.0 - 1.0.

Controls the "marker" element background. Sets a "Background" property to the ".yourhere-marker" DIV. Can accept anything you want including background colors, images, positions and so on..

Sets a "Width" property to the Marker element ('.yourhere-marker'). Accept a number of pixels. f.e "20px"

Sets which DOM elements will respond to the youRhere click event (highlighted text). Accept multiple elements, should be seperated by ",". f.e: "p, h2, blockquote" - will trigger the click event on paragraphs, heading 2 text and blockquotes.

You can see a few examples on our Demo Page at: http://yourhere.gandtblog.com/demo.html

• Current 1.4 beta - Added window.resize & hover events support and fixed bugs. Updated on 8/2/12.
• 1.3 beta - Added "first time wizard", changed functionality and fixed some bugs. Last updated on 2/2/12.
• 1.2 beta - Added scroll to last marker option and bug fixes. Last updated on 31/1/12.
• 1.1 beta - Added HTML5 Local Storage support and bug fixes. Last updated on 30/1/12.
• 1.0 beta - "youRhere" jQuery plugin. Last updated on 27/1/12.

Don't forget to like & share youRhere from: http://yourhere.gandtblog.com/