Scroller Bar Form Element

[lavalamp]

In a thread somewhere, someone wanted to know if there was a form element that would create a slider bar for the users to select a rating for something or other.

Well I went away and made one in DHTML and it works in all but five browsers (IE 3.0 4.0, NN 4.79 Opera 5.02 6.00) that I have tested it on.
Once I had made it, I decided to make it more customizable by allowing users to set the width of the bar more easily.

Then I considered using XML to create the slider bar so that it would work for non-JavaScript users, I decided against this for two reasons, not many people use XHTML for their pages and I don't know XML. Instead I just included a noscript section with just a normal text box in.

Then someone at school told me that I could use ActiveX to create a slider bar. Well, lets just say that I know more about XML than ActiveX and leave it at that.

So as it stands this is just your average, run-of-the-mill, DHTML script. I'm posting it here to see if anyone can think of any ways that I could make it better or just tell me how damn good it is. I don't mind either way, honest.

I plan on submitting it to Dynamic Drive so that's why there are credits all over the place if you're wondering.

[lavalamp]

Damn, I hate it when you preview your post and you lose the attachment.

[Choopernickel]

That's pretty smooth, right there. A couple comments:
- It would be nice to be able to just click a single point on the slider-bar and have the slider bump itself to that point (and change the form element value).
- Must the width have anything to do with the value distribution? Seems to me that the ability to specify a width of 100 and a value range of, say, 1 to 10 - perhaps even "Float" or "Integer"; so that I could perhaps submit just "4" or "4.23415" on a form.
- There's nowhere to preview the value that the slider currently possesses. Perhaps a tooltip of some sort can be incorporated, or a simple output can be added at the end of the slider?
- Why not use the DOM to create your elements? document.write() is well on its way out the window, and the DOM really isn't all that tough.

This is really pretty nice work, though, I have to say: much prettier and smoother than anything I would have come up with. Cheers.

[Garadon]

well.

1:your header notice that you don't want people to remove fill 3kb+ which I personally find to big, only thing you should put in a notice you don't want removed is IMHO.
1. authors name.
2. copyrigth notice
3. 1 url.
4. 1 email.
5. scriptname +version.
6. terms of use(free for all,free for non comercial.)
anything beyond that is to much.

Suggestions
2:as far as I gathered it will only allow 1 instance of the slider, if you wanted more you would have to recode the script. so in my all lasting rant make it OO .

3:Instead of making script/no script, I would suggest you made it so you could either send text input fields to be converted to sliders or your scripts autosearched for text inputs given a unique slider Id.

4:this migth just be me but your script made my cursor go time glass when I dragged the slider in IE6, and I got the cursor you get when you move over text in firefox alot.

5:Last but not least I must say you follow DynamicDrive code standard very nicely completly and utterly unreadable for all but the coder .

[lavalamp]

Originally posted by Choopernickel
- It would be nice to be able to just click a single point on the slider-bar and have the slider bump itself to that point (and change the form element value).

That could be tricky, but I'll see what I can do, perhaps something with onclick might work.

Originally posted by Choopernickel
- Must the width have anything to do with the value distribution? Seems to me that the ability to specify a width of 100 and a value range of, say, 1 to 10 - perhaps even "Float" or "Integer"; so that I could perhaps submit just "4" or "4.23415" on a form.

Good point, I was thinking of making this, but in the end I decided that I was just too lazy. :P I might give this a stab because on second thoughts it might not be as hard as I thought.

Originally posted by Choopernickel
- There's nowhere to preview the value that the slider currently possesses. Perhaps a tooltip of some sort can be incorporated, or a simple output can be added at the end of the slider?

That was kind of the point of having this slider, no fixed values are offered, it's just for a sort of general rating bar.
I might convert it so that you can have a valued and non-valued bar depending on what you want.

Originally posted by Choopernickel
- Why not use the DOM to create your elements? document.write() is well on its way out the window, and the DOM really isn't all that tough.

Why bother? document.write does exactly what I want with little or no fuss. What would you recommend using instead, document.getElementById().innerHTML?

Originally posted by Choopernickel
This is really pretty nice work, though, I have to say: much prettier and smoother than anything I would have come up with. Cheers.

ty

Originally posted by Garadon
your header notice that you don't want people to remove fill 3kb+ which I personally find to big

I agree with you there, I look at it and think, "By eck, that's long." I've never submitted anything to anywhere before so I was just trying to cram in as much as possible, perhaps the wrong approach.

Originally posted by Garadon
as far as I gathered it will only allow 1 instance of the slider, if you wanted more you would have to recode the script.

Not so, I draw your attention to where the function is created "form_slider(slider_name,wid)" simply change the slider_name and there you have a new slider.

Originally posted by Garadon
your scripts autosearched for text inputs given a unique slider Id

