PDA

View Full Version : DHTML slider widget


jkd
08-05-2002, 03:18 AM
http://rdhtml.resource-locator.com/slider/slider.html

Using ViewLink behaviors (IE5.5+) and XBL bindings (Gecko-only - NS6+, Mozilla, etc), I basically created an encapsuled widget. That means you can infinitely reuse it with no conflicts.

To implement on a page, you'll need to add this attribute to the <html> tag to make IE happy:

xmlns:rdhtml="http://rdhtml.resource-locator.com/xmlns"

As well as add another thing to keep IE happy - a proprietary import processing instruction, before the <head> tag:

<?import namespace="rdhtml" implementation="slider.htc"?>

And define this style somewhere and apply it to the page:


rdhtml\:slider {
-moz-binding: url(slider.xml#slider);
-moz-user-focus: normal;
-moz-user-input: enabled;
display: block;
padding: 0;
margin: 0;
position: relative;
}



After all of that, to add as many as you want to a page:

<rdhtml:slider width="width in pixels - defaults to 150 if not present" onvaluechange="event to fire when the gripper is moved"></rdhtml:slider>

If I feel the need, I will also implement a "value" attribute which sets the default value of the slider.

Speaking of which, the value property of the element is 0 - 100, reflecting the percentage of the slid amount. And is read/write. :)

(In Mozilla, I implemented a read/write width property as well, and intend to eventually add that in the IE implementation)

You can manipulate the value and position of the gripper by dragging the gripper, clicking on the track (really an hr), or focusing it, and using arrow keys, page up/down, or home/end.

To customize the look, slider.css is applied to every slider.

Required files are:
slider.css (styles the sliders)
slider.xml (XBL binding for Gecko)
slider.htc (ViewLink behavior for IE5.5+)


I've only had it tested in Win2k, XP Home, XP Pro in IE6, and in Win2k and WinXP Pro in a 1.1 trunk Mozilla.

I've been told that it is "sluggish" in IE6, but on my pc it is very smooth. Is it just me where it performs satisfactorily in IE6?

And I'm aware of a weird bug in my implemention of it in Mozilla where clicking on a slider bar sometimes moves the last focused slider instead...

If an IE5 user could confirm that it doesn't work for them, that would be great, and I still need someone in IE5.5 to tell me it works....
Someone with a 1.0 trunk of Mozilla would be much appreciated too. :)

Any ideas for additions would be cool too, though I'm not sure what other attributes I could add that would be useful?

Catman
08-05-2002, 04:36 AM
How about displaying the RGB values at the bottom?

Another thought: How about providing a way to lock the sliders so they move in tandem keeping the same relative values?

I'm using IE 6.0 under Windows 98, and the movement is smooth.

jkd
08-05-2002, 05:38 AM
Originally posted by Catman
How about displaying the RGB values at the bottom?

Another thought: How about providing a way to lock the sliders so they move in tandem keeping the same relative values?

I'm using IE 6.0 under Windows 98, and the movement is smooth.

I was ultimately planning on using these sliders in my color picker (http://rdhtml.resource-locator.com/color.html), so don't worry about the RGB values. ;)
I had them change in bg in this demo simply because I needed something quick and easy to show off a possibility.

I can see the uses of an in tandem feature... I'll think about implementing it. :)

nolachrymose
08-05-2002, 02:31 PM
Where can we download those three files? The slider could really come in handy in plenty of applications I'm sure.

Happy coding! :)

Catman
08-05-2002, 03:30 PM
As requested, I've verified that it does not work with IE 5.0 (Mac version). Nothing shows up at all when the page is opened.

jkd
08-05-2002, 09:15 PM
Originally posted by nolachrymose
Where can we download those three files? The slider could really come in handy in plenty of applications I'm sure.

Happy coding! :)

http://rdhtml.resource-locator.com/slider/slider.htc
http://rdhtml.resource-locator.com/slider/slider.xml http://rdhtml.resource-locator.com/slider/slider.css

I've fixed/added a few things on my local copy, I'll upload them a little later and let you know.


Catman, thanks for verifying IE5 Mac. :)

jkd
08-07-2002, 06:29 AM
Heh, just remembered my brother has IE5.5 on Win98 on his laptop.

Like I thought, it works... although I do understand the "sluggish" complaints some people have had...

I'll try figuring out what is causing the performance loss...