Scrollbars, as it turns out, are a bit complicated. I thought this diagram might help.
Visit webkit.org for an extensive list of relevant pseudo elements and classes.
Emergent Trend: Custom Scrollbars
The recent redesigns of maxvoltar.com and orderedlist.com both feature a design subtlety that I haven’t formerly seen in the wild (omitting webkit.org):
Minute as they may seem, the custom scrollbars are a nice touch, offering the designer that much more control over the viewing experience (provided you’re using Chrome or Safari, of course). I’m guessing we’ll start seeing many more sites donning custom scrollbars as we move into 2010.
If you’re interested in how the effect is achieved, here are the relevant bits of CSS for hiding the default scrollbar (extracted from Maxvoltar’s stylesheet):
// the @media stuff is for viewers on mobile devices
html {
overflow: hidden;
}
@media only screen and (max-device-width:480px) {
html {
overflow: auto;
}
}
body {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px; // could be a different value
overflow-y: scroll;
overflow-x: hidden;
}
@media only screen and (max-device-width:480px) {
body {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
overflow: auto;
}
}
Beyond that, it’s just a matter of styling the scrollbars to your liking. Check out Ordered List’s style sheet as a starting point.
For whatever reason, in-page scrollbars don’t play nice with some of Safari’s keyboard shortcuts (command up/down, spacebar), but page up/down still function as expected.
I guess I’ll start counting down the days before this becomes as commonplace and abused as rounded corners. The irony of it all is that Internet Explorer was actually the first to implement scrollbar styling. We’re ten years late to the party.
Update: Looks like Ordered List has removed their custom scrollbar for the time being. I think it might be my fault.
Version 3 of the Compatriot theme is now available with infinite scrolling, keyboard navigation, and music posts with album artwork. Enjoy.
Showtime, the iPhone web app»
Nial Giacomelli has done a bang-up job with Showtime, his web app for keeping track of your favorite TV shows. It’s not fabulous “for a web app”, it’s fabulous period.
John Gruber has two fair and true complaints about it:
- Scrolling (it’s slow even at maximum speed.)
- The ON/OFF toggle switch has to be tapped (instead of the deeply satisfying native ability to slide it as well.)
As someone who’s into iPhone web apps, I’m going to side with Nial and focus on the positive.
The latter problem, the toggle, is fully solvable. There’s no technical reason this can’t be done with Javascript; it’s just not a ton of fun recreating native behaviors (who am I kidding - yes it is, sometimes!) If Nial doesn’t fix this soon, I’ll take a crack at it. But here’s the punchline: when it’s fixed, it’ll be fixed on everyone’s copy of Showtime the next time they launch it. How much would SDK developers give up to gain that ability?
The former problem - scrolling - may be trickier, or even unsolvable (or not!) It’s a bummer. But, I can live with it. I know Nial’s developing this with a pocket knife and a can of plumber’s putty, so I’m granting him a generous handicap.
iPhone-style checkboxes with touch events are entirely feasible. There’s even a jQuery plugin available to do just this. I’ve never used it in a project myself, but their demo page works as expected on my phone, dragging and all.
Oh, and Showtime’s not so bad either.
Via: Neven Mrgan's tumbl
If you use Espresso and don't have TEA installed...»
You, sir, are at a loss. The inclusion of Zen Coding alone makes authoring markup a joy.
There’s also a Coda version if that suits your fancy.
Blah Blah Blah by Naked Gods
[Flash 9 is required to listen to audio.]
78 Plays
This is a fantastic album. I grabbed it on CD last summer while in Boone. Each track is worth many listens.
Google, subtly using Sesame Street to sell the Motorola Droid to infants. And just when I thought vending candy cigarettes to toddlers was rock-bottom, Dr. Donoevil carves out a new crevasse of lowliness to aspire to.
Japanese iPhone commercial. In which a dog plays piano. (via rands)
What a whimsical country.
Via: Neven Mrgan's tumbl
Tumblr iPhone 1.1 Sneak Peek!
It’s been submitted to the App Store and should be live this week! Here’s a preview from its wonderful developer, Jeff Rock:
- Video posts. Choose from your camera roll or capture a new video right from the app (iPhone 3GS only).
- Native editing. Need to add tags or update a post on the go? Just tap the ‘edit’ button on a post in the Dashboard to load it up in a native post editor.
- Search. Supports searching across Tumblr, in your Dashboard or on just your posts.
- Built-in web browser. No more losing your place when you tap a link in Dashboard. Now a web browser will pop up and let you investigate the interwebs.
- Post upload status. Never wonder how long it’s going to take that Audio post to upload again.
- Post geotagging. Even I’m not sure what this is for, but I’m sure that it’s going to be awesome.
- Rewritten Dashboard tab (replaces the Sites tab). See all your posts from each of your blogs, including drafts and queues.
- Rewritten Advanced Post Options. New support for Save as draft, Add to Queue, Publish on, Custom post URL’s, Send to Twitter and Ask a question.
- Dashboard now only reloads on command. Not every time you tap the tab. Sorry about that one :P
- Better quality photo posts. Photos are now sent with less compression.
- New bookmarklet format for links. More info coming once 1.1 goes live.
Note: The rest has been removed for brevity’s sake.
Whoa.
I’m excited. And the first thing I did upon reading this was start playing with URLs. Turns out the tumblr website components of the 1.1 release are already up and running. See:
I still can’t figure out, however, what the URL is for viewing just your posts.
Via: Tumblr Staff
