diff options
| author | raylu <raylu@mixpanel.com> | 2011-11-16 00:15:03 -0800 |
|---|---|---|
| committer | raylu <raylu@mixpanel.com> | 2011-11-16 00:15:03 -0800 |
| commit | e876ad1ee95b3325f5ea249568d185d12a01d644 (patch) | |
| tree | 091065eeaeb0301afc86b2ffcf016a76045f18e2 | |
| parent | f960f60b257b9a47405ed91f282a5e9ac182b668 (diff) | |
| download | pathery-e876ad1ee95b3325f5ea249568d185d12a01d644.tar.xz | |
flashing for go button, fix flashing interval
| -rw-r--r-- | css/tutorial.css | 21 | ||||
| -rw-r--r-- | pages/tutorial.php | 23 |
2 files changed, 34 insertions, 10 deletions
diff --git a/css/tutorial.css b/css/tutorial.css index 41a2ae4..d0e3157 100644 --- a/css/tutorial.css +++ b/css/tutorial.css @@ -38,10 +38,19 @@ a.next.disabled, a.next.disabled:hover { display: none; } -.flash { - background-color: #a95 !important; - transition:background .3s !important; - -webkit-transition:background .3s !important; - -o-transition:color .3s !important; - -moz-transition:color .3s !important; +a.flash { + background-color: #a95; +} +input.flash { + background-color: #5a9; +} +input[onclick="doSend(1)"] { + border-radius: 3px; + border: 1px solid #555; +} +a.flash, input.flash, input[onclick="doSend(1)"] { + transition:background .3s; + -webkit-transition:background .3s; + -o-transition:color .3s; + -moz-transition:color .3s; } diff --git a/pages/tutorial.php b/pages/tutorial.php index 5e582c6..15a7c83 100644 --- a/pages/tutorial.php +++ b/pages/tutorial.php @@ -13,7 +13,6 @@ topbar($Links); <script>
isChallenge = true;
function challengeGo(mapid) {
- console.log('called with ', mapid);
var moves = mapjson[mapid].moves;
switch (mapid) {
@@ -113,7 +112,23 @@ function startChallenge(mapid) { switch (mapid) {
case 1:
updateDsp(1, 'instructions', '<p>The point of this game is to create the longest <i>path</i> between the start and the finish.</p><p>Press Go!</p>');
- flashelement('1,btn', 10, null, 400);
+ var goBtn = document.getElementById('1,btn');
+ var interval1 = setInterval(function() {
+ goBtn.className += ' flash';
+ }, 1200),
+ interval2;
+ setTimeout(function() {
+ interval2 = setInterval(function() {
+ goBtn.className = goBtn.className.replace(' flash', '');
+ }, 1200);
+ }, 600);
+ var prevHandler = goBtn.onclick;
+ goBtn.onclick = function() {
+ clearInterval(interval1);
+ clearInterval(interval2);
+ goBtn.className = goBtn.className.replace(' flash', '');
+ prevHandler.apply(this, arguments);
+ }
break;
case 2:
updateDsp(1, 'instructions', "<p>Let's start off simple;</p><p>Start by pressing 'Go!' first.</p>");
@@ -178,8 +193,8 @@ TutorialView.prototype.unlock = function(n) { tv.nextbtn.className += ' flash';
}, 1200);
setTimeout(function() {
- this.interval2 = setInterval(function() {
- tv.nextbtn.className = tv.nextbtn.className.replace('flash', '');
+ tv.interval2 = setInterval(function() {
+ tv.nextbtn.className = tv.nextbtn.className.replace(' flash', '');
}, 1200);
}, 600);
}
|