{"_id":"guides","_rev":"8-b56ac6dcdec4ea41a0ce7a0331afbde8","name":"guides","description":"Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.","dist-tags":{"latest":"1.2.9"},"versions":{"1.2.0":{"name":"guides","version":"1.2.0","description":"Simple lightweight Javascript library for highlighting DOM elements and making guided website welcome tours.","title":"Guides.js - highlight DOM elements and make guided tours","author":{"name":"Elena Petrova","email":"elena.julianova@gmail.com","url":"http://ejulianova.github.io/guides/"},"main":"guides.js","dependencies":{"jquery":"~2.1.1"},"devDependencies":{"gulp":"^3.9.1","gulp-banner":"^0.1.3","gulp-browserify":"^0.5.1","gulp-connect":"^5.0.0","gulp-rename":"^1.2.2","gulp-sass":"^2.3.2","gulp-uglify":"^2.0.0","jasmine":"^2.4.1","karma":"^1.2.0","karma-browserify":"^5.1.0","karma-jasmine":"^1.0.2","karma-phantomjs-launcher":"^1.0.1","open":"0.0.5","phantomjs":"^2.1.7"},"scripts":{"test":"gulp test","build":"gulp build","run":"gulp"},"keywords":["guide","guides","guiders","guided","tour","welcome","helper","wizard","highlight","jquery-plugin","jquery","plugin"],"docs":"http://ejulianova.github.io/guides/","demo":"http://ejulianova.github.io/guides/","homepage":"http://ejulianova.github.io/guides/","repository":{"type":"git","url":"git+https://github.com/ejulianova/guides.git"},"bugs":{"url":"https://github.com/ejulianova/guides/issues"},"licenses":[{"type":"MIT","url":"https://opensource.org/licenses/MIT"}],"license":"MIT","gitHead":"9c336ce902e80fd90d2542bbd84d0c6aa7481fec","_id":"guides@1.2.0","_shasum":"860c1f4042f742216afd7592f3783b13909fa709","_from":".","_npmVersion":"3.3.6","_nodeVersion":"0.12.7","_npmUser":{"name":"ejulianova","email":"elena.julianova@gmail.com"},"dist":{"shasum":"860c1f4042f742216afd7592f3783b13909fa709","tarball":"https://registry.npmjs.org/guides/-/guides-1.2.0.tgz","integrity":"sha512-2UvCsSVpN+BWMQzbMQMQA6kzsJOKfjghw5KQXGwKEzZLuQTNjl+YL6BzyTDsbNdvDgzfk4xmxzFMogFB6jU24g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl6X+p5iAsTV5UWV1Sl1Cyi6NrYnuzHCBd92UEKiHlIgIgYvKwDHfDiYx2+Ut8kSBVAQ/oKxG6G9OdOxaFI7koaIQ="}]},"maintainers":[{"name":"ejulianova","email":"elena.julianova@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/guides-1.2.0.tgz_1471076087076_0.15783167001791298"}},"1.2.1":{"name":"guides","version":"1.2.1","description":"Simple lightweight Javascript library for highlighting DOM elements and making guided website welcome tours.","title":"Guides.js - highlight DOM elements and make guided tours","author":{"name":"Elena Petrova","email":"elena.julianova@gmail.com","url":"http://ejulianova.github.io/guides/"},"main":"guides.js","dependencies":{"jquery":"~2.1.1"},"devDependencies":{"gulp":"^3.9.1","gulp-banner":"^0.1.3","gulp-browserify":"^0.5.1","gulp-connect":"^5.0.0","gulp-rename":"^1.2.2","gulp-sass":"^2.3.2","gulp-uglify":"^2.0.0","jasmine":"^2.4.1","karma":"^1.2.0","karma-browserify":"^5.1.0","karma-jasmine":"^1.0.2","karma-phantomjs-launcher":"^1.0.1","open":"0.0.5","phantomjs":"^2.1.7"},"scripts":{"test":"gulp test","build":"gulp build","run":"gulp"},"keywords":["guide","guides","guiders","guided","tour","welcome","helper","wizard","highlight","jquery-plugin","jquery","plugin","ecosystem:jquery"],"docs":"http://ejulianova.github.io/guides/","demo":"http://ejulianova.github.io/guides/","homepage":"http://ejulianova.github.io/guides/","repository":{"type":"git","url":"git+https://github.com/ejulianova/guides.git"},"bugs":{"url":"https://github.com/ejulianova/guides/issues"},"licenses":[{"type":"MIT","url":"https://opensource.org/licenses/MIT"}],"license":"MIT","gitHead":"d0a6c5a53c88c23fbedc3425c3449f9a37a0397d","_id":"guides@1.2.1","_shasum":"aa1bc5704b96369c3c1f0f0e16c785c37b1f40ef","_from":".","_npmVersion":"3.3.6","_nodeVersion":"0.12.7","_npmUser":{"name":"ejulianova","email":"elena.julianova@gmail.com"},"dist":{"shasum":"aa1bc5704b96369c3c1f0f0e16c785c37b1f40ef","tarball":"https://registry.npmjs.org/guides/-/guides-1.2.1.tgz","integrity":"sha512-lc1JpSTJZLFW8mZhgwgNoc+WS5qa3xfTHTeRxS13+SEkY3jM0IxDG/8DinqRhT6jv9mAriW1XAddzyUSm9EGMg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCROZW6uDwZdiwwF44DT9aOq/B88/8GGddVvkruPCWAkwIgeMgDqmXNcB0inhP+EUGjYuo0a5rTsiPZrRyWb6+FXZE="}]},"maintainers":[{"name":"ejulianova","email":"elena.julianova@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/guides-1.2.1.tgz_1471078127697_0.7670644775498658"}},"1.2.6":{"name":"guides","version":"1.2.6","description":"Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.","title":"Guides.js - highlight DOM elements and make step-by-step website tours","author":{"name":"Elena Petrova","email":"elena.julianova@gmail.com","url":"http://ejulianova.github.io/guides/"},"main":"guides.js","dependencies":{"jquery":"~2.1.1"},"devDependencies":{"gulp":"^3.9.1","gulp-banner":"^0.1.3","gulp-browserify":"^0.5.1","gulp-connect":"^5.0.0","gulp-gh-pages":"^0.5.4","gulp-rename":"^1.2.2","gulp-sass":"^2.3.2","gulp-uglify":"^2.0.0","jasmine":"^2.4.1","karma":"^1.2.0","karma-browserify":"^5.1.0","karma-jasmine":"^1.0.2","karma-phantomjs-launcher":"^1.0.1","open":"0.0.5","phantomjs":"^2.1.7"},"scripts":{"test":"gulp test","build":"gulp build","run":"gulp"},"keywords":["guide","guides","guiders","guided","tour","welcome","helper","wizard","highlight","jquery-plugin","jquery","plugin","step-by-step","intro","introduction","ecosystem:jquery"],"docs":"http://ejulianova.github.io/guides/","demo":"http://ejulianova.github.io/guides/","homepage":"http://ejulianova.github.io/guides/","repository":{"type":"git","url":"git+https://github.com/ejulianova/guides.git"},"bugs":{"url":"https://github.com/ejulianova/guides/issues"},"licenses":[{"type":"MIT","url":"https://opensource.org/licenses/MIT"}],"license":"MIT","gitHead":"c4e6a6c70dd94e54bd8c871c5ecda85d73052549","_id":"guides@1.2.6","_shasum":"b35bc7cdf2d99d959087f646a790045bc17175f6","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"ejulianova","email":"elena.julianova@gmail.com"},"dist":{"shasum":"b35bc7cdf2d99d959087f646a790045bc17175f6","tarball":"https://registry.npmjs.org/guides/-/guides-1.2.6.tgz","integrity":"sha512-q3bCuVnWVV3L1K95rD3hFYin9zjo3R2H8XCx2IRWHKa1LvqZAvRwpKuKVOTEWIITKmyvEi4GOFxhWysOjU2eYQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFh2Lg/kk2RNHKsM4qE5Smid1n9xIpPgoW6Dp8OPvL7RAiEA1PspVr9R9SvWAmowFti/f1HonCq8jVJyu/XotSrlSa4="}]},"maintainers":[{"name":"ejulianova","email":"elena.julianova@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/guides-1.2.6.tgz_1478425347212_0.5051559316925704"}},"1.2.7":{"name":"guides","version":"1.2.7","description":"Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.","title":"Guides.js - highlight DOM elements and make step-by-step website tours","author":{"name":"Elena Petrova","email":"elena.julianova@gmail.com","url":"http://ejulianova.github.io/guides/"},"main":"guides.js","dependencies":{"jquery":"~2.1.1"},"devDependencies":{"gulp":"^3.9.1","gulp-banner":"^0.1.3","gulp-browserify":"^0.5.1","gulp-connect":"^5.0.0","gulp-gh-pages":"^0.5.4","gulp-rename":"^1.2.2","gulp-sass":"^2.3.2","gulp-uglify":"^2.0.0","jasmine":"^2.4.1","karma":"^1.2.0","karma-browserify":"^5.1.0","karma-jasmine":"^1.0.2","karma-phantomjs-launcher":"^1.0.1","open":"0.0.5","phantomjs":"^2.1.7"},"scripts":{"test":"gulp test","build":"gulp build","run":"gulp"},"keywords":["guide","guides","guiders","guided","tour","welcome","helper","wizard","highlight","jquery-plugin","jquery","plugin","step-by-step","intro","introduction","ecosystem:jquery"],"docs":"http://ejulianova.github.io/guides/","demo":"http://ejulianova.github.io/guides/","homepage":"http://ejulianova.github.io/guides/","repository":{"type":"git","url":"git+https://github.com/ejulianova/guides.git"},"bugs":{"url":"https://github.com/ejulianova/guides/issues"},"licenses":[{"type":"MIT","url":"https://opensource.org/licenses/MIT"}],"license":"MIT","gitHead":"d0b964fedf0d43e9654d0c8e1fe1eb1a9c3ebbc1","_id":"guides@1.2.7","_shasum":"a26e45bd39c24d1a89a9e2b6c8c4f71115cd45ca","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"ejulianova","email":"elena.julianova@gmail.com"},"dist":{"shasum":"a26e45bd39c24d1a89a9e2b6c8c4f71115cd45ca","tarball":"https://registry.npmjs.org/guides/-/guides-1.2.7.tgz","integrity":"sha512-P8eZXLcKUv28hSHIjHVkaS3XXR/95jgF/tFih94u5aJZT2jfEx9OtSkgL6b8oqMCj164nBqWsbL60HDXxrne3Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2h4E3cCyaee2notDxaJESoj3V78N2aBSzfawf4kuRRAiEAyRtaJ8I/DKA5tfuX/byO5k2Xq9I02mZ3sgdDTXzlsNc="}]},"maintainers":[{"name":"ejulianova","email":"elena.julianova@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/guides-1.2.7.tgz_1478551179136_0.6657979057636112"}},"1.2.8":{"name":"guides","version":"1.2.8","description":"Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.","title":"Guides.js - highlight DOM elements and make step-by-step website tours","author":{"name":"Elena Petrova","email":"elena.julianova@gmail.com","url":"http://ejulianova.github.io/guides/"},"main":"guides.js","dependencies":{"jquery":"~2.1.1"},"devDependencies":{"gulp":"^3.9.1","gulp-banner":"^0.1.3","gulp-browserify":"^0.5.1","gulp-connect":"^5.0.0","gulp-gh-pages":"^0.5.4","gulp-rename":"^1.2.2","gulp-sass":"^2.3.2","gulp-uglify":"^2.0.0","jasmine":"^2.4.1","karma":"^1.2.0","karma-browserify":"^5.1.0","karma-jasmine":"^1.0.2","karma-phantomjs-launcher":"^1.0.1","open":"0.0.5","phantomjs":"^2.1.7"},"scripts":{"test":"gulp test","build":"gulp build","run":"gulp"},"keywords":["guide","guides","guiders","guided","tour","welcome","helper","wizard","highlight","jquery-plugin","jquery","plugin","step-by-step","intro","introduction","ecosystem:jquery"],"docs":"http://ejulianova.github.io/guides/","demo":"http://ejulianova.github.io/guides/","homepage":"http://ejulianova.github.io/guides/","repository":{"type":"git","url":"git+https://github.com/ejulianova/guides.git"},"bugs":{"url":"https://github.com/ejulianova/guides/issues"},"licenses":[{"type":"MIT","url":"https://opensource.org/licenses/MIT"}],"license":"MIT","gitHead":"6327c402e038cef36c0a46f5f43154cff5ec8fd4","_id":"guides@1.2.8","_shasum":"5b20658d391dcc3527970bed2d564f354232d0de","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"ejulianova","email":"elena.julianova@gmail.com"},"dist":{"shasum":"5b20658d391dcc3527970bed2d564f354232d0de","tarball":"https://registry.npmjs.org/guides/-/guides-1.2.8.tgz","integrity":"sha512-6OT345nRpZJngDzw+LI9o5ZBJ9pcqVGuXg2gbEdN3NrwEgl3nAWPrkyiy4umwcbuOYbCEf4VLzlBamX7BH5niQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDVn704MXSN2Idx2KaJ2V8cIsUh88jp4QdJxjkGxevLgIhAIV17g4WMu28mgzAWAcFMZrXOZABFpp2Jx6pxhdmQPnZ"}]},"maintainers":[{"name":"ejulianova","email":"elena.julianova@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/guides-1.2.8.tgz_1479585608116_0.3145385296083987"}},"1.2.9":{"name":"guides","version":"1.2.9","description":"Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.","title":"Guides.js - highlight DOM elements and make step-by-step website tours","author":{"name":"Elena Petrova","email":"elena.julianova@gmail.com","url":"http://ejulianova.github.io/guides/"},"main":"guides.js","dependencies":{"jquery":"~2.1.1"},"devDependencies":{"gulp":"^3.9.1","gulp-banner":"^0.1.3","gulp-browserify":"^0.5.1","gulp-connect":"^5.0.0","gulp-gh-pages":"^0.5.4","gulp-rename":"^1.2.2","gulp-sass":"^2.3.2","gulp-uglify":"^2.0.0","jasmine":"^2.4.1","karma":"^1.2.0","karma-browserify":"^5.1.0","karma-jasmine":"^1.0.2","karma-phantomjs-launcher":"^1.0.1","open":"0.0.5","phantomjs":"^2.1.7"},"scripts":{"test":"gulp test","build":"gulp build","run":"gulp"},"keywords":["guide","guides","guiders","guided","tour","welcome","helper","wizard","highlight","jquery-plugin","jquery","plugin","step-by-step","intro","introduction","ecosystem:jquery"],"docs":"http://ejulianova.github.io/guides/","demo":"http://ejulianova.github.io/guides/","homepage":"http://ejulianova.github.io/guides/","repository":{"type":"git","url":"git+https://github.com/ejulianova/guides.git"},"bugs":{"url":"https://github.com/ejulianova/guides/issues"},"licenses":[{"type":"MIT","url":"https://opensource.org/licenses/MIT"}],"license":"MIT","gitHead":"97ecd7540b6fd514322250b3d8ab3195b00fd23b","_id":"guides@1.2.9","_shasum":"b8d43f77f744421162b85f60742abde6624cd057","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.6.0","_npmUser":{"name":"ejulianova","email":"elena.julianova@gmail.com"},"dist":{"shasum":"b8d43f77f744421162b85f60742abde6624cd057","tarball":"https://registry.npmjs.org/guides/-/guides-1.2.9.tgz","integrity":"sha512-6JKJTdHMVWdZXr1kk050qt7jvgkOfS2DrZIFute4XhQmnveX6Mbs6PBfLmyb0hhG41AKb0JGy2hW609YDXoeKg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGL3J5L6+M0lrNTiea6jhs9fSmqXR1p2Vz/zXe6V2EQjAiAuhbNadzarF1gLn8CaSmQh8EgTAMkTyQarNr527JNgFg=="}]},"maintainers":[{"name":"ejulianova","email":"elena.julianova@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/guides-1.2.9.tgz_1479586669966_0.11058962158858776"}}},"readme":"guides.js\n======\nGuides.js is a lightweight javascript library for making guided website tours. It finds the element you want to highlight, creates a guide element using the html you specified in the configuration options and connects the guide and the highlighted element with an svg arrow.\n\n#Demo\n\n[http://ejulianova.github.io/guides/](http://ejulianova.github.io/guides/)\n\n#Getting started\n\nOnce you have downloaded the source, simply include guides.css in the head of your page:\n\n```html\n<head>\n\t...\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"guides.css\" >\n</head>\n```\n\nand guides.js in your page scripts section. Make sure you include it after jquery:\n\n```html\n\t...\n\t<script type=\"text/javascript\" src=\"jquery.js\" >\n\t<script type=\"text/javascript\" src=\"guides.js\" >\n</body>\n```\n\nNote that you can import guides.scss and compile it togerther with your website styles if you are using sass.\n\n#Docs\n\n##Dependencies\n\nGuides.js depends on jquery, so you need to make sure you include jquery first.\n\n##Initialization\n\nGuides.js is a jquery plugin so it can be initialized on an element, that will \"trigger\" the guided tour:\n\n```javascript\n$('#demo').guides({\n\tguides: [{\n\t\telement: $('.navbar-brand'),\n\t\thtml: 'Welcome to Guides.js'\n\t}, {\n\t\telement: $('.navbar'),\n\t\thtml: 'Navigate through guides.js website'\n\t}, {\n\t\telement: $('#demo'),\n\t\thtml: 'See how it works'\n\t}, {\n\t\telement: $('#download'),\n\t\thtml: 'Download guides.js'\n\t}, {\n\t\telement: $('#getting-started'),\n\t\thtml: 'Check out how to get started with guides.js'\n\t}, {\n\t\telement: $('#docs'),\n\t\thtml: 'Read the docs'\n\t}]\n});\n```\nNow the tour will start everytime $('#demo') element is clicked.\n\nIf you want to manually start the tour you can do the following:\n\n```javascript\nvar guides = $.guides({\n\tguides: [{\n\t\t\thtml: 'Welcome to Guides.js'\n\t\t}, {\n\t\t\telement: $('.navbar'),\n\t\t\thtml: 'Navigate through guides.js website'\n\t\t}, {\n\t\t\telement: $('#demo'),\n\t\t\thtml: 'See how it works'\n\t\t}, {\n\t\t\telement: $('#download'),\n\t\t\thtml: 'Download guides.js'\n\t\t}, {\n\t\t\telement: $('#getting-started'),\n\t\t\thtml: 'Check out how to get started with guides.js'\n\t\t}, {\n\t\t\telement: $('#docs'),\n\t\t\thtml: 'Read the docs'\n\t\t}]\n\t});\nguides.start();\n````\n\n##Configuration options\n\nThe default options are as follows:\n\n```javascript\n{\n\tdistance: 100,\n\tcolor: '#fffff',\n\tguides: []\n}\n```\n\n* __distance__ _number_ - distance between the guide text and the element that it is related to\n* __color__ _string_ - the guides arrows and text default color\n* __guides__ _array of objects_ - the list of guides\n\n###The guides array\n\nA guide object looks like this:\n\n```javascript\n{\n\telement: $('.navbar-brand'),\n\thtml: 'Welcome to Guides.js',\n\tcolor: '#fff'\n}\n```\n\n* __element__ (optional) _jquery element or string_ -  the element (or selector) you want to highlight; if omitted the guide will be centered;\n* __html__ (required) _string_ - this is the content of the tip: you can enter plain text or markup\n* __color__ (optional) _string_ - the guide arrow and text color (falls back to the default color if not specified)\n* __render__ (optional) _function_ - a callback function that is called before guide is rendered\n\n##Methods\n\n* __start__ $('#demo').guides('start');\n* __end__ $('#demo').guides('end');\n* __next__ $('#demo').guides('next');\n* __prev__ $('#demo').guides('prev');\n* __destroy__ $('#demo').guides('destroy');\n* __setOptions__ $('#demo').guides('setOptions', options);\n\n##Events\n\n* __start__ $('#demo').guides({start: onStartFunction});\n* __end__ $('#demo').guides({end: onStartFunction});\n* __next__ $('#demo').guides({next: onNextFunction});\n* __prev__ $('#demo').guides({prev: onPrevFunction});\n* __render__ $('#demo').guides({render: onRenderFunction});\n* __destroy__ $('#demo').guides({destroy: onDestroyFunction});\n\n#Download\n\nThe source is availabe on github: https://github.com/epetrova/guides/:\n\n```\ngit clone https://github.com/epetrova/guides.git\n```\n\nAlternatively, you can install using Bower:\n\n```\nbower install guides\n```","maintainers":[{"name":"ejulianova","email":"elena.julianova@gmail.com"}],"time":{"modified":"2022-06-18T16:30:55.926Z","created":"2016-08-13T08:14:48.664Z","1.2.0":"2016-08-13T08:14:48.664Z","1.2.1":"2016-08-13T08:48:49.263Z","1.2.6":"2016-11-06T09:42:27.837Z","1.2.7":"2016-11-07T20:39:41.100Z","1.2.8":"2016-11-19T20:00:08.648Z","1.2.9":"2016-11-19T20:17:50.463Z"},"homepage":"http://ejulianova.github.io/guides/","keywords":["guide","guides","guiders","guided","tour","welcome","helper","wizard","highlight","jquery-plugin","jquery","plugin","step-by-step","intro","introduction","ecosystem:jquery"],"repository":{"type":"git","url":"git+https://github.com/ejulianova/guides.git"},"author":{"name":"Elena Petrova","email":"elena.julianova@gmail.com","url":"http://ejulianova.github.io/guides/"},"bugs":{"url":"https://github.com/ejulianova/guides/issues"},"license":"MIT","readmeFilename":"README.md"}