Not quite sure what you mean here, can you elaborate a little please.

Originally posted by Garadon
this migth just be me but your script made my cursor go time glass when I dragged the slider in IE6, and I got the cursor you get when you move over text in firefox alot.

I think that the hour glass just pops up when the cursor is moved a little fast. I tried it in Firefox and no matter how fast I moved it, I couldn't get the eggtimer at all.

Originally posted by Garadon
Last but not least I must say you follow DynamicDrive code standard very nicely completly and utterly unreadable for all but the coder

I must say that usually I would agree with you (when I write script it is terrible, I like to self compile ), however this script I find relatively clean, there's not that much to it. Have you any suggestions as to how I might visually improve the code or is it too hard for you to make heads or tails of?

[Garadon]

coding standard I was refering to the fact that the name of your variables for an outsider do not make it iminent clear what they are for:
lgap ->had to read down to this line pel.style.marginLeft=(((lgap+x)>pel_wid)?pel_wid((lgap+x)<0)?0:lgap+x))+"px";
before I guessed it was left gap, I would have called it leftgap.
pel_ I know is the active element but what p stand for?.
and el_wid? had to read your document writes before I found out it was width.




by autosearch I meant you could make a function that when called traversed the dom tree and for any input elements of type text with a specific type of id make a slider;

id="slider1"
id="slider2"

you could use regexp to see if slider was in the name of the id and the number is just so elements ain't got the same id , this approach you wouldn't need the user to type a no script block in his element cause he just typed the element
<input type="text" id="slider1">
and if script was on it automaticly put a slider at that element perhaps hiding the element, or using it to show slider value.


oh and just to clear up I didn't get the egg in firefow I got the cursor you get when you moce it over any text.

[lavalamp]

Yeah, lgap is the gap on the left hand side and el_wid is the width of the slider (sort of).

Now the thing with pel is that the in the track function, the variables were only local variables so to make them global variables I stuck a letter on the front of them, I chose the letter p for passing, as I was in effect passing the variables to another function.
Point taken about the names though.

I like your idea about the autosearch feature. That way all script could be removed to a separate file. I would have to use innerHTML for that though (or mess around with createElement and what have you, don't fancy that). I suppose that the HTML would have to look something like this:

<div id="slider1">
<input type="text" id="presley" />
</div>

That way I could change the input type with setAttribute and add the slider code in using innerHTML after it.

[glenngv]

Dynamicdrive already has the slider script.

[lavalamp]

I hadn't seen that however, Dynamic Drive also have about a thousand slide shows as well, all slightly different.

This is a horizontal scroll bar and also looks a bit more like a form element (although it's just the images that do that). After modifying it I'll send it in and then it's up to Dynamic Drive whether they want to use it or not.

[Choopernickel]

You ready for this, lavalamp?

Here's an ...aumentation of your original.

It uses the DOM to create (and remove) the required elements. Oh, and element.innerHTML is not DOM. Yes, it's longer, but it's also short-term future-proof.

It crawls the form elements looking for anything with a class of "slider" - but that's not all.

It recognizes class names that *begin* with "slider", and if a number follows slider in the same class name, it's taken to be the width. The default is 100.

It executes automagically, which shouldn't be a problem if the surfer is using any recent browser: I use the best event addition techniques available first, and fall back to the oldest (direct assignment).

It works the same, and looks just about the same, in IE6, Firefox0.8, and Opera7. I haven't tested it in Netscape4; I don't expect it to work with Lynx.

There's one issue I have with it, and it has to do with mousing away from the slider knob before letting go of the button - I know there's a way to get around it, but it would take a serious rewrite of the tracking system.

Finally, I rewrote that monster of a header, and it's spelled "copyright," not "copywrite."

Thoughts?

[lavalamp]

Wow, you've really gone to wotk on this. This may take a while for me to read through.

[JAVAEOC]

lavalamp

that code on dynamic drive seems to be IE only, where *** yours also works in NS

so urs is way better

[Garadon]

I got a thought on it, I was rewriting it to use in one of my own scripts when I noticed ur where making an input element, my question are there any reason you do this instead of just applying a style hide to the old element?

[lavalamp]

Yes, I wanted to make it so that the JavaScript written input had the same name as the noscript text box input to avoid excessive server-side scripting.

I suppose I could have just put the input inside a div tag and used innerHTML to replace it but some browsers can't handle it. I could also have used the DOM to change the type attribute but I don't trust the DOM enough yet even though Choopernickel has proven that it can be quite effective.

[Choopernickel]

Ha ha! Actually, one thing that can't be changed according to my tests is the type of an input element, after it's been added to the page (via HTML tag, innerHTML, or DOM).

It seems I've tried changing visibility of text inputs before and they've not been submitted with the form. I could be wrong on that, it's been a while since I tried it.