mousewheel

[techno]

salve ho scaricato il plugin jquery.mousewheel.min.js

come faccio ad attivarlo sul box div "description"?

[br1]

Perdona l'appunto, ma leggere la documentazione ti pareva male?

http://brandonaaron.net/code/mousewheel/docs

[lucavizzi]

devi abbinarlo al jQueryUI slider?

[techno]

br1 è la prima cosa che ho fatto ma non funge non so il perchè

lucavizzi si è abbinato a jqueryUI

[lucavizzi]

Sei fortunato, l'ho integrato settimana scorsa.
E' in una funzione separata, mi serviva così...

	$( "#slider-vertical" ).slider({//inizializzo lo slider
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 100,
			value: 100,
			slide: function( event, ui ) {
				noticesHeight=document.getElementById('avvisi').offsetHeight;//altezza totale degli avvisi
				maxMargin=defaultHeight-noticesHeight;
				var scrollAmount=100-ui.value;
				$('#avvisi').css( "margin-top", Math.round(
					scrollAmount / 100 * ( maxMargin )
				) + "px" );
			}
	});
	mousewheel();//integro il mouse

function mousewheel(){//integra rotellina mouse
	$('#avvisi')
	.live('mousewheel', function(event, delta) {
		var dir = delta > 0 ? 'Up' : 'Down';
		var actPos=$( "#slider-vertical" ).slider("value");
		//sposta il cursore dello slider
		if(dir=="Up"){
			newPos=actPos+10;
			$( "#slider-vertical" ).slider("value",newPos);
			
		}else{
			newPos=actPos-10;
			$( "#slider-vertical" ).slider("value",newPos);
		}
		//sposta i contenuti
		noticesHeight=document.getElementById('avvisi').offsetHeight;
		maxMargin=defaultHeight-noticesHeight;
		var scrollAmount=100-newPos;
		$('#avvisi').css( "margin-top", Math.round(
						scrollAmount / 100 * ( maxMargin )
					) + "px" );
		return false;
	});	
}

[techno]

bello proprio di cio che ho bisogno, solo una piccola spiegazione su questo

maxMargin=defaultHeight-noticesHeight;
		var scrollAmount=100-newPos;
		$('#avvisi').css( "margin-top", Math.round(
						scrollAmount / 100 * ( maxMargin )
					) + "px" );

cosa è defaultHeight mai usato
e scrollAmount?
maxMargin?

[lucavizzi]

Originariamente inviato da techno
bello proprio di cio che ho bisogno, solo una piccola spiegazione su questo

maxMargin=defaultHeight-noticesHeight;
		var scrollAmount=100-newPos;
		$('#avvisi').css( "margin-top", Math.round(
						scrollAmount / 100 * ( maxMargin )
					) + "px" );

cosa è defaultHeight mai usato
e scrollAmount?
maxMargin?

sono nomi di variabili, non sono metodi. (edit: non le vedi dichiarate perchè sono variabili globali)

In pratica, div#avvisi ha una height auto ed è dentro un div#wrapper con height fissa (defaultHeight).

#avvisi "scrolla" dentro #wrapper tramite il margin-top, che assume un valore (assoluto) massimo "maxMargin".
scrollAmount è la quantità di "scroll" da applicare.

Lo script calcola questi valori ogni volta perchè, nel mio caso, il div#avvisi viene aggiornato con ajax ogni tot secondi, quindi la sua offsetHeight può variare.

[techno]

grazie sei stato molto gentile grazie ancora.

[techno]

Originariamente inviato da lucavizzi
Sei fortunato, l'ho integrato settimana scorsa.
E' in una funzione separata, mi serviva così...

	$( "#slider-vertical" ).slider({//inizializzo lo slider
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 100,
			value: 100,
			slide: function( event, ui ) {
				noticesHeight=document.getElementById('avvisi').offsetHeight;//altezza totale degli avvisi
				maxMargin=defaultHeight-noticesHeight;
				var scrollAmount=100-ui.value;
				$('#avvisi').css( "margin-top", Math.round(
					scrollAmount / 100 * ( maxMargin )
				) + "px" );
			}
	});
	mousewheel();//integro il mouse

function mousewheel(){//integra rotellina mouse
	$('#avvisi')
	.live('mousewheel', function(event, delta) {
		var dir = delta > 0 ? 'Up' : 'Down';
		var actPos=$( "#slider-vertical" ).slider("value");
		//sposta il cursore dello slider
		if(dir=="Up"){
			newPos=actPos+10;
			$( "#slider-vertical" ).slider("value",newPos);
			
		}else{
			newPos=actPos-10;
			$( "#slider-vertical" ).slider("value",newPos);
		}
		//sposta i contenuti
		noticesHeight=document.getElementById('avvisi').offsetHeight;
		maxMargin=defaultHeight-noticesHeight;
		var scrollAmount=100-newPos;
		$('#avvisi').css( "margin-top", Math.round(
						scrollAmount / 100 * ( maxMargin )
					) + "px" );
		return false;
	});	
}

Ciao e scusa se ti disturbo ancora su questo.
Ma ho bisogno del tuo aiuto, ho preso questo scritp per scrollare un box div:

<script type="text/javascript" src="/awelco/js/jquery_1_7_2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<style>
div.article {
	position:relative;
	margin-left:20px; margin-top:10px; margin-bottom:10px;
	height:280px; width:450px;
	overflow:hidden;
	float:left;
}
div.content_slider { float:right; width:3px; height:280px; background-color:#000; margin-right:12px; margin-top:10px; }
div.slider { background-color:#CCC; width:9px; margin-left:-3px; }
</style>

<body>
<div class="article">
<span class="txt13fff"><?php echo ($RecNews[$description]=="") ? $RecNews["Text_it"] : $RecNews[$description]; ?></span>
</div>
<div class="content_slider">
<div class="slider"></div>
</div>
<div id="clear"></div>

ma non succede nulla non si muove.

[techno]

Originariamente inviato da lucavizzi
Sei fortunato, l'ho integrato settimana scorsa.
E' in una funzione separata, mi serviva così...

	$( "#slider-vertical" ).slider({//inizializzo lo slider
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 100,
			value: 100,
			slide: function( event, ui ) {
				noticesHeight=document.getElementById('avvisi').offsetHeight;//altezza totale degli avvisi
				maxMargin=defaultHeight-noticesHeight;
				var scrollAmount=100-ui.value;
				$('#avvisi').css( "margin-top", Math.round(
					scrollAmount / 100 * ( maxMargin )
				) + "px" );
			}
	});
	mousewheel();//integro il mouse

function mousewheel(){//integra rotellina mouse
	$('#avvisi')
	.live('mousewheel', function(event, delta) {
		var dir = delta > 0 ? 'Up' : 'Down';
		var actPos=$( "#slider-vertical" ).slider("value");
		//sposta il cursore dello slider
		if(dir=="Up"){
			newPos=actPos+10;
			$( "#slider-vertical" ).slider("value",newPos);
			
		}else{
			newPos=actPos-10;
			$( "#slider-vertical" ).slider("value",newPos);
		}
		//sposta i contenuti
		noticesHeight=document.getElementById('avvisi').offsetHeight;
		maxMargin=defaultHeight-noticesHeight;
		var scrollAmount=100-newPos;
		$('#avvisi').css( "margin-top", Math.round(
						scrollAmount / 100 * ( maxMargin )
					) + "px" );
		return false;
	});	
}

scusa una domanda, ma in html come è costruito? cioè hai questo:
<style>
#slider-vertical { float;left; background:#CCC; }
</style>
...
<div style="position:relative; float:left height:400px; overflow:hidden;">
<div id="avvisi"></div>
</div>
<div id="slider-vertical"></div>

è costruito cosi?