Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts

    DHTML slider widget

    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:

    Code:
    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?
    Last edited by jkd; 08-05-2002 at 02:21 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about displaying the RGB values at the bottom?

    Edit: 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.
    Last edited by Catman; 08-05-2002 at 03:43 AM.
    Need more emoticons?
    Visit Catman's Private Stock

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Catman
    How about displaying the RGB values at the bottom?

    Edit: 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, 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.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where can we download those three files? The slider could really come in handy in plenty of applications I'm sure.

    Happy coding!

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Need more emoticons?
    Visit Catman's Private Stock

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •