Recreating Sublime Text editor Slide Pane with CSS and jQuery?

[kawohi]

So I tried out Sublime Text 2 and it is the most beautiful code editor I could find on windows. I love it.

One of the features of Sublime Text 2 is the scroll or slide pane. It shows the whole document and you can drag it up or down and it’ll scroll smoothly. Really nice IMO.

I am wondering if this effect, or style can be reproduce with jQuery and/or ( better yet) CSS.

This is how it looks. http://i.imgur.com/elv2P.png

[kawohi]

I’m going to bump this, hopefully with some thoughts or answers? :D

[TheDoc]

I agree, it’s certainly the best editor that I’ve found for Windows.

I’m not quite sure how I would accomplish this, though. Definitely not CSS only. The script would have to take a picture of the page, and the use that as the background in a scroll thing… Certainly not something I’m capable of (not a JS man), but would be a sweet project for someone!

I think it’d be great for one page sites that are really long.

[kawohi]

^ Perhaps not a image, but maybe getting everything on the page and shrinking it so the page can fit.

[TheDoc]

But then you’d be rendering the page twice, which could be horrific for browser performance.

[Mottie]

This guy has a plugin that check to see what elements are visible. He built a canvas script around it and made the scroller like Sublime2 (see the right side of the page), but he doesn’t have any example code or tutorials…. maybe we need to bug him about it.

Update: actually, now that I’ve actually looked at it LOL… look under the “Outline” section on how to add it.

[Author]

Posts