Ho aggiornato il codice, ma non riesco a apportare quella modifica... credo bisogni appunto modificare il codice proprio dentro mootools.svn.js ... qualche idea?
codice aggiornato
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>.</title>
<link rel="stylesheet" type="text/css" media="screen" href="cssCode.css" />
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
// oggetti
var firstObj = {
'start': 50,
'current': 50,
'maxInc': 80
};
var secondObj = {
'start': 20,
'current': 20,
'maxInc': 95
};
var thirdObj = {
'start': 125,
'current': 125,
'maxInc': 255
};
var totalPoints = 30;
var startAll = firstObj.start + secondObj.start + thirdObj.start;
function resetOpacity(op){
$('knob1').setOpacity(op);
$('knob2').setOpacity(op);
$('knob3').setOpacity(op);
}
/* Slider 1 */
var mySlide1 = new Slider($('area1'), $('knob1'), {
steps: 255,
offset: 0,
onChange: function( pos ){
if( parseInt( pos ) >= firstObj.start && parseInt( pos ) <= firstObj.maxInc ){
$('upd1').setHTML( pos );
firstObj.current = parseInt( pos );
$('totalPoints').setHTML( startAll + totalPoints - pos - secondObj.current - thirdObj.current );
// colora i box quando i punti arrivano a 0, altrimenti è scuro
resetOpacity( startAll + totalPoints - firstObj.current - secondObj.current - thirdObj.current == 0 ? 1 : 0.5 );
}
}
}).set(firstObj.start);
/* Slider 2 */
var mySlide2 = new Slider($('area2'), $('knob2'), {
steps: 255,
offset: 0,
onChange: function( pos ){
if( parseInt( pos ) >= secondObj.start && parseInt( pos ) <= secondObj.maxInc ){
$('upd2').setHTML( pos );
secondObj.current = parseInt( pos );
$('totalPoints').setHTML( startAll + totalPoints - pos - firstObj.current - thirdObj.current );
// colora i box quando i punti arrivano a 0, altrimenti è scuro
resetOpacity( startAll + totalPoints - firstObj.current - secondObj.current - thirdObj.current == 0 ? 1 : 0.5 );
}
}
}).set(secondObj.start);
/* Slider 3 */
var mySlide3 = new Slider($('area3'), $('knob3'), {
steps: 255,
offset: 0,
onChange: function( pos ){
if( parseInt( pos ) >= thirdObj.start && parseInt( pos ) <= thirdObj.maxInc ){
$('upd3').setHTML( pos );
thirdObj.current = parseInt( pos );
$('totalPoints').setHTML( startAll + totalPoints - pos - firstObj.current - secondObj.current );
// colora i box quando i punti arrivano a 0, altrimenti è scuro
resetOpacity( startAll + totalPoints - firstObj.current - secondObj.current - thirdObj.current == 0 ? 1 : 0.5 );
}
}
}).set(thirdObj.start);
});
function getDivsContent(){
document.getElementById('content1').value = document.getElementById('upd1').innerHTML;
document.getElementById('content2').value = document.getElementById('upd2').innerHTML;
document.getElementById('content3').value = document.getElementById('upd3').innerHTML;
}
</script>
</head>
<body>
<form id="form1" method="get" action="test.htm" onsubmit="javascript:getDivsContent();">
<input type="hidden" id="content1" name="val1" value="0" />
<input type="hidden" id="content2" name="val2" value="0" />
<input type="hidden" id="content3" name="val3" value="0" />
<h3>Slider 1</h3>
<div id="area1">
<div id="knob1"></div>
</div>
<p id="upd1">XX</p>
<h3>Slider 2</h3>
<div id="area2">
<div id="knob2"></div>
</div>
<p id="upd2">XX</p>
<h3>Slider 3</h3>
<div id="area3">
<div id="knob3"></div>
</div>
<p id="upd3">XX</p>
<p id="totalPoints" style="color:red;">XX</p>
<input name="submit" type="submit" />
</form>
</body>
</html>