From 32af391ec3b2aaf084272285c50e267f98b72098 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Thu, 6 Sep 2012 11:32:47 -0700 Subject: [PATCH] update demo page --- css/hopscotch.css | 4 ++-- css/hopscotch.less | 2 ++ index.html | 39 ++++++++++++++++++++++++++++++++---- js/debug.js | 5 ++--- js/exampletour.js | 49 ++++++++++++++++++++++++---------------------- secondpage.html | 5 +++-- 6 files changed, 70 insertions(+), 34 deletions(-) diff --git a/css/hopscotch.css b/css/hopscotch.css index 50b2a4d2..d08771bc 100644 --- a/css/hopscotch.css +++ b/css/hopscotch.css @@ -7,8 +7,8 @@ div#hopscotch-bubble{background-color:#ffffff;border:6px solid #000000;border:6p div#hopscotch-bubble.invisible{opacity:0;} div#hopscotch-bubble.hide,div#hopscotch-bubble .hide,div#hopscotch-bubble .hide-all{display:none;} div#hopscotch-bubble h3,div#hopscotch-bubble #hopscotch-bubble-number{font-size:18px;} -div#hopscotch-bubble h3{font-weight:bold;margin:0 15px 0 0;padding:0;} -div#hopscotch-bubble #hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;}div#hopscotch-bubble #hopscotch-bubble-container p{line-height:17px;margin:10px 0;padding:0;} +div#hopscotch-bubble h3{font-family:Helvetica,Arial;font-weight:bold;margin:0 15px 0 0;padding:0;} +div#hopscotch-bubble #hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;}div#hopscotch-bubble #hopscotch-bubble-container p{font-family:Helvetica,Arial;line-height:17px;margin:10px 0;padding:0;} div#hopscotch-bubble #hopscotch-bubble-content{margin:0 0 0 40px;} div#hopscotch-bubble #hopscotch-bubble-close{color:#000;background:transparent url(../img/sprite_li.png) -200px -100px no-repeat;display:block;margin:15px 10px 0 0;position:absolute;text-decoration:none;text-indent:-9999px;width:10px;height:10px;top:0;right:0;}div#hopscotch-bubble #hopscotch-bubble-close.hide,div#hopscotch-bubble #hopscotch-bubble-close.hide-all{display:none;} div#hopscotch-bubble #hopscotch-bubble-number{background:transparent url(../img/sprite_li.png) 0 0 no-repeat;color:#fff;display:block;float:left;line-height:33px;margin:0 10px 0 0;text-align:center;width:30px;height:30px;} diff --git a/css/hopscotch.less b/css/hopscotch.less index 100e3ae4..64184ae5 100644 --- a/css/hopscotch.less +++ b/css/hopscotch.less @@ -52,6 +52,7 @@ div#hopscotch-bubble { } h3 { + font-family: @bubbleFontFamily; font-weight: bold; margin: 0 @bubblePadding 0 0; padding: 0; @@ -63,6 +64,7 @@ div#hopscotch-bubble { -webkit-font-smoothing: antialiased; /* to fix text flickering */ p { + font-family: @bubbleFontFamily; line-height: 17px; margin: 10px 0; padding: 0; diff --git a/index.html b/index.html index b305810e..e5d25c04 100644 --- a/index.html +++ b/index.html @@ -19,13 +19,19 @@ background-color: #fff; border: 5px solid #000; padding: 20px; - position: absolute; + position: fixed; top: 0; right: 0; + z-index: 10; } #debug h3 { margin: 10px 0; } + #debug-output, + #debug-output p { + margin: 0; + padding: 0; + } .img-container { text-align: center; } @@ -81,21 +87,46 @@

Tour Options


+
+
+ + diff --git a/js/debug.js b/js/debug.js index 544f5ffc..6cff084e 100644 --- a/js/debug.js +++ b/js/debug.js @@ -67,8 +67,8 @@ for (i = 0, len = booleanControls.length; i < len; i++) { } }()); -// GO TO STEP NUM (function() { + // GO TO STEP NUM var gotobtn = document.getElementById('gotobtn'); addClickListener(gotobtn, function() { var gototext = document.getElementById('gototext'); @@ -79,8 +79,7 @@ for (i = 0, len = booleanControls.length; i < len; i++) { // START TOUR // ========== addClickListener(document.getElementById('startBtn'), function() { - hopscotch.loadTour(tour); - hopscotch.startTour(); + hopscotch.startTour(tour); }); // ======== diff --git a/js/exampletour.js b/js/exampletour.js index b0f2ef0b..3a127526 100644 --- a/js/exampletour.js +++ b/js/exampletour.js @@ -7,17 +7,10 @@ var tour = { target: 'subheading', orientation: 'bottom', arrowOffset: 30, + nextOnTargetClick: true, onNext: function() { document.getElementById('pageTitle').style.color = '#f00'; - }, - }, - { - title: 'Mission district', - content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!', - target: 'mission', - orientation: 'top', - xOffset: 100, - arrowOffset: 100 + } }, { title: 'Debug controls', @@ -28,19 +21,29 @@ var tour = { height: 480, showSkip: true, fixedElement: true, - xOffset: 20, + //xOffset: 20, zindex: 15, - delay: 1000, + showPrevButton: true, + showNextButton: true, + delay: 5000, onPrev: function() { document.getElementById('pageTitle').style.color = '#000'; } }, + { + title: 'Mission district', + content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!', + target: 'mission', + orientation: 'top', + xOffset: 100, + arrowOffset: 100 + }, { title: 'Cool wave', content: 'This is a colorful wave. Here is the the page where I found it.', target: 'wave', orientation: 'bottom', - width: 500, + width: 500 //xOffset: -50, //arrowOffset: 400, //showPrevButton: false @@ -77,14 +80,12 @@ var tour = { xOffset: 200 } ], - animate: false, + //animate: true, //smoothScroll: false, //showCloseButton: false, - //scrollTopMargin: 200, - showPrevButton: true, - showNextButton: true, + scrollTopMargin: 50, arrowWidth: 20, - scrollDuration: 500, + //scrollDuration: 2000, cookieName: 'li_hs', skipIfNoElement: true, onNext: function(tourId, idx) { @@ -98,16 +99,18 @@ var tour = { } }, onPrev: function(tourId, idx) { - console.log('tour prev ' + tourId + ' ' + idx); + printLog('tour prev ' + tourId + ' ' + idx); }, - onStart: function(tourId) { - console.log('tour start ' + tourId); + onStart: function(tourId, idx) { + printLog('tour start ' + tourId + ' and idx is: ' + idx); }, onEnd: function(tourId) { - console.log('tour end ' + tourId); + printLog('tour end ' + tourId); + }, + onShow: function(tourId, idx) { + printLog('showing step: ' + tourId + ' ' + idx); }, onError: function(tourId, idx) { - //alert('DANGER!!! tourId: ' + tourId + ' and idx: ' + idx); var newLi, list = document.getElementById('my-list'); if (list) { @@ -118,7 +121,7 @@ var tour = { } }, onClose: function() { - console.log('closing'); + printLog('closing'); } //i18n: { ////nextBtn: 'Forward', diff --git a/secondpage.html b/secondpage.html index b2703c15..b7688523 100644 --- a/secondpage.html +++ b/secondpage.html @@ -16,9 +16,10 @@

Second Test Page