ImageScrollbar Demo

by Ter13
Customize your output scrollbars for a more professional interface.
ID:1236263
 
This contains a demonstration of how to utilize the browser to duplicate some of the features of the output panel.

Run it, jabber away, take a look at how the scrollbar works.

You can find the source code and instructions included here:

http://www.byond.com/forum/?post=1236346
If you use this in your project, please take a screenshot of it in action so I can get some variety in the screenshots of this demo!
I absolutely love this, creating my own scrollbars is something I've always wanted to do with Byond.

One issue I have run into though is that if your message is too long, the text will not wrap.
Sorry, I guess I accidentally rolled back a change I made. There needs to be a rule set up for text wrapping in the #scrollbar_content div.

Insert this into your CSS under the #scrollbar_content style for now:

word-wrap: break-word;


Thanks for pointing this out. I had fixed this at one point, but somehow, my changes got reverted and I'm not sure why.

I'll upload a fix to the demo when I get some time. At the minute I'm on a bit of a time crunch with a commission. I'm trying to have it done before I leave for work in two hours.
Surprisingly, I've never used that whilst working with CSS before, thanks. I'm working it into my little "RPG HUD" experiment, so I'll get a screenshot posted when I'm done.
In response to Danny Roe
Danny Roe wrote:
Surprisingly, I've never used that whilst working with CSS before, thanks. I'm working it into my little "RPG HUD" experiment, so I'll get a screenshot posted when I'm done.

I'd love to see it!
This is fantastic! Works really well!
Here's a screenshot of it in action! :)


Wow, that looks great! I've added your example to the screenshots list.
Nice lib, I've fan'ed it.

I really wish you could add all files in a folder and cache them, instead of all that mess (not your fault).
Yeah, I mean, I could set up a global list of on-load resources that need to be sent to the client for caching, but it's really just a convenience feature, and not really necessary.

If you have any suggestions, I'm all ears.

EDIT:

There are a few other ways to do this without having to precache the files. You could upload the resources needed by the game to a website, then reference the url of the site, but if the site ever went down, your game would be unplayable.

Another way to do it could be via detecting via javascript if the site is unavailable when loading the resources, and falling back to downloading the files somewhere on the HDD of the client, then falling back to an alternate HTML page that has the paths of the resources as references to a specific location on their HDD. Of course, that'd be an intrusive nightmare, so I'd rather not do ANY of it. The current way is best way.
Sorry I really meant it should be a BYOND feature.

http://www.byond.com/forum/
I noticed if there is too many lines being displayed in the output the center drag bar loses its image and becomes white.

Found that odd but other then that, is good
@Midgetbuster: I did my best to eliminate that. If you could find a reproducible case, I'd be very much appreciative.
This is actually very impressive =)!
Really handy I'll admit finally changing scrollbars.
I just started checking this out. Seems pretty awesome so far, but the only thing that isn't immediately apparent to me is what would be the best way to handle flexible sizing?

All the sizes are defined in the CSS within the html file as far as I can tell, so full screen or anything else resizing the browser doesn't change the actual chats size.
It's been a very long time since I've touched this. Honestly, I wouldn't use this today. I'd write a much better approach. This should just give you an idea of how to approach it.
Ahh. I see. That makes sense. Thanks.