Previous: Great moments in philately (177)
Next: #class talk tomorrow (161)
Jikijitsu
Post #1467 • March 17, 2010, 8:20 AM • 17 Comments
A new comic at The Moon Fell on Me, now with enhanced Web 2.0 goodness: click-and-drag scrolling, page-right and -left from the keyboard, and a help menu. After several months of struggle, jQuery finally clicked for me yesterday.
It's not perfect yet, and I'd really appreciate it if someone wants to help troubleshoot the code. For reasons quite mysterious to me, hitting the Close button in div#help causes the scroll bar to reset to the left. When div#help is displayed, page-left and page-right return the right final result, but without the animation. Moving the scroll bar manually, like you used to for these long horizontal comics, occasionally causes the images to spaz back and forth, but it just as often works fine; there's probably some way to disable the panScreen behavior on mousemove when the user clicks down on the scroll bar, but I couldn't figure out how to write that. Otherwise it works as advertised.
A jikijitsu is the timekeeper in a Zen retreat, who is often up and about attending to the needs of the room. In sanghas where they use the Zen stick, the Jikijitsu is the one administering the blows. This past weekend I did a one-day retreat at the Cambridge Zen Center under the direction of a student of Sasaki Roshi, who amazingly is 103 years old and still leading practice at the Mount Baldy Zen Center. My teacher in Miami was a student of Gesshin Prabhasa Dharma, who became a nun under Sasaki, so it was a bit of a homecoming.
2.
March 17, 2010, 7:33 AM
I should have been more specific - clicking the close button resets the screen, but calling it from the keyboard does not. I'm on FF 3.5.8 on Ubuntu - I'll see if there's an update.
Oh, and thank you.
3.
March 17, 2010, 10:41 AM
var currentX;
4.
March 17, 2010, 11:05 AM
Sure, declaring variable currentX. What's the issue?
5.
March 17, 2010, 11:28 AM
Great comic. I like everything about it.
6.
March 17, 2010, 11:43 AM
Something's uninitialized
7.
March 17, 2010, 12:15 PM
Totally not the problem, there, ?uestlove.
8.
March 17, 2010, 12:20 PM
I think the trouble is that a click on the close button is also a mousedown event.
9.
March 17, 2010, 1:07 PM
Got it. Solved a couple of other hiccups as well. This might help the animation, too, although that looks okay from here.
One thing at a time. When you click on "close" it resets the scrolling. This is because default behavior when clicking an anchor tag is to reset the scrolling. You need to shut this off. You did this already in your other events but missed this one:
$("#close").click(function(e) {
e.preventDefault();
$("#help").fadeOut("slow");
});
You need that e.preventDefault() to keep the event e from resetting the scrollbars.
Next up: You have the mousedown and mouseup events hooked to the document. I think you should throw a div around the strip itself:
and change your jQuery thusly:
$("#strip").mousedown(function(e) {
That has two salutary effects. First it cleans up the scrolling animation so it's smoother, since now the browser doesn't think it's moving the help div, which it then has to re-render, which is floated anyway so it stays in the same place. Second, it fixes a bug you might not have even noticed, which is that the click-on-scrollbar event (where you page through by clicking on the "empty" portion of the scrollbar, which I do all the time) wasn't scrolling. With this change, it will.
10.
March 17, 2010, 1:11 PM
Funny that your host won't allow certain words in case they're injection attack attempts, but it happily allows wholesale jQuery code. And then eats the HTML.
That HTML that's invisible above should read as follows:
11.
March 17, 2010, 1:12 PM
Oh bother. You know, I checked the preview on that one. It previewed fine. I'll e-mail you the HTML changes.
12.
March 17, 2010, 5:22 PM
Chris, thank you for that.
Throwing e.preventDefault() into the close button worked like a champ. The default behavior for links is to reset the scrollbar? You think you know everything about HTML...
The trick with #strip, though, solves the problems you mention but it breaks click-and-drag scrolling. At first I thought it was because a div around a set of absolutely positioned elements has a height of zero and a width of the screen, so I styled the width manually and threw this into the code:
$("#strip").css("height",screen.height);
That made the div more or less the right size (it probably should be screen.availHeight) but click-and-drag still didn't work.
13.
March 17, 2010, 6:17 PM
Hm. It didn't break click-and-drag for me. Let me check again. [loads page] Yup, it's fine here. Also on IE 8, although it's hinky there in a bunch of ways.
Are you using Firebug? I recommend fooling around with Firebug and console.log(message_string). In order to make that work you need to add this line to the top of your js file, above the jQuery initialization function (due to a bug in Firebug (!)):
console.log();
Then sprinkle your code with console.log() calls and watch the console tab in Firebug. See what's going wrong. Maybe the mousedown is going to the wrong element.
By the way, when I say something like "the default behavior is to reset the thingamabob" it's not as if I knew that off the top of my head. I Googled various combinations of the problems I appeared to be having, followed the leads, and tested code changes. I know almost nothing a googliori.
14.
March 17, 2010, 6:20 PM
Incidentally, all you artist types reading this: This is how it's done, baby!
15.
March 17, 2010, 6:42 PM
Are you guys done talking dirty? Nice panel Franklin. Easy to pick you out of the lineup.
16.
March 17, 2010, 6:48 PM
Well, that sort of works. If you click on the images, you get dragging powers. If you click in between the images, you don't. (Which makes sense, because body is not a child of #strip.) Also, if you click, drag outside the window itself, and release, mouseup never registers and the cursor comes back into the window with unwanted dragging powers.
The Firebug error console seems to be working without console.log(). It has been a pain anyway, because half the time the error shows up somewhere in jQuery instead of my code. Time to throw down some breakpoints.
By the way, the rest of "You think you know everything about HTML..." is "...and then you learn that clicking links resets the scroll bar by default because it bites your hiney." It could have been read more as a scold - sorry about that.
And yeah, artist types - this is how it's done.
17.
March 17, 2010, 8:30 PM
You are correct about the between-image clicking. Which is weird, though, since that should be the back of the div. Perhaps if you put in a transparent background? I'll try that.
As far as dragging outside the window, er, I'm not sure there's any hope for that. There might be a way to shut off dragging upon loss of focus or something. Ah, here's a page on that.
Firebug's console works fine but if you want to send your own messages back, you use console.log("I'm at the call to mousedown!") or whatever. console.log also uses a printf-like syntax so you can say
console.log("currentX = %d",currentX);
or
console.log("current object = %o",this);
Helpful just to peg where you are. I usually use JavaScript's alert() for this, but alert() totally screws up mouse operations.
I didn't take your line as a scold at all. I just wanted to be clear that I'm not some kind of savant. I'm just good at legwork. And I'm persistent.
1.
Chris Rywalt
March 17, 2010, 7:29 AM
Lovely comic.
I'm getting the animation whether the help is up or not. Firefox 3.6 on PC. I'm also seeing the page reset when closing the help but -- and this is weird -- only when mouse clicking. When I use the keyboard shortcuts, it just comes and goes perfectly without perturbing the comic position.
I'll play with it a bit if I get time today.