i have seen some pretty cool jquery plugins and apps and what not's
out there...
here is my idea and i am not sure how to go about this...
say we offer "squidgets" and we have 7 types of squidgets with various
accessories available.
We offer up to 5 gears, up to 5 windows, up to 5 levels of
loudness...
i.e.
Slider 1 = Gears
1-----2-----3-----4-----¦5¦
Slider 2 = Windows
1-----2-----¦3¦-----4-----5
Slider 3 = Loudness
¦1¦-----2-----3-----4-----5
As they slide to each value, the combination will reveal what we think
the best squidget is best for them.
i.e.
if slider1=5&slider2=3&slider3=1 then divDisplay="Squidget-GT"
and Squidget-GT would appear in a hidden div.
i have found the UI/API/1.7.1 jQuery Slider on the jQuery website and
have gotten two separate sliders to work.
i have given them a min=1, max=5 according to the options avialable to
the function.
what i am having trouble with is very simple, but complex for me....
as a first basic step, i want to assign a value to each step, which im
not sure if min, max does this.
then, just do a basic document.write(slider1+slider2+slider3)
essentially doing basic math and adding the three and displaying
them.
so the example above would be 9.
If anyone has any suggestions, pointers, examples i would greatly
apprecaite it... or if i didnt explain something i can.
**********javascript***************
<script type="text/javascript"><!--
$(document).ready(function(){
$("#slider, #slider2").slider();
<!--ANIMATE-->
$('#slider, #slider2').slider({ animate: true });
//getter
var animate = $('#slider, #slider2').slider('option', 'animate');
//setter
$('#slider, #slider2').slider('option', 'animate', true);
<!--/ANIMATE-->
<!--MAX-->
$('#slider, #slider2').slider({ max: 5 });
//getter
var max = $('#slider, #slider2').slider('option', 'max');
//setter
$('#slider, #slider2').slider('option', 'max', 5);
<!--/MAX-->
<!--MIN-->
$('#slider, #slider2').slider({ min: 1 });
//getter
var min = $('#slider, #slider2').slider('option', 'min');
//setter
$('#slider, #slider2').slider('option', 'min', 1);
<!--/MIN-->
});
//--></script>
****************html*********************
<div id="slider"></div>
NOTE: I am using the ui.core.js, ui.slider.js scripts.
