├── README.md
├── jquery.yourhere.min.js
└── jquery.yourhere.js
/README.md:
--------------------------------------------------------------------------------
1 | # youRhere jQuery plugin
2 |
3 | * http://yourhere.gandtblog.com/
4 | * Copyright 2012, Daniel Sternlicht
5 | * http://www.danielsternlicht.com
6 | * Dual licensed under the MIT or GPL Version 2 licenses.
7 | * Enjoy :)
8 |
9 | ## What does "youRhere" jQuery plugin do?
10 |
11 | "youRhere" is an awesome jQuery plugin which give your readers a chance to mark their article reading- progress by just clicking it.
12 |
13 | ## Features
14 |
15 | * 100% Free
16 | * Using HTML5 local storage API
17 | * Full "rtl" & "ltr" support
18 | * First time usage wizard
19 | * Very easy to implement
20 | * Cross Browsers support
21 | * Multiple configurability options
22 | * 1 JS file - Only 12k
23 | * Minimized version - Only 8k
24 |
25 | ## Usage
26 |
27 | 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:
28 |
29 |
30 |
31 |
36 |
37 | ## Options
38 |
39 | 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:
40 |
41 | firstTimeWizard: true,
42 | useLocalStorage: true,
43 | autoScrollToMarker: true,
44 | markerDirection: 'left',
45 | tempMarkerBackground: '#B7B7B7',
46 | markerLineBackground: '#FFF82A',
47 | markerBackgroundOpacity: '0.7',
48 | markerBackground: '#000',
49 | markerWidth: '5px',
50 | supportedElements: 'h1, h2, h3, h4, h5, h6, p, ul, li'
51 |
52 | Let's have a quick look about "youRhere" options.
53 |
54 | ### firstTimeWizard
55 |
56 | 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".
57 |
58 | ### useLocalStorage
59 |
60 | Controls the HTML5 Local Storage API that allow the user to save his reading progress by marking a line. Accept "true" or "false".
61 |
62 | ### autoScrollToMarker
63 |
64 | 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".
65 |
66 | ### markerDirection
67 |
68 | Controls which way the marker will appear. Your choices between 'right' or 'left'.
69 |
70 | ### tempMarkerBackground
71 |
72 | 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..
73 |
74 | ### markerLineBackground
75 |
76 | Controls the background color of the highlighted line. Accept any color with any format you want. f.e "black", "#000000", "rgb(0,0,0)".
77 |
78 | ### markerBackgroundOpacity
79 |
80 | Sets an "Opacity" property to the highlighted line background. Accept any number in the range of 0.0 - 1.0.
81 |
82 | ### markerBackground
83 |
84 | 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..
85 |
86 | ### markerWidth
87 |
88 | Sets a "Width" property to the Marker element ('.yourhere-marker'). Accept a number of pixels. f.e "20px"
89 |
90 | ### supportedElements
91 |
92 | 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.
93 |
94 | ## Demo
95 |
96 | You can see a few examples on our Demo Page at: http://yourhere.gandtblog.com/demo.html
97 |
98 | ## Release
99 |
100 | * Current 1.4 beta - Added window.resize & hover events support and fixed bugs. Updated on 8/2/12.
101 | * 1.3 beta - Added "first time wizard", changed functionality and fixed some bugs. Last updated on 2/2/12.
102 | * 1.2 beta - Added scroll to last marker option and bug fixes. Last updated on 31/1/12.
103 | * 1.1 beta - Added HTML5 Local Storage support and bug fixes. Last updated on 30/1/12.
104 | * 1.0 beta - "youRhere" jQuery plugin. Last updated on 27/1/12.
105 |
106 | Don't forget to like & share youRhere from:
107 | http://yourhere.gandtblog.com/
--------------------------------------------------------------------------------
/jquery.yourhere.min.js:
--------------------------------------------------------------------------------
1 | (function(a){a.yourhere={init:function(b,c){var d=parseFloat(c.css("fontSize"));var e=c.css("z-index")!="auto"?parseInt(c.css("z-index")):10;if(c.css("position")=="static")c.css("position","relative");a.yourhere.opts=a.extend({},a.fn.yourhere.defaults,b);c.children().css({zIndex:e+2,position:"relative"});a('').hide().appendTo(c).css({position:"absolute",zIndex:e+3,width:a.yourhere.opts.markerWidth,cursor:"pointer",background:a.yourhere.opts.markerBackground,height:d+"px"});a('').hide().appendTo(c).css({position:"absolute",zIndex:e+1,backgroundColor:a.yourhere.opts.markerLineBackground,opacity:a.yourhere.opts.markerBackgroundOpacity,height:d+"px"});a.yourhere.checkStorage(c);a.yourhere.tempMarker(c,d,e);a.yourhere.eventsHandler(c,d)},eventsHandler:function(b,c){function e(c,e){var f=parseFloat(c.css("lineHeight"))>parseFloat(c.css("fontSize"))?parseFloat(c.css("lineHeight")):parseFloat(c.css("fontSize"));var g=c.offset().top;var h=e.pageY-g;var e=Math.floor(h/f);var i=g-d+e*f;a.yourhere.markerCreator(b,i,f);if(localStorage&&a.yourhere.opts.useLocalStorage){localStorage.removeItem("yourhere_"+window.location.href);localStorage.setItem("yourhere_"+window.location.href,i+","+f)}}var d=b.offset().top;b.hover(function(){b.find(".yourhere-temp-marker").stop(true,true).fadeIn("slow")},function(){b.find(".yourhere-temp-marker").stop(true,true).fadeOut("slow")});b.children(a.yourhere.opts.supportedElements).click(function(c){if(localStorage&&!localStorage.getItem("yourhere_first_time")&&a.yourhere.opts.firstTimeWizard){e(a(this),c);a.yourhere.firstTime(b);b.children(a.yourhere.opts.supportedElements).unbind("click")}});b.children(a.yourhere.opts.supportedElements).dblclick(function(c){e(a(this),c);if(localStorage&&!localStorage.getItem("yourhere_first_time")&&a.yourhere.opts.firstTimeWizard)a.yourhere.firstTime(b)});b.children().mousemove(function(c){var e=parseFloat(a(this).css("lineHeight"))>parseFloat(a(this).css("fontSize"))?parseFloat(a(this).css("lineHeight")):parseFloat(a(this).css("fontSize"));var f=c.pageY-d-e/2;if(c.pageYb.height()+d)return;b.find(".yourhere-temp-marker").stop(true,true).animate({top:f,height:e+"px"},"fast")});b.find(".yourhere-marker").dblclick(function(){a(this).fadeOut("fast");b.find(".yourhere-markerline").fadeOut("fast");if(localStorage&&a.yourhere.opts.useLocalStorage)localStorage.removeItem("yourhere_"+window.location.href)})},tempMarker:function(b,c,d){a('').appendTo(b).css({position:"absolute",zIndex:d+1,width:a.yourhere.opts.markerWidth,height:c+"px",top:0,background:a.yourhere.opts.tempMarkerBackground});b.find(".yourhere-temp-marker").css(a.yourhere.opts.markerDirection,-b.find(".yourhere-temp-marker").width()+"px").hide()},markerCreator:function(b,c,d){b.find(".yourhere-marker, .yourhere-markerline").fadeOut("fast");b.find(".yourhere-marker").stop(true,true).fadeIn().css({height:d+"px",top:c});b.find(".yourhere-markerline").stop(true,true).fadeIn().width(b.outerWidth()+b.find(".yourhere-marker").width()).css({height:d+"px",top:c});b.find(".yourhere-marker, .yourhere-markerline").css(a.yourhere.opts.markerDirection,-b.find(".yourhere-marker").width()+"px")},checkStorage:function(b){if(localStorage&&a.yourhere.opts.useLocalStorage){var c=localStorage.getItem("yourhere_"+window.location.href);if(c&&c!=""){var d=c.split(",");a.yourhere.markerCreator(b,parseInt(d[0]),parseInt(d[1]));if(a.yourhere.opts.autoScrollToMarker){setTimeout(function(){a("body").animate({scrollTop:parseInt(d[0])})},1500)}}}else{if(localStorage)localStorage.removeItem("yourhere_"+window.location.href);return}},firstTime:function(b){if(b.find(".yourhere-tooltip").length<=0){a('').appendTo(b).hide().css({width:"220px",height:"100px",padding:"10px",background:"#eee",position:"absolute",top:"0",border:"1px solid #c7c7c7",borderRadius:"5px",boxShadow:"0 1px 2px rgba(0,0,0,0.4), inset 0 0 1px #fff",lineHeight:"18px",fontSize:"12px",direction:"ltr",zIndex:"999"});var c=b.find(".yourhere-tooltip");c.css(a.yourhere.opts.markerDirection,-(parseFloat(c.outerWidth())/2)+"px").find(".yourhere-tooltip-step").html(a.yourhere.firstTimeSteps[0]);a('').appendTo(c).css({width:0,height:0,borderTop:"9px solid #eee",borderRight:"10px solid transparent",borderLeft:"10px solid transparent",position:"absolute",bottom:"-9px",left:parseFloat(c.width())/2-5+"px",color:"#909090",zIndex:"999"});a('').appendTo(c).css({width:0,height:0,borderTop:"10px solid #c7c7c7",borderRight:"11px solid transparent",borderLeft:"11px solid transparent",position:"absolute",bottom:"-10px",left:parseFloat(c.find(".yourhere-tooltip-cornerT").css("left"))-1+"px",zIndex:"998"});a('x').appendTo(c).css({position:"absolute",top:"0",right:"5px",fontSize:"12px",color:"#a7a7a7",cursor:"pointer",zIndex:"1000"});a('next').appendTo(c).css({position:"absolute",right:"10px",bottom:"5px"})}setTimeout(function(){a(".yourhere-tooltip").fadeIn(function(){a(".yourhere-tooltip").animate({top:parseFloat(b.find(".yourhere-marker").css("top"))-parseFloat(a(".yourhere-tooltip").outerHeight())-13});a.yourhere.checkOffset()})},1e3);a.yourhere.firstTimeTutorialEvents(b,c)},checkOffset:function(){var b=a(".yourhere-tooltip");if(b.offset().left<0){b.stop().animate({left:0+"px"})}else{b.stop().animate({left:-(parseFloat(b.outerWidth())/2)+"px"})}},firstTimeTutorialEvents:function(b,c){var d=0;c.find(".yourhere-tooltip-close").live("click",function(b){b.preventDefault();c.fadeOut("normal",function(){a(this).remove()});if(localStorage)localStorage.setItem("yourhere_first_time",false)});c.find(".yourhere-tooltip-next").live("click",function(b){b.preventDefault();d++;c.find(".yourhere-tooltip-step").fadeOut("fast",function(){a(this).html(a.yourhere.firstTimeSteps[d]).fadeIn("slow")});if(d==a.yourhere.firstTimeSteps.length-1){var e=a(this);e.removeClass("yourhere-tooltip-next").text("close");setTimeout(function(){e.addClass("yourhere-tooltip-close")},500)}});a(window).resize(function(){a.yourhere.checkOffset()})},firstTimeSteps:['Hey you!
We have noticed that this is the first time your\'re using "youRhere" marker in this website, so we made just for you a short "how to?" tutorial.',"youRhere allow you to mark a line on the page by just double clicking it, so you could save your reading progress and come back to it later.
Don't be shy, try it now!","If you accidently marked a line and you want to remove the highlight from the page your'e reading, you may do so by just double click on the marker itself.",'That\'s it!
This is all you have to know about youRhere. For more information you can visit youRhere official website.
Enjoy!'],opts:{}};a.fn.yourhere=function(b){var c=new a.yourhere.init(b,this)};a.fn.yourhere.defaults={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"}})(jQuery)
--------------------------------------------------------------------------------
/jquery.yourhere.js:
--------------------------------------------------------------------------------
1 | /**************************************************************
2 | * youRhere v1.4 - jQuery Plugin
3 | * http://yourhere.gandtblog.com/
4 | * Copyright 2012, Daniel Sternlicht
5 | * http://www.danielsternlicht.com
6 | * Dual licensed under the MIT or GPL Version 2 licenses.
7 | * Enjoy :)
8 | ***************************************************************/
9 |
10 | (function($) {
11 |
12 | // youRhere jQuery plugin
13 | $.yourhere = {
14 |
15 | init: function(options, box) {
16 | var boxLineHeight = parseFloat(box.css('fontSize'));
17 | var basicZindex = box.css('z-index') != 'auto' ? parseInt(box.css('z-index')) : 10;
18 |
19 | // Check the container has position and set a default if not
20 | if(box.css('position') == 'static') box.css('position', 'relative');
21 |
22 | // Initialized the default settings
23 | $.yourhere.opts = $.extend({}, $.fn.yourhere.defaults, options);
24 |
25 | // Set a relative position to the container childrens
26 | box.children().css({zIndex: basicZindex + 2, position: 'relative'});
27 |
28 | // Create the marker
29 | $('').hide().appendTo(box).css({
30 | position: 'absolute',
31 | zIndex: basicZindex + 3,
32 | width: $.yourhere.opts.markerWidth,
33 | cursor: 'pointer',
34 | background: $.yourhere.opts.markerBackground,
35 | height: boxLineHeight + 'px'
36 | });
37 |
38 | // Create the marker highlight line
39 | $('').hide().appendTo(box).css({
40 | position: 'absolute',
41 | zIndex: basicZindex + 1,
42 | backgroundColor: $.yourhere.opts.markerLineBackground,
43 | opacity: $.yourhere.opts.markerBackgroundOpacity,
44 | height: boxLineHeight + 'px'
45 | });
46 |
47 | // Check for previus data storage
48 | $.yourhere.checkStorage(box);
49 |
50 | // Create the temporary marker
51 | $.yourhere.tempMarker(box, boxLineHeight, basicZindex);
52 |
53 | // Events handler
54 | $.yourhere.eventsHandler(box, boxLineHeight);
55 |
56 | },
57 |
58 | eventsHandler: function(box, boxLineHeight) {
59 | var boxOffset = box.offset().top;
60 |
61 | // Hover event to reveal / hide the temp marker
62 | box.hover(function(){
63 | box.find('.yourhere-temp-marker').stop(true, true).fadeIn('slow');
64 | }, function(){
65 | box.find('.yourhere-temp-marker').stop(true, true).fadeOut('slow');
66 | });
67 |
68 | // Click event on an element
69 | box.children($.yourhere.opts.supportedElements).click(function(e){
70 | if(localStorage && !localStorage.getItem('yourhere_first_time') && $.yourhere.opts.firstTimeWizard) {
71 | placeMarker($(this), e);
72 | $.yourhere.firstTime(box);
73 | box.children($.yourhere.opts.supportedElements).unbind('click');
74 | }
75 | });
76 |
77 | // Double click event on an element
78 | box.children($.yourhere.opts.supportedElements).dblclick(function(e){
79 | placeMarker($(this), e);
80 | if(localStorage && !localStorage.getItem('yourhere_first_time') && $.yourhere.opts.firstTimeWizard) $.yourhere.firstTime(box);
81 | });
82 |
83 | // Mouse move event
84 | box.children().mousemove(function(e){
85 | var lineHeight = parseFloat($(this).css('lineHeight')) > parseFloat($(this).css('fontSize')) ? parseFloat($(this).css('lineHeight')) : parseFloat($(this).css('fontSize'));
86 | var y = e.pageY - boxOffset - (lineHeight / 2);
87 | if(e.pageY < boxOffset + lineHeight / 2 || e.pageY > box.height() + boxOffset) return;
88 | box.find('.yourhere-temp-marker').stop(true, true).animate({
89 | top: y,
90 | height: lineHeight + 'px'
91 | }, 'fast');
92 | });
93 |
94 | // Hide the marker
95 | box.find('.yourhere-marker').dblclick(function() {
96 | $(this).fadeOut('fast');
97 | box.find('.yourhere-markerline').fadeOut('fast');
98 | if(localStorage && $.yourhere.opts.useLocalStorage)
99 | localStorage.removeItem('yourhere_' + window.location.href);
100 | });
101 |
102 | function placeMarker(elm, e) {
103 | var lineHeight = parseFloat(elm.css('lineHeight')) > parseFloat(elm.css('fontSize')) ? parseFloat(elm.css('lineHeight')) : parseFloat(elm.css('fontSize'));
104 | var elmOffset = elm.offset().top;
105 | var z = e.pageY - elmOffset;
106 | var e = Math.floor(z / lineHeight);
107 | var y = elmOffset - boxOffset + (e * lineHeight);
108 | $.yourhere.markerCreator(box, y, lineHeight);
109 | if(localStorage && $.yourhere.opts.useLocalStorage){
110 | localStorage.removeItem('yourhere_' + window.location.href);
111 | localStorage.setItem('yourhere_' + window.location.href, y + "," + lineHeight);
112 | }
113 | }
114 | },
115 |
116 | tempMarker: function(box, lineHeight, z) {
117 | $('').appendTo(box).css({
118 | position: 'absolute',
119 | zIndex: z + 1,
120 | width: $.yourhere.opts.markerWidth,
121 | height: lineHeight + 'px',
122 | top: 0,
123 | background: $.yourhere.opts.tempMarkerBackground
124 | });
125 | box.find('.yourhere-temp-marker').css($.yourhere.opts.markerDirection, (-(box.find('.yourhere-temp-marker').width()) + 'px'))
126 | .hide();
127 | },
128 |
129 | markerCreator: function(box, y, lineHeight) {
130 | // Remove previus markers
131 | box.find('.yourhere-marker, .yourhere-markerline').fadeOut('fast');
132 |
133 | // Place the marker
134 | box.find('.yourhere-marker').stop(true, true)
135 | .fadeIn().css({
136 | height: lineHeight + 'px',
137 | top: y
138 | });
139 |
140 | // Place the marker line
141 | box.find('.yourhere-markerline').stop(true, true)
142 | .fadeIn()
143 | .width(box.outerWidth() + box.find('.yourhere-marker').width())
144 | .css({
145 | height: lineHeight + 'px',
146 | top: y
147 | });
148 |
149 | // Give the marker left / right offset
150 | box.find('.yourhere-marker, .yourhere-markerline').css($.yourhere.opts.markerDirection, (-(box.find('.yourhere-marker').width()) + 'px'));
151 | },
152 |
153 | checkStorage: function(box) {
154 | if(localStorage && $.yourhere.opts.useLocalStorage) {
155 | var data = localStorage.getItem('yourhere_' + window.location.href);
156 | if(data && data != '') {
157 | var arr = data.split(',');
158 | $.yourhere.markerCreator(box, parseInt(arr[0]), parseInt(arr[1]));
159 | if($.yourhere.opts.autoScrollToMarker) {
160 | setTimeout(function() {
161 | $('body').animate({
162 | scrollTop: parseInt(arr[0])
163 | });
164 | }, 1500);
165 | }
166 | }
167 | } else {
168 | if(localStorage) localStorage.removeItem('yourhere_' + window.location.href);
169 | return;
170 | }
171 | },
172 |
173 | firstTime: function(box) {
174 | // Check if tooltip already exist
175 | if(box.find('.yourhere-tooltip').length <= 0) {
176 |
177 | // Create the tooltip
178 | $('').appendTo(box).hide()
179 | .css({
180 | width: '220px',
181 | height: '100px',
182 | padding: '10px',
183 | background: '#eee',
184 | position: 'absolute',
185 | top: '0',
186 | border: '1px solid #c7c7c7',
187 | borderRadius: '5px',
188 | boxShadow: '0 1px 2px rgba(0,0,0,0.4), inset 0 0 1px #fff',
189 | lineHeight: '18px',
190 | fontSize: '12px',
191 | direction: 'ltr',
192 | zIndex: '999'
193 | });
194 |
195 | var tooltip = box.find('.yourhere-tooltip');
196 | tooltip.css($.yourhere.opts.markerDirection, -(parseFloat(tooltip.outerWidth()) / 2) + 'px')
197 | .find('.yourhere-tooltip-step').html($.yourhere.firstTimeSteps[0]);
198 |
199 | $('').appendTo(tooltip)
200 | .css({
201 | width: 0,
202 | height: 0,
203 | borderTop: '9px solid #eee',
204 | borderRight: '10px solid transparent',
205 | borderLeft: '10px solid transparent',
206 | position: 'absolute',
207 | bottom: '-9px',
208 | left: parseFloat(tooltip.width()) / 2 - 5 + 'px',
209 | color: '#909090',
210 | zIndex: '999'
211 | });
212 |
213 | $('').appendTo(tooltip)
214 | .css({
215 | width: 0,
216 | height: 0,
217 | borderTop: '10px solid #c7c7c7',
218 | borderRight: '11px solid transparent',
219 | borderLeft: '11px solid transparent',
220 | position: 'absolute',
221 | bottom: '-10px',
222 | left: parseFloat(tooltip.find('.yourhere-tooltip-cornerT').css('left')) - 1 + 'px',
223 | zIndex: '998'
224 | });
225 |
226 | $('x').appendTo(tooltip)
227 | .css({
228 | position: 'absolute',
229 | top: '0',
230 | right: '5px',
231 | fontSize: '12px',
232 | color: '#a7a7a7',
233 | cursor: 'pointer',
234 | zIndex: '1000'
235 | });
236 |
237 | $('next').appendTo(tooltip).css({
238 | position: 'absolute',
239 | right: '10px',
240 | bottom: '5px'
241 | });
242 | }
243 |
244 | // Place the tooltip relative to the youRhere marker
245 | setTimeout(function(){
246 | $('.yourhere-tooltip').fadeIn(function(){
247 | $('.yourhere-tooltip').animate({top: parseFloat(box.find('.yourhere-marker').css('top')) - parseFloat($('.yourhere-tooltip').outerHeight()) - 13});
248 | $.yourhere.checkOffset();
249 | });
250 | }, 1000);
251 |
252 | $.yourhere.firstTimeTutorialEvents(box, tooltip);
253 | },
254 |
255 | checkOffset: function() {
256 | var tooltip = $('.yourhere-tooltip');
257 | if(tooltip.offset().left < 0) {
258 | tooltip.stop().animate({left: 0 + 'px'});
259 | }
260 | else {
261 | tooltip.stop().animate({left: -(parseFloat(tooltip.outerWidth()) / 2) + 'px'});
262 | }
263 | },
264 |
265 | firstTimeTutorialEvents: function(box, tooltip) {
266 | var step = 0;
267 |
268 | // Close the tooltip
269 | tooltip.find('.yourhere-tooltip-close').live('click', function(e){
270 | e.preventDefault();
271 | tooltip.fadeOut('normal', function(){
272 | $(this).remove();
273 | });
274 | if(localStorage) localStorage.setItem('yourhere_first_time', false);
275 | });
276 |
277 | // Next button events
278 | tooltip.find('.yourhere-tooltip-next').live('click', function(e){
279 | e.preventDefault();
280 | step++;
281 | tooltip.find('.yourhere-tooltip-step').fadeOut('fast', function(){
282 | $(this).html($.yourhere.firstTimeSteps[step]).fadeIn('slow');
283 | });
284 | if(step == $.yourhere.firstTimeSteps.length - 1) {
285 | var nextBtn = $(this);
286 | nextBtn.removeClass('yourhere-tooltip-next').text('close');
287 | setTimeout(function(){
288 | nextBtn.addClass('yourhere-tooltip-close');
289 | }, 500);
290 | }
291 | });
292 |
293 | $(window).resize(function(){
294 | $.yourhere.checkOffset();
295 | });
296 | },
297 |
298 | firstTimeSteps: [
299 | 'Hey you!
We have noticed that this is the first time your\'re using "youRhere" marker in this website, so we made just for you a short "how to?" tutorial.',
300 | 'youRhere allow you to mark a line on the page by just double clicking it, so you could save your reading progress and come back to it later.
Don\'t be shy, try it now!',
301 | 'If you accidently marked a line and you want to remove the highlight from the page your\'e reading, you may do so by just double click on the marker itself.',
302 | 'That\'s it!
This is all you have to know about youRhere. For more information you can visit youRhere official website.
Enjoy!'
303 | ],
304 |
305 | opts: {}
306 |
307 | }
308 |
309 | // Creating new instance for each youRhere call
310 | $.fn.yourhere = function( options ) {
311 | var yourhere = new $.yourhere.init( options, this );
312 | };
313 |
314 | // youRhere default properties
315 | $.fn.yourhere.defaults = {
316 | firstTimeWizard: true,
317 | useLocalStorage: true,
318 | autoScrollToMarker: true,
319 | markerDirection: 'left',
320 | tempMarkerBackground: '#b7b7b7',
321 | markerLineBackground: '#FFF82A',
322 | markerBackgroundOpacity: '0.7',
323 | markerBackground: '#000',
324 | markerWidth: '5px',
325 | supportedElements: 'h1, h2, h3, h4, h5, h6, p, ul, li'
326 | }
327 |
328 | })(jQuery);
--------------------------------------------------------------------------------