The Balkan Yankee

I’m starting a new category on this blog called Code Sharing to share some potentially useful stuff I’ve been working on for various jobs. This blog is certainly seeing some changes since I’ve left Bulgaria. It has seen a range of topics covered, and I’m going to keep it that way. This new category though, is about exchanging information with developers. Others can just ignore future posts titled “CodeSharing:…”

Anyway, this is a simple javascript widget that allocates percentages between two categories that I built for an application prototype. (I also built one that allocates between 3 and 4 categories). It uses the Scriptaculous Slider Controls so you have to download those libraries and include them in your HTML header. Here is what it looks like:

See the Demo in action here.

Here is the HTML:

<div id=”slider_bar”>
<div id=”slider_handle”></div>
<div id=”slider_inner”>

<div id=”slider_left” >
<div style=”left:75px;” id=”slider_display_left”>50%</div>
</div>
<div id=”slider_right” style=”width:178px”>
<div id=”slider_display_right” >50%</div>
</div>
</div>
</div>

Here is the Javascript. You can change the slider_width and font_size variables. The spacing of numbers is adjusted according to the font_size:

<script type=”text/javascript”>
var slider_width = ‘358′; //set the width of the slider in pixels
var font_size = ‘24′; //set the font size in pixels
var handles = [’slider_handle’];
var slider_left = $(’slider_left’);
var slider_display_left = $(’slider_display_left’);
var slider_display_right = $(’slider_display_right’);
var slider_right = $(’slider_right’);

new Control.Slider(handles, ’slider_bar’, {
range: $R(0, slider_width),
sliderValue: (slider_width/2),
onSlide: function(value)
{
var left_percentage = Math.round(value/slider_width*100);
var right_percentage = 100 - Math.round(value/slider_width*100);

if (left_percentage>10 && right_percentage>10)
{
slider_left.setStyle({ width: value + ‘px’});
slider_display_left.setStyle({ left: value/2-(font_size/2) + ‘px’});

slider_display_right.setStyle({ right: (slider_width-value)/2-(font_size/2) + ‘px’});
slider_display_left.innerHTML = left_percentage + ‘%’;
slider_display_right.innerHTML = right_percentage + ‘%’;
slider_display_left.setStyle({display: ‘block’});
slider_display_right.setStyle({display: ‘block’});
}
if (left_percentage<(font_size/2))
{
slider_left.setStyle({ width: value + ‘px’});
slider_display_left.innerHTML = left_percentage + ‘%’;
slider_display_right.innerHTML = right_percentage + ‘%’;
}
if (right_percentage<(font_size/2))
{
if (right_percentage==0){}else{
slider_left.setStyle({ width: value + ‘px’});
}
slider_display_left.innerHTML = left_percentage + ‘%’;
slider_display_right.innerHTML = right_percentage + ‘%’;
}
},
restricted: true
});

slider_left.style.backgroundImage = “url(green.png)”;;
slider_left.style.left = “0″;
slider_left.style.height = “35″;
slider_left.style.position = “absolute”;
slider_left.style.zIndex = “3″;
slider_display_left.style.zIndex = “13″;
slider_display_right.style.zIndex = “12″;
slider_display_left.style.position = “absolute”;
slider_display_right.style.position = “absolute”;

</script>

This is the CSS code I used in the example along with the three images: slider.png, orange.png, and green.png. Change this and the first two javascript variables to suite your needs:

div#slider_inner{ width:356px; margin:10px 0px 0px 10px; background-image:url(orange.png); background-repeat:y; height:35px; position: relative; }
div#slider_bar { width:376px; margin:10px 0; height:35px; position: relative; }
div#slider_handle { z-index:5; width:20px; height:25px; background-image:url(slider.png); cursor:move; position: absolute;margin-top:27px; }
div#slider_display_left {font-family:’Trebuchet MS’;font-size:24px;color:green;padding-top:3px;font-weight:bold;}
div#slider_display_right {font-family:’Trebuchet MS’;font-size:24px;color:darkorange;padding-top:3px;font-weight:bold;}
div#slider_left{padding-left:0px;position:absolute;width:178px;}