Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

slide bar javascript

Status
Not open for further replies.
inforeqd

inforeqd

Technical User
Jan 8, 2001
95
US
Ok, I am at my wits end on this. I just cannot get
a slide bar to show up in my document.

Would someone please give me a very basic and step by step
walk through of placing a slide bar that can take my
values between 1 to 1000.

All I need is the slider to be able to slide when a user
moves it with their mouse.

Tks
infor
 
Sort by date Sort by votes

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
I was also frustrated by the lack of an appropriate slider widget that visually matched those on, for example, scrolling divs. It occurred to me that it might be possible to abuse the scrollbar on a div for this purpose.

I created a wide div and put it inside a smaller div with overflow set to auto. This gave me a horizontal scrollbar and a little stunted vertical one, so I put the lot inside another smaller div simply to clip the vertical scrollbar off. This worked well so I've wrapped the whole thing up in javascript to make it easy to have multiple horizontal scrollbars in the same document. It inflates the sample a bit but it cuts down my opportunities for typos. I've tested this in ie6 and ff103.

Code: 
<HTML>
<HEAD>
	<TITLE>Javascript Slider Control - Example</TITLE>
	<SCRIPT>

		var wsl_sliding;
		var wsl_divisor = new Array(); // FSDs

		var wsl_voffset = 27; // these two values suitable for firefox
		var wsl_hoffset = 0;
		if ( document.all ) { // and these for ie
			wsl_voffset = 17;
			wsl_hoffset = 17;
		}

		function wsl_slide () {
			if( wsl_sliding.id ) {
				document.getElementById(
						wsl_sliding.getAttribute( 'wsl_related' )
					).value = wsl_sliding.scrollLeft / wsl_divisor[wsl_sliding.id];

				window.setTimeout( "wsl_slide()", 20 )
			}
		}

	</SCRIPT>
</HEAD>
<BODY>

	<DIV id="slider01" class="wsl_slider" wsl_related = "pos" style="width:400px;"></DIV>
	<br>
	<input type="text" id="pos" value="0.25">

	<br><div id="smaller" class="wsl_slider" wsl_related="out" style="width:150px;"></DIV>
	<br><input id="out">

<SCRIPT>
	var myDivs = document.getElementsByTagName( 'div' );
	for( var i=0; i<myDivs.length; i++ ) {
		var d = myDivs[i];
		if ( d.className == 'wsl_slider' ) {

			d.style.overflow = 'hidden';
			d.style.height = wsl_voffset;

			var theSlider = document.createElement('div');
			theSlider.id = 'wsl_' + d.id;
			theSlider.onmousedown = function() { wsl_sliding = this; wsl_slide(); };
			theSlider.onmouseup = function() { wsl_sliding = 0; };
			theSlider.style.overflow = 'scroll';
			theSlider.style.height = wsl_voffset;
			var sliderWidth = parseInt(d.style.width) + wsl_hoffset; 
			theSlider.style.width = sliderWidth;
			wsl_divisor[theSlider.id] = 6 * parseInt(d.style.width);
			var relatedInput = d.getAttribute( 'wsl_related' );
			theSlider.setAttribute( 'wsl_related', relatedInput );
			// The following code might set the initial position if a browser supported writing
			// the scrollLeft property
			//var sliderPos = 0;
			//if ( document.getElementById(relatedInput).value ) {
			//	var relatedValue = parseFloat(document.getElementById(relatedInput).value);
			//	sliderPos = relatedValue * wsl_divisor[theSlider.id];
			//}
			//if ( sliderPos < 0 ) sliderPos = 0;
			//if ( sliderPos > wsl_divisor[theSlider.id] ) sliderPos = wsl_divisor[theSlider.id]; // FSD
			//theSlider.setAttribute( 'scrollLeft', sliderPos );

			var theInside = document.createElement('div');
			theInside.style.width = parseInt(d.style.width) * 7;
			theSlider.appendChild( theInside );

			d.appendChild( theSlider );
		}
	}
</SCRIPT>

</BODY></HTML>

I'm still quite rusty with this stuff so do let me know if you can refine this at all. Yours,

fish

&quot;As soon as we started programming, we found to our surprise that it wasn't as easy to get programs right as we had thought. Debugging had to be discovered. I can remember the exact instant when I realized that a large part of my life from then on was going to be spent in finding mistakes in my own programs.&quot;
--Maurice Wilkes
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
787
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
392
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
381
Marclem
Marclem
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
915
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top