/*
* jQuery Joyride Plugin 1.0.3
* 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': 'top', // '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': true, // 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
'postRideCallback': $.noop, // A method to call once the tour closes (canceled or complete)
'postStepCallback': $.noop // A method to call after each step
};
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 = timerIndicatorTemplate;
}
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).data('id'));
} else {
$(options.tipContainer).append(tipTemplate(tipClass, index, buttonText, self));
}
};
if(!settings.cookieMonster || !$.cookie(settings.cookieName)) {
tipContent.each(function(index) {
var buttonText = $(this).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]).data('id'),
parentElement = $('#' + parentElementID),
opt = {};
// Parse the options string
($(tipContent[count]).data('options') || ':').split(';')
.map(function (s) {
var p = s.split(':');
if (p.length == 2) opt[p[0].trim()] = p[1].trim();
});
options = $.extend(options, opt); // Update options and settings
settings = $.extend(settings, opt);
while (parentElement.offset() === null) {
count++;
skipCount++;
((tipContent.length - 1) > prevCount) ? prevCount++ : prevCount;
parentElementID = $(tipContent[count]).data('id'),
parentElement = $('#' + parentElementID);
if ($(tipContent).length < count)
break;
}
var windowHalf = Math.ceil($(window).height() / 2),
currentTip = $('#joyRidePopup' + count),
currentTipPosition = parentElement.offset(),
currentParentHeight = parentElement.outerHeight(),
currentTipHeight = currentTip.outerHeight(),
nubHeight = Math.ceil($('.joyride-nub').outerHeight() / 2),
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: $('.joyride-timer-indicator-wrap')
.width()}, 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: $('.joyride-timer-indicator-wrap')
.width()}, settings.timer);
} else {
currentTip.fadeIn(settings.tipAnimationFadeSpeed);
}
}
// ++++++++++++++++++
// Tip Location
// ++++++++++++++++++
if (settings.tipLocation == "bottom") {
currentTip.offset({top: (currentTipPosition.top + currentParentHeight + nubHeight),
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 + nubHeight) - bodyOffset.top),
left: (currentTipPosition.left - bodyOffset.left)});
currentTip.children('.joyride-nub').addClass('top').removeClass('bottom');
} else {
currentTip.offset({top: ((currentTipPosition.top) - (currentTipHeight + bodyOffset.top + nubHeight)),
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 });
}
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 if ((tipContent.length - 1) > prevCount) {
prevCount++;
}
if (settings.postStepCallback != $.noop) {
settings.postStepCallback(prevCount);
}
}
if (!settings.inline || !settings.cookieMonster || !$.cookie(settings.cookieName)) {
$(window).resize(function() {
var parentElementID = $(tipContent[prevCount]).data('id'),
currentTipPosition = $('#' + parentElementID).offset(),
currentParentHeight = $('#' + parentElementID).outerHeight(),
currentTipHeight = $('#joyRidePopup' + prevCount).outerHeight(),
nubHeight = Math.ceil($('.joyride-nub').outerHeight() / 2);
if (settings.tipLocation == "bottom") {
$('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top + currentParentHeight + nubHeight),
left: currentTipPosition.left});
} else if (settings.tipLocation == "top") {
if (currentTipPosition.top <= currentTipHeight) {
$('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top + nubHeight + currentParentHeight),
left: currentTipPosition.left});
} else {
$('#joyRidePopup' + prevCount).offset({top: ((currentTipPosition.top) - (currentTipHeight + nubHeight)),
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();
if (settings.postRideCallback != $.noop) {
settings.postRideCallback();
}
}
$('.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();
}
});
});
};
// +++++++++++++++++++++++++++++
// 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;
};
})(jQuery);
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div>
<h1 id="numero1">はじめに</h1>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="numero2">Twitter</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="numero3">Facebook</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="numero4">google+</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="numero5">
<h2>どうぞよろしくです！</h2>
<p style="padding:20px 0px;"><a href="https://twitter.com/s56bouya" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-show-screen-name="true">@s56bouyaをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=352152184854708";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like-box href="http://www.facebook.com/imamura.tetsuya" width="610" height="292" data-border-color="#aaaaaa" show_faces="true" stream="false" header="true"></fb:like-box>
<p style="padding:20px 0px;">
<!-- Place this tag where you want the badge to render -->
<div class="g-plus" data-css="border:none;" data-href="https://plus.google.com/103773364658434530979" data-width="300" data-height="131" data-theme="light">
</div>
</p>
</div>
<!-- Tip Content -->
<ol id="joyRideTipContent">
<li data-id="numero1" data-text="スタート！" class="custom">
<p>サンプルで、僕のtwitter,facebook,google+アカウントをご紹介します。</p>
<h3>スタートを押してください。</h3>
</li>
<li data-id="numero2" data-text="→ Facebookではこんな感じです">
<h2>Twitter</h2>
<p>twitterでいろんな方と交流させていただいてます。ブログの更新情報もランダムでツイートします。最近はtwitterにいることも多くなってきて、つぶやきも徐々に多くなってきました。</p>
<p><a href="https://twitter.com/s56bouya" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-show-screen-name="true">@s56bouyaをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
</li>
<li data-id="numero3" data-text="→ Google+はというと・・・" data-options="tipLocation:top;tipAnimation:fade">
<h2>Facebook</h2>
<p>最近始めました。結構楽しく使っています。「いいね！」を貰うたびこっそり喜んでいます。</p>
<p>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=352152184854708";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/imamura.tetsuya" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>
</p>
</li>
</li>
<li data-id="numero4" data-text="というわけでして・・・">
<h2>Google+</h2>
<p>何だかんだで気になってちらちら見ています。コメントも積極的にしていますかね・・・</p>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="none" data-href="http://www.imamura.biz/blog/"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>
</li>
<li data-id="numero5" data-text="おわり">
<h2>SNSのどこかにいます</h2>
</li>
</ol>
<!-- Run the plugin -->
<script type="text/javascript">
$(window).load(function() {
$(this).joyride();
});
</script>
/* 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;
}