Permalink
Browse files

Initial commit.

  • Loading branch information...
0 parents commit acc6aeccbf3531a6642b7570919fc4add97e0690 @mrsweaters mrsweaters committed Oct 12, 2011
Showing with 756 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +115 −0 demo/demo-style.css
  3. +113 −0 demo/demo.html
  4. +80 −0 global.css
  5. +151 −0 joyride-1.0.css
  6. +1 −0 jquery-1.6.2.min.js
  7. +295 −0 jquery.joyride-1.0.js
1 .gitignore
@@ -0,0 +1 @@
+.DS_Store
115 demo/demo-style.css
@@ -0,0 +1,115 @@
+/* These are just the demo styles and these can be removed and Orbit
+will still work like a champ (except any content block needs a background which
+our demo gets from this sheet) */
+
+/* --------------------------------------------------
+ Global Reset & Standards
+ -------------------------------------------------- */
+ html, body { margin: 0; padding: 0; }
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, section { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
+ table { border-collapse: collapse; border-spacing: 0; }
+ ol, ul { list-style: none; }
+
+
+
+/* --------------------------------------------------
+ :: Grid
+ -------------------------------------------------- */
+
+ .container { padding: 40px 20px 0 20px; }
+
+ .row { width: 100%; max-width: 940px; min-width: 727px; margin: 0 auto; }
+ /* To fix the grid into a certain size, set max-width to width */
+ .row .row { min-width: 0px; }
+
+ .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
+ .column:first-child, .columns:first-child { margin-left: 0px; }
+
+ .row .one.columns { width: 4.3%; }
+ .row .two.columns { width: 13%; }
+ .row .three.columns { width: 21.7%; }
+ .row .four.columns { width: 30.4%; }
+ .row .five.columns { width: 39.1%; }
+ .row .six.columns { width: 47.8%; }
+ .row .seven.columns { width: 56.5%; }
+ .row .eight.columns { width: 65.2%; }
+ .row .nine.columns { width: 73.9%; }
+ .row .ten.columns { width: 82.6%; }
+ .row .eleven.columns { width: 91.3%; }
+ .row .twelve.columns { width: 100%; }
+
+ .row .offset-by-one { margin-left: 8.7%; }
+ .row .offset-by-two { margin-left: 17.4%; }
+ .row .offset-by-three { margin-left: 26.1%; }
+ .row .offset-by-four { margin-left: 34.8%; }
+ .row .offset-by-five { margin-left: 43.5%; }
+ .row .offset-by-six { margin-left: 52.2%; }
+ .row .offset-by-seven { margin-left: 60.9%; }
+ .row .offset-by-eight { margin-left: 69.6%; }
+ .row .offset-by-nine { margin-left: 78.3%; }
+ .row .offset-by-ten { margin-left: 87%; }
+ .row .offset-by-eleven { margin-left: 95.7%; }
+
+ img, object, embed { max-width: 100%; }
+ img { -ms-interpolation-mode: bicubic; }
+
+
+ /* Clear the columns automagically */
+ .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+ .row:last-child:after { content: ""; }
+ * html .row, * html .clearfix { height: 1%; }
+ .row, .clearfix { display: inline-block; }
+ .row, .clearfix { display: block; }
+
+
+
+ body { background: #fff; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; text-shadow: 0 0 1px rgba(0,0,0,0.01); color: #555; }
+
+ p {
+ line-height: 1.25;
+ }
+
+ h1 {
+ font-weight: bold;
+ color: #222;
+ font-size: 36px;
+ line-height: 1.5;
+ }
+
+ h2 {
+ font-weight: bold;
+ color: #222;
+ font-size: 28px;
+ line-height: 1.25;
+ }
+
+ h3 {
+ font-weight: bold;
+ color: #222;
+ font-size: 22px;
+ line-height: 1.25;
+ }
+
+ h4 {
+ font-weight: bold;
+ color: #222;
+ font-size: 18px;
+ line-height: 1.25;
+ }
+
+ h1 + a {
+ color: #00baff;
+ text-decoration: none;
+ font-weight: normal;
+ font-size: 20px;
+ }
+
+ a:hover { text-decoration: underline; }
+
+ hr {
+ margin: 20px 0;
+ border: solid 1px #ccc;
+ border-width: 1px 0 0 0;
+ }
+
+
113 demo/demo.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+
+
+
+<!--
+ * Markup for jQuery Joyride Plugin 1.0
+ * www.ZURB.com/playground
+ * Copyright 2011, ZURB
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ -->
+
+
+
+ <head>
+ <meta charset="utf-8" />
+ <title>Joyride Demo</title>
+
+ <!-- Attach our CSS -->
+ <link rel="stylesheet" href="../joyride-1.0.css">
+ <link rel="stylesheet" href="demo-style.css">
+
+ <!-- Attach necessary JS -->
+ <script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../jquery.joyride-1.0.js"></script>
+
+ </head>
+ <body>
+
+ <div class="container">
+ <div class="row">
+ <div class="twelve columns">
+ <h1>ZURB's Joyride Feature Tour Plugin</h1>
+ <a href="http://www.zurb.com/playground/jquery_joyride_feature_tour_plugin">View Docs + Playground for Joyride</a>
+
+ <hr>
+ </div>
+ </div>
+
+ <br><br>
+
+ <div class="row">
+ <div class="six columns">
+ <h2 id="numero1">Point Out Those New Features!</h2>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+ <div class="six columns">
+ <img id="numero3" src="http://placehold.it/430x200">
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="twelve columns">
+ <h3>Get the Most Out of Your App!</h3>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="four columns">
+ <img src="http://placehold.it/280x120">
+ </div>
+ <div class="eight columns">
+ <h3 id="numero2">Customize Each Stop Along the Way</h3>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="six columns">
+ <h4>Make Every Click Count</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+ <div class="six columns">
+ <img src="http://placehold.it/430x200">
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ </div>
+ <!-- Tip Content -->
+ <ol id="joyRideTipContent">
+ <li data-id="numero1" data-text="Next" class="custom">
+ <h2>Stop #1</h2>
+ <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
+ </li>
+ <li data-id="numero2" data-text="Next">
+ <h2>Stop #2</h2>
+ <p>Get the details right by styling Joyride with a custom stylesheet!</p>
+ </li>
+ <li data-id="numero3" data-text="Close">
+ <h2>Stop #3</h2>
+ <p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p>
+ </li>
+ </ol>
+
+ <!-- Run the plugin -->
+ <script type="text/javascript">
+ $(window).load(function() {
+ $(this).joyride();
+ });
+ </script>
+
+
+ </body>
+</html>
80 global.css
@@ -0,0 +1,80 @@
+/* Arfully Masterminded by ZURB */
+
+/* --------------------------------------------------
+ Table of Contents
+-----------------------------------------------------
+:: Reset & Standards
+:: Typography
+:: Links
+:: Lists
+:: Mobile-Friendly Grid
+:: Tables
+:: Misc
+:: Block Grids
+:: Mobile Visbility
+*/
+
+
+ body { background: #fff; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; }
+
+
+/* --------------------------------------------------
+ :: Typography
+ -------------------------------------------------- */
+
+ em { font-style: italic; line-height: inherit; }
+ strong { font-weight: bold; line-height: inherit; }
+ small { font-size: 0.8rem; line-height: inherit; }
+
+
+
+
+/* --------------------------------------------------
+ :: Grid
+ -------------------------------------------------- */
+
+ .container { padding: 0px 20px; }
+
+ .row { width: 100%; max-width: 940px; min-width: 727px; margin: 0 auto; }
+ /* To fix the grid into a certain size, set max-width to width */
+ .row .row { min-width: 0px; }
+
+ .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
+ .column:first-child, .columns:first-child { margin-left: 0px; }
+
+ .row .one.columns { width: 4.3%; }
+ .row .two.columns { width: 13%; }
+ .row .three.columns { width: 21.7%; }
+ .row .four.columns { width: 30.4%; }
+ .row .five.columns { width: 39.1%; }
+ .row .six.columns { width: 47.8%; }
+ .row .seven.columns { width: 56.5%; }
+ .row .eight.columns { width: 65.2%; }
+ .row .nine.columns { width: 73.9%; }
+ .row .ten.columns { width: 82.6%; }
+ .row .eleven.columns { width: 91.3%; }
+ .row .twelve.columns { width: 100%; }
+
+ .row .offset-by-one { margin-left: 8.7%; }
+ .row .offset-by-two { margin-left: 17.4%; }
+ .row .offset-by-three { margin-left: 26.1%; }
+ .row .offset-by-four { margin-left: 34.8%; }
+ .row .offset-by-five { margin-left: 43.5%; }
+ .row .offset-by-six { margin-left: 52.2%; }
+ .row .offset-by-seven { margin-left: 60.9%; }
+ .row .offset-by-eight { margin-left: 69.6%; }
+ .row .offset-by-nine { margin-left: 78.3%; }
+ .row .offset-by-ten { margin-left: 87%; }
+ .row .offset-by-eleven { margin-left: 95.7%; }
+
+ img, object, embed { max-width: 100%; }
+ img { -ms-interpolation-mode: bicubic; }
+
+
+ /* Clear the columns automagically */
+ .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+ .row:last-child:after { content: ""; }
+ * html .row, * html .clearfix { height: 1%; }
+ .row, .clearfix { display: inline-block; }
+ .row, .clearfix { display: block; }
+
151 joyride-1.0.css
@@ -0,0 +1,151 @@
+/* Artfully masterminded by ZURB */
+body {
+ position: relative;
+}
+
+#joyRideTipContent { display: none; }
+
+/* Default styles for the container */
+.joyride-tip-guide {
+ position: absolute;
+ background: #000;
+ background: rgba(0,0,0,0.8);
+ padding: 10px 10px 10px 15px;
+ color: #fff;
+ width: 300px;
+ z-index: 10;
+ font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
+ font-weight: normal;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
+.joyride-tip-guide span.joyride-nub {
+ display: block;
+ position: absolute;
+ left: 22px;
+ width: 0;
+ height: 0;
+ border: solid 14px;
+ border: solid 14px;
+}
+.joyride-tip-guide span.joyride-nub.top {
+ border-top-color: transparent !important;
+ border-left-color: transparent !important;
+ border-right-color: transparent !important;
+ border-bottom-color: #000;
+ border-bottom-color: rgba(0,0,0,0.8);
+ top: -28px;
+ bottom: none;
+}
+.joyride-tip-guide span.joyride-nub.bottom {
+ border-bottom-color: transparent !important;
+ border-left-color: transparent !important;
+ border-right-color: transparent !important;
+ border-top-color: #000;
+ border-top-color: rgba(0,0,0,0.8) !important;
+ bottom: -28px;
+ bottom: none;
+}
+
+
+/* Typography */
+.joyride-tip-guide h1,.joyride-tip-guide h2,.joyride-tip-guide h3,.joyride-tip-guide h4,.joyride-tip-guide h5,.joyride-tip-guide h6 {
+ line-height: 1.25;
+ margin: 0;
+ font-weight: bold;
+ color: #fff;
+}
+.joyride-tip-guide h1 { font-size: 30px; }
+.joyride-tip-guide h2 { font-size: 26px; }
+.joyride-tip-guide h3 { font-size: 22px; }
+.joyride-tip-guide h4 { font-size: 18px; }
+.joyride-tip-guide h5 { font-size: 16px; }
+.joyride-tip-guide h6 { font-size: 14px; }
+.joyride-tip-guide p {
+ margin: 0 0 18px 0;
+ font-size: 14px;
+ line-height: 18px;
+}
+.joyride-tip-guide a {
+ color: rgb(255,255,255);
+ text-decoration: none;
+ border-bottom: dotted 1px rgba(255,255,255,0.6);
+}
+.joyride-tip-guide a:hover {
+ color: rgba(255,255,255,0.8);
+ border-bottom: none;
+}
+
+/* Button Style */
+.joyride-tip-guide .joyride-next-tip:after {
+ clear: both;
+}
+.joyride-tip-guide .joyride-next-tip {
+ width: auto;
+ padding: 6px 18px 4px;
+ font-size: 13px;
+ text-decoration: none;
+ color: rgb(255,255,255);
+ float: left;
+ margin: 0 6px 8px 0px;
+ border: solid 1px rgb(0,60,180);
+ background: rgb(0,99,255);
+ background: -moz-linear-gradient(top, rgb(0,99,255) 0%, rgb(0,85,214) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,99,255)), color-stop(100%,rgb(0,85,214)));
+ background: -webkit-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
+ background: -o-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
+ background: -ms-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063ff', endColorstr='#0055d6',GradientType=0 );
+ background: linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
+ text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
+ -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
+ box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
+}
+.joyride-next-tip:hover {
+ color: rgb(255,255,255) !important;
+ border: solid 1px rgb(0,60,180) !important;
+ background: rgb(43,128,255);
+ background: -moz-linear-gradient(top, rgb(43,128,255) 0%, rgb(29,102,211) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(43,128,255)), color-stop(100%,rgb(29,102,211)));
+ background: -webkit-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
+ background: -o-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
+ background: -ms-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b80ff', endColorstr='#1d66d3',GradientType=0 );
+ background: linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
+}
+
+.joyride-timer-indicator-wrap {
+ width: 50px;
+ height: 3px;
+ border: solid 1px rgba(255,255,255,0.1);
+ position: absolute;
+ right: 17px;
+ bottom: 16px;
+}
+.joyride-timer-indicator {
+ display: block;
+ width: 0;
+ height: inherit;
+ background: rgba(255,255,255,0.25);
+}
+
+.joyride-close-tip {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ color: rgba(255,255,255,0.4) !important;
+ text-decoration: none;
+ font-family: Verdana, sans-serif;
+ font-size: 10px;
+ font-weight: bold;
+ border-bottom: none !important;
+}
+.joyride-close-tip:hover {
+ color: rgba(255,255,255,0.9) !important;
+}
1 jquery-1.6.2.min.js
1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
295 jquery.joyride-1.0.js
@@ -0,0 +1,295 @@
+/*
+ * jQuery Joyride Plugin 1.0
+ * www.ZURB.com/playground
+ * Copyright 2011, ZURB
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+*/
+
+(function($) {
+ $.fn.joyride = function(options) {
+
+ // +++++++++++++++++++
+ // Defaults
+ // +++++++++++++++++++
+ var settings = {
+ 'tipLocation': 'bottom', // 'top' or 'bottom' in relation to parent
+ 'scrollSpeed': 300, // Page scrolling speed in milliseconds
+ 'timer': 0, // 0 = no timer, all other numbers = timer in milliseconds
+ 'startTimerOnClick': false, // true or false - true requires clicking the first button start the timer
+ 'nextButton': true, // true or false to control whether a next button is used
+ 'tipAnimation': 'pop', // 'pop' or 'fade' in each tip
+ 'tipAnimationFadeSpeed': 300, // when tipAnimation = 'fade' this is speed in milliseconds for the transition
+ 'cookieMonster': false, // true or false to control whether cookies are used
+ 'cookieName': 'JoyRide', // Name the cookie you'll use
+ 'cookieDomain': false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
+ 'tipContainer': 'body', // Where will the tip be attached if not inline
+ 'inline': false, // true or false, if true the tip will be attached after the element
+ 'tipContent': '#joyRideTipContent' // What is the ID of the <ol> you put the content in
+ };
+
+ //Extend those options
+ var options = $.extend(settings, options);
+
+ return this.each(function() {
+
+ if ($(options.tipContent).length === 0) return;
+
+ $(options.tipContent).hide();
+
+ var bodyOffset = $(options.tipContainer).children('*').first().position(),
+ tipContent = $(options.tipContent + ' li'),
+ count = skipCount = 0,
+ prevCount = -1,
+ timerIndicatorInstance,
+ timerIndicatorTemplate = '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
+ tipTemplate = function(tipClass, index, buttonText, self) { return '<div class="joyride-tip-guide ' + tipClass + '" id="joyRidePopup' + index + '"><span class="joyride-nub"></span>' + $(self).html() + buttonText + '<a href="#close" class="joyride-close-tip">X</a>' + timerIndicatorInstance + '</div>'; },
+ tipLayout = function(tipClass, index, buttonText, self) {
+ if (index == 0 && settings.startTimerOnClick && settings.timer > 0 || settings.timer == 0) {
+ timerIndicatorInstance = '';
+ } else {
+ timerIndicatorInstance = timerIndicatorInstance;
+ }
+ if (!tipClass) tipClass = '';
+ (buttonText != '') ? buttonText = '<a href="#" class="joyride-next-tip small nice radius yellow button">' + buttonText + '</a>': buttonText = '';
+ if (settings.inline) {
+ $(tipTemplate(tipClass, index, buttonText, self)).insertAfter('#' + $(self).attr('data-id'));
+ } else {
+ $(options.tipContainer).append(tipTemplate(tipClass, index, buttonText, self));
+ }
+ };
+
+ if(!settings.cookieMonster || !$.cookie(settings.cookieName)) {
+
+ tipContent.each(function(index) {
+ var buttonText = $(this).attr('data-text'),
+ tipClass = $(this).attr('class'),
+ self = this;
+
+ if (settings.nextButton && buttonText == undefined) {
+ buttonText = 'Next';
+ }
+ if (settings.nextButton || !settings.nextButton && settings.startTimerOnClick) {
+ if ($(this).attr('class')) {
+ tipLayout(tipClass, index, buttonText, self);
+ } else {
+ tipLayout(false, index, buttonText, self);
+ }
+ } else if (!settings.nextButton) {
+ if ($(this).attr('class')) {
+ tipLayout(tipClass, index, '', self);
+ } else {
+ tipLayout(false, index, '', self);
+ }
+ }
+ $('#joyRidePopup' + index).hide();
+ });
+ }
+
+ showNextTip = function() {
+ var parentElementID = $(tipContent[count]).attr('data-id'),
+ parentElement = $('#' + parentElementID);
+
+ if (parentElement.offset() === null) {
+ count++;
+ skipCount++;
+ prevCount++;
+ parentElementID = $(tipContent[count]).attr('data-id'),
+ parentElement = $('#' + parentElementID);
+ }
+ var windowHalf = Math.ceil($(window).height() / 2),
+ currentTip = $('#joyRidePopup' + count),
+ currentTipPosition = parentElement.offset(),
+ currentParentHeight = parentElement.height() + 10,
+ currentTipHeight = currentTip.height() + 4,
+ tipOffset = 0;
+
+ if (currentTip.length === 0) return;
+
+ if (count < tipContent.length) {
+ if (settings.tipAnimation == "pop") {
+ $('.joyride-timer-indicator').width(0);
+ if (settings.timer > 0) {
+ currentTip.show().children('.joyride-timer-indicator-wrap').children('.joyride-timer-indicator').animate({width: '100%'}, settings.timer);
+ } else {
+ currentTip.show();
+ }
+ } else if (settings.tipAnimation == "fade") {
+ $('.joyride-timer-indicator').width(0);
+ if (settings.timer > 0) {
+ currentTip.fadeIn(settings.tipAnimationFadeSpeed).children('.joyride-timer-indicator-wrap').children('.joyride-timer-indicator').animate({width: '100%'}, settings.timer);
+ } else {
+ currentTip.fadeIn(settings.tipAnimationFadeSpeed);
+ }
+ }
+
+ // ++++++++++++++++++
+ // Tip Location
+ // ++++++++++++++++++
+
+ if (settings.tipLocation == "bottom") {
+ currentTip.offset({top: (currentTipPosition.top + currentParentHeight + 14), left: (currentTipPosition.left - bodyOffset.left)});
+ currentTip.children('.joyride-nub').addClass('top').removeClass('bottom');
+ } else if (settings.tipLocation == "top") {
+ if (currentTipHeight >= currentTipPosition.top) {
+ currentTip.offset({top: (currentTipPosition.top + currentParentHeight + 10 - bodyOffset.top), left: (currentTipPosition.left - bodyOffset.left)});
+ currentTip.children('.joyride-nub').addClass('top').removeClass('bottom');
+ } else {
+ currentTip.offset({top: ((currentTipPosition.top - 4) - (currentParentHeight + currentTipHeight + bodyOffset.top)), left: (currentTipPosition.left - bodyOffset.left)});
+ currentTip.children('.joyride-nub').addClass('bottom').removeClass('top');
+ }
+ }
+
+ // Animate Scrolling when tip is off screen
+ tipOffset = Math.ceil(currentTip.offset().top - windowHalf);
+
+ $("html, body").animate({
+ scrollTop: tipOffset
+ }, settings.scrollSpeed);
+
+ if (count > 0) {
+ if (skipCount > 0) {
+ var hideCount = prevCount - skipCount;
+ skipCount = 0;
+ } else {
+ var hideCount = prevCount;
+ }
+ if (settings.tipAnimation == "pop") {
+ $('#joyRidePopup' + hideCount).hide();
+ } else if (settings.tipAnimation == "fade") {
+ $('#joyRidePopup' + hideCount).fadeOut(settings.tipAnimationFadeSpeed);
+ }
+ }
+
+ // Hide the last tip when clicked
+ } else if ((tipContent.length - 1) < count) {
+ if (skipCount > 0) {
+ var hideCount = prevCount - skipCount;
+ skipCount = 0;
+ } else {
+ var hideCount = prevCount;
+ }
+ if (settings.cookieMonster == true) {
+ $.cookie(settings.cookieName, 'ridden', { expires: 365, domain: settings.cookieDomain });
+ } else {
+ // Do not include cookie
+ }
+ if (settings.tipAnimation == "pop") {
+ $('#joyRidePopup' + hideCount).fadeTo(0, 0);
+ } else if (settings.tipAnimation == "fade") {
+ $('#joyRidePopup' + hideCount).fadeTo(settings.tipAnimationFadeSpeed, 0);
+ }
+ }
+ count++;
+
+ if (prevCount < 0) {
+ prevCount = 0;
+ } else {
+ prevCount++;
+ }
+ }
+ if (!settings.inline) {
+ $(window).resize(function() {
+ var parentElementID = $(tipContent[prevCount]).attr('data-id'),
+ currentTipPosition = $('#' + parentElementID).offset(),
+ currentParentHeight = $('#' + parentElementID).height(),
+ currentTipHeight = $('#joyRidePopup' + prevCount).height();
+ if (settings.tipLocation == "bottom") {
+ $('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top + currentParentHeight + 20), left: currentTipPosition.left});
+ } else if (settings.tipLocation == "top") {
+ if (currentTipPosition.top <= currentTipHeight) {
+ $('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top + currentParentHeight + 20), left: currentTipPosition.left});
+ } else {
+ $('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top - (currentTipHeight + currentParentHeight)), left: currentTipPosition.left});
+ }
+ }
+ });
+ }
+
+ // +++++++++++++++
+ // Timer
+ // +++++++++++++++
+
+ var interval_id = null,
+ showTimerState = false;
+
+ if (!settings.startTimerOnClick && settings.timer > 0){
+ showNextTip();
+ interval_id = setInterval(function() {showNextTip()}, settings.timer);
+ } else {
+ showNextTip();
+ }
+ var endTip = function(e, interval_id, cookie, self) {
+ e.preventDefault();
+ clearInterval(interval_id);
+ if (cookie) {
+ $.cookie(settings.cookieName, 'ridden', { expires: 365, domain: settings.cookieDomain });
+ }
+ $(self).parent().hide();
+ }
+ $('.joyride-close-tip').click(function(e) {
+ endTip(e, interval_id, settings.cookieMonster, this);
+ });
+
+ // When the next button is clicked, show the next tip, only when cookie isn't present
+ $('.joyride-next-tip').click(function(e) {
+ e.preventDefault();
+ if (count >= tipContent.length) {
+ endTip(e, interval_id, settings.cookieMonster, this);
+ }
+ if (settings.timer > 0 && settings.startTimerOnClick) {
+ showNextTip();
+ clearInterval(interval_id);
+ interval_id = setInterval(function() {showNextTip()}, settings.timer);
+ } else if (settings.timer > 0 && !settings.startTimerOnClick){
+ clearInterval(interval_id);
+ interval_id = setInterval(function() {showNextTip()}, settings.timer);
+ } else {
+ showNextTip();
+ }
+ });
+ }); // each call
+ }; // joyride plugin call
+
+
+ // +++++++++++++++++++++++++++++
+ // jQuery Cookie plugin
+ // +++++++++++++++++++++++++++++
+
+ // Copyright (c) 2010 Klaus Hartl (stilbuero.de)
+ // Dual licensed under the MIT and GPL licenses:
+ // http://www.opensource.org/licenses/mit-license.php
+ // http://www.gnu.org/licenses/gpl.html
+ jQuery.cookie = function (key, value, options) {
+
+ // key and at least value given, set cookie...
+ if (arguments.length > 1 && String(value) !== "[object Object]") {
+ options = jQuery.extend({}, options);
+
+ if (value === null || value === undefined) {
+ options.expires = -1;
+ }
+
+ if (typeof options.expires === 'number') {
+ var days = options.expires, t = options.expires = new Date();
+ t.setDate(t.getDate() + days);
+ }
+
+ value = String(value);
+
+ return (document.cookie = [
+ encodeURIComponent(key), '=',
+ options.raw ? value : encodeURIComponent(value),
+ options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+ options.path ? '; path=' + options.path : '',
+ options.domain ? '; domain=' + options.domain : '',
+ options.secure ? '; secure' : ''
+ ].join(''));
+ }
+
+ // key and possibly options given, get cookie...
+ options = value || {};
+ var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
+ return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
+ }; // cookie plugin call
+})(jQuery);

0 comments on commit acc6aec

Please sign in to comment.