Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di Trinità76
    Registrato dal
    Jan 2002
    Messaggi
    1,439

    [ajax] help slide mootools

    Salve.
    Ecco il mio codice:

    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(){
    		
    	var firstObj = {
    		'start': 50,
    		'maxInc': 240
    	};
    	var secondObj = {
    		'start': 20,
    		'maxInc': 95
    	};
    	var thirdObj = {
    		'start': 125,
    		'maxInc': 255
    	};
    	
    	$('knob1').setOpacity(0.5);
    	$('knob2').setOpacity(0.5);
    	$('knob3').setOpacity(0.5);
    	
    	/* Slider 1 */
    	var mySlide1 = new Slider($('area1'), $('knob1'), {
    		steps: 255,	
    		offset: 0,
    		onChange: function(pos){
    			$('upd1').setHTML(pos);
    		}
    	
    	}).set(firstObj.start);
    	
    	/* Slider 2 */
    	var mySlide2 = new Slider($('area2'), $('knob2'), {
    		steps: 255,	
    		offset: 0,
    		onChange: function(pos){
    			$('upd2').setHTML(pos);
    		}
    	
    	}).set(secondObj.start);
    	
    	/* Slider 3 */
    	var mySlide3 = new Slider($('area3'), $('knob3'), {
    		steps: 255,	
    		offset: 0,
    		onChange: function(pos){
    			$('upd3').setHTML(pos);
    		}
    	
    	}).set(thirdObj.start);
    
    }); 
    </script>
    	
    </head>
    
    <body>
    
    <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>
    
    </body>
    </html>
    e questo è il css incluso
    codice:
     
    #area1, #area2, #area3 {
    	position: relative;
    	height: 15px;
    	width: 280px;
    	background: #000;
    }
     
    #knob1, #knob2, #knob3 {
    	position: absolute;
    	height: 15px;
    	width: 20px;
    	background: #ff3300;
    	cursor: pointer;
    }
    Lo script in questione è un mootools preso da qui:
    http://demos111.mootools.net/Slider

    Funziona tutto a dovere. Dovrei implementare dei controlli sulle slide e non so come fare qualcuno saprebbe aiutarmi?

    Il problema è questo.
    Ho tre barre (slide) che vanno da 0 a 255.
    Dovrei impostare un livello massimo per ogni barra (vedi proprietà maxInc) e bloccare ogni barra a superare sia il suo valore maxInc e sia inibire la discesa sotto il valore minimo di partenza start.

    Inoltre, dovrei inserire un valore massimo di incremento globale (esempio 50) oltre il quale, non è possibile aumentare le tre barre assieme. In questo caso le tre barre complessivamente potranno muoversi in avanti complessivamente per 50 punti.
    わさび

  2. #2
    Utente di HTML.it L'avatar di Trinità76
    Registrato dal
    Jan 2002
    Messaggi
    1,439
    Hmm... non riesco proprio ad andare oltre..
    Sono riuscito a far scrivere da una parte il valore totale degli incrementi, ma non riesco a farci i controlli e a far stoppare le barre. (vedi codice commentato)
    Non sono molto pratico di ajax ... qualcuno saprebbe aiutarmi?

    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': 90
    	};
    	var secondObj = {
    		'start': 20,
    		'current': 20,
    		'maxInc': 95
    	};
    	var thirdObj = {
    		'start': 125,
    		'current': 125,
    		'maxInc': 255
    	};
    	
    	var total = 30;
    	
    	$('knob1').setOpacity(0.5);
    	$('knob2').setOpacity(0.5);
    	$('knob3').setOpacity(0.5);
    	
    	/* Slider 1 */
    	var mySlide1 = new Slider($('area1'), $('knob1'), {
    		steps: 255,	
    		offset: 0,
    		onChange: function(pos){
    			//if( pos >= firstObj.start || pos <= firstObj.maxInc ){
    			$('upd1').setHTML(pos);
    			firstObj.current = parseInt( pos );
    			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - secondObj.current - thirdObj.current );
    		}
    	
    	}).set(firstObj.start);
    	
    	/* Slider 2 */
    	var mySlide2 = new Slider($('area2'), $('knob2'), {
    		steps: 255,	
    		offset: 0,
    		onChange: function(pos){
    			$('upd2').setHTML(pos);
    			secondObj.current = parseInt( pos );
    			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - firstObj.current - thirdObj.current );
    		}
    	
    	}).set(secondObj.start);
    	
    	/* Slider 3 */
    	var mySlide3 = new Slider($('area3'), $('knob3'), {
    		steps: 255,	
    		offset: 0,
    		onChange: function(pos){
    			$('upd3').setHTML(pos);
    			thirdObj.current = parseInt( pos );
    			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - firstObj.current - secondObj.current );
    		}
    	
    	}).set(thirdObj.start);
    
    }); 
    </script>
    	
    </head>
    
    <body>
    
    <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="total" style="color:red;">XX</p>
    
    </body>
    </html>
    わさび

  3. #3
    Utente bannato
    Registrato dal
    Jan 2009
    Messaggi
    152
    Forse sarebbe utile sapere un URL completo per lo script che chiami da file esterno:

    src="mootools.svn.js"

  4. #4
    Utente di HTML.it L'avatar di Trinità76
    Registrato dal
    Jan 2002
    Messaggi
    1,439
    わさび

  5. #5
    Utente di HTML.it L'avatar di Trinità76
    Registrato dal
    Jan 2002
    Messaggi
    1,439
    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>
    わさび

  6. #6
    Utente di HTML.it L'avatar di Trinità76
    Registrato dal
    Jan 2002
    Messaggi
    1,439
    ho capito che per fare quello che mi serve bisogna modificare mootools.svn.js
    qualcuno può darmi una mano? non sono affatto esperto in javascript
    わさび

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.