// First layer initialization with OpenLayers (removed 2 through 6 for cleanliness... but they are hii_2, hii_3,...,hii_6)
hii_1 = new OpenLayers.Layer.MapServer("Land Cover","../../cgi-bin/mapserv.exe",{
map:'C:/ms4w/Apache/htdocs/hii/hii_landcover.map'},{
isBaseLayer:false,
transparent:true,
format:"image/png",
alpha:true,
displayInLayerSwitcher:false
});
// jQueryUI function for slider elements
$(document).ready(function(){
var sliders = $("#sliders .slider");
sliders.each(function() {
var value = parseInt($(this).text()),
availableTotal = 100;
$(function() {
$("#one").slider({
range: "min",
min: 0,
value: 20,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_1.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#two").slider({
range: "min",
min: 0,
value: 20,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_2.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#three").slider({
range: "min",
min: 0,
value: 20,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_3.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#four").slider({
range: "min",
min: 0,
value: 16,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_4.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#five").slider({
range: "min",
min: 0,
value: 16,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_5.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#six").slider({
range: "min",
min: 0,
value: 8,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_6.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
});
});
Refactorings
No refactoring yet !
Ants
January 14, 2012, January 14, 2012 23:36, permalink
No rating.
Login to rate!
Untested, but I hope you get the idea...
$(document).ready(function() {
var init = [ 20, 20, 20, 16, 16, 8 ];
var hii = [ hii_1, hii_2, hii_3, hii_3, hii_4, hii_5, hii_6 ];
var sliders = $("#sliders .slider");
var availableTotal = 100;
sliders.each(function(index, element) {
$(element).slider({
range: "min",
min: 0,
value: init[index],
slide: function(event, ui) {
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal)
return false;
hii[index].setOpacity(ui.value / 100);
$(this).siblings().text(ui.value);
}
});
});
});
https://www.google.com/accounts/o8/id?id=AItOawkpq_fK9eTyv4kT_L9oOdZmIj8FDIXXM58
January 15, 2012, January 15, 2012 20:05, permalink
No rating.
Login to rate!
AH! you have introduced me to the world of [index]!! Thank you.
I spent too much time learning the hard way that FOR loops break the jquery chain.
Cheers!
https://www.google.com/accounts/o8/id?id=AItOawkpq_fK9eTyv4kT_L9oOdZmIj8FDIXXM58
January 15, 2012, January 15, 2012 20:05, permalink
No rating.
Login to rate!
AH! you have introduced me to the world of [index]!! Thank you.
I spent too much time learning the hard way that FOR loops break the jquery chain.
Cheers!
I am having trouble refactoring this piece due to a few reasons:
1. The sliders are unique and control 6 individual OpenLayers.Layers
2. I need to keep a running total and stop the sliders from exceeding a cumulative total of 100 units.