Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Gordon Koo committed Jul 20, 2012
0 parents commit c6f6b98
Show file tree
Hide file tree
Showing 8 changed files with 9,962 additions and 0 deletions.
15 changes: 15 additions & 0 deletions css/hopscotch.less
@@ -0,0 +1,15 @@
@import "util.less";

@anim-duration: .5s;

#hopscotch-bubble {
background-color: #eee;
border: 1px solid #000;
padding: 20px;
position: absolute;
z-index: 999999;

&.animate {
.transition('top, left', @anim-duration, ease-in-out);
}
}
21 changes: 21 additions & 0 deletions css/util.less
@@ -0,0 +1,21 @@
.transition (@property, @duration, @timing) {
-moz-transition-property: @property;
-moz-transition-duration: @duration;
-moz-transition-timing-function: @timing;

-ms-transition-property: @property;
-ms-transition-duration: @duration;
-ms-transition-timing-function: @timing;

-o-transition-property: @property;
-o-transition-duration: @duration;
-o-transition-timing-function: @timing;

-webkit-transition-property: @property;
-webkit-transition-duration: @duration;
-webkit-transition-timing-function: @timing;

transition-property: @property;
transition-duration: @duration;
transition-timing-function: @timing;
}
147 changes: 147 additions & 0 deletions index.html
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/hopscotch.less" rel="stylesheet/less"></link>
<!--
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"></link>
-->
<script src="js/less-1.3.0.min.js"></script>
<style>
body {
font-family: Helvetica, Arial;
}
#pageTitle {
text-align: center;
}
#debug {
background-color: #fff;
border: 5px solid #000;
padding: 20px;
position: fixed;
top: 0;
right: 0;
}
.img-container {
text-align: center;
}
</style>
</head>
<body>
<h1 id="pageTitle">My Test Page</h1>
<div id="content">
<h2 id="subheading" class="one two three">Content</h2>
<ul id="my-list">
<li>Welcome to my hopscotch test page</li>
<li>Welcome to my hopscotch test page</li>
<li>Welcome to my hopscotch test page</li>
<li>Welcome to myWelcome to myWelcome to myWelcome to my Welcom Welcom Welcom Welcom Welcom Welcome to my <a href="#" id="tooltiptest" title="hello tooltip">hopscotch</a> test page</li>
</ul>
<div id="spiderman" class="img-container">
<img src="http://i.imgur.com/0O8k3.png">
</div>
<div id="python" class="img-container">
<img src="http://i.imgur.com/mIgyw.jpg">
</div>
<div id="mission" class="img-container">
<img src="http://cdn.theatlanticcities.com/img/upload/2012/07/19/20120719-mission1/largest.jpg">
</div>
</div>
<div id="debug">
<input id="startBtn" type="button" value="Start">
<input id="prevStepBtn" type="button" value="Prev">
<input id="nextStepBtn" type="button" value="Next">
<input id="scrollTopBtn" type="button" value="Alert Scroll Top">
</div>
<!--
<script src="js/jquery-1.7.2.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js""></script>
<script src="bootstrap/js/bootstrap-popover.js""></script>
-->
<script src="js/hopscotch.js"></script>
<script>
var hopscotch = hopscotchManager.getInstance();
/*
tours = [
{
id: 'hello-hopscotch',
steps: [
{
title: 'Here\'s my first step.',
content: 'Here is the content. Here is a <a href="http://www.google.com">link</a>.',
targetSelector: '#subheading',
orientation: 'bottom'
},
{
title: 'Here\'s my second step.',
content: 'Here is the content.',
targetSelector: '#my-list li',
orientation: 'top',
width: 320,
height: 480
},
{
title: 'Spider-man',
content: 'Here are some window cleaners dressed as spider-man',
targetSelector: '#spiderman img',
orientation: 'left'
},
{
title: 'Python decorator',
content: 'Here\'s an example of a python decorator',
targetSelector: '#python img',
orientation: 'right'
},
{
title: 'Mission district',
content: 'Some sort of sound heat map in the mission?',
targetSelector: '#mission img',
orientation: 'top',
xOffset: 30
}
]
}
];
hopscotch.setOptions({
animate: true
});
//hopscotch.startTour(tours[0]);
if (document.body.addEventListener) {
document.getElementById('startBtn').addEventListener('click', function() {
hopscotch.startTour(tours[0]);
});
document.getElementById('prevStepBtn').addEventListener('click', function() {
hopscotch.prevStep();
});
document.getElementById('nextStepBtn').addEventListener('click', function() {
hopscotch.nextStep();
});
}
else if (document.body.attachEvent) {
document.getElementById('startBtn').attachEvent('onclick', function() {
hopscotch.startTour(tours[0]);
});
document.getElementById('prevStepBtn').attachEvent('onclick', function() {
hopscotch.prevStep();
});
document.getElementById('nextStepBtn').attachEvent('onclick', function() {
hopscotch.nextStep();
});
document.getElementById('scrollTopBtn').attachEvent('onclick', function() {
alert(document.body.scrollTop);
});
}
*/
</script>
<!--
<script>
$('#tooltiptest').popover({
title: "hello tooltip",
content: "testing",
placement: 'right'
});
</script>
-->
</body>
</html>

0 comments on commit c6f6b98

Please sign in to comment.