Div scrollabile tramite link

**LostCore** · 13-06-2006, 16:17

Ciao a tutti!

Avrei la necessità di scrollare il contenuto (dinamico) di un div tramite due link (Up, Down). In giro, purtroppo, ho trovato solo scroller automatici o scroller di iframe.
Come posso fare?

Grazie mille!

**badaze** · 13-06-2006, 16:41

Boh !!!

Prova questo.

codice:

<HTML>
<HEAD>
	<TITLE>Selezione da una lista digitando i caratteri in un TextBox</TITLE>
<HEAD>
<style type="text/css">
<!--
.inverted {color:white;background-color:navy} 
-->
</style>

<SCRIPT>
<!--
var previousRow = null;
function find() {
 if (previousRow != null) {
  previousRow.className = "";
 } // if (previousRow != null)
 stringToFind = document.getElementById('input1').value;
 stringToFind = stringToFind.toLowerCase();
 rows         = document.getElementById('stati').rows.length;
 for (i=0;i<rows;i++) {
  currentRow = document.getElementById('stati').rows.item(i)
  cells = currentRow.cells.length;
	//------------ si assume che la colonna da controllare sia la prima ovvero (1 - 1) = 0
	controlledCell = 0
	for (j=0;j<cells;j++) {
	 currentCell     = currentRow.cells.item(controlledCell);
	 currentCellText = currentCell.innerHTML;
	 currentCellText = currentCellText.toLowerCase();

	 if (stringToFind <= currentCellText) {
	  currentRow.className = "inverted";
		previousRow          = currentRow;
		document.getElementById('container').scrollTop = currentRow.offsetTop;
		return;
	 } // if (stringToFind <= currentCellText) 
	} // for (j=0;j<cells;j++)
 } //  for (i=0;i<rows;i++
 alert("non trovato");
} // function find()

function gotoPrevious() {
 changeRow(-1);
} // function gotoPrevious()

function gotoNext() {
 changeRow(1);
} // function gotoNext()

function changeRow(vDirection) {
 canChange = false;
 if (vDirection == 1) {
  if (currentRow.rowIndex < document.getElementById('stati').rows.length-1) {
	 canChange = true;
	 newRow    = currentRow.rowIndex + 1;
  } // if (currentRow.rowIndex < document.getElementById('stati').rows.length-1)
 } else {
  if (currentRow.rowIndex > 0) {
	 canChange = true;
	 newRow    = currentRow.rowIndex - 1;	 
  } // if (currentRow.rowIndex > 0)
 } // if (vDirection == 1) 
 if (canChange) {
  gotoRow(newRow);
	return;	
 } // if (currentRow.rowIndex > 0) 
} // function changeRow(vDirection)

function gotoRow(aRowNumber) {
 if (previousRow == null) {
  previousRow = document.getElementById('stati').rows.item(0);
  //currentRow  = document.getElementById('stati').rows.item(0);
 } // if (previousRow == null)
  previousRow.className = "";  
  currentRow           = document.getElementById('stati').rows.item(aRowNumber);
	currentRow.className = "inverted";
	previousRow          = currentRow;
  document.getElementById('container').scrollTop = currentRow.offsetTop;
} // function gotoRow() 

// ==============================================================================
// Scroll
// ==============================================================================
var stopScrollUp   = true;
var stopScrollDown = true;
var scrollStep     = 5;

function pippo() {
 if (! stopScrollUp) {
  scrollUp();
 } // if (! stopScrollUp)
 if (! stopScrollDown) {
  scrollDown();
 } // if (! stopScrollDown)
} // function pippo()

window.setInterval("pippo()",10);

function scrollUp() {
 if (document.getElementById('container').scrollTop > 0) {
  document.getElementById('container').scrollTop -= scrollStep;
 } else {
  document.getElementById('container').scrollTop = 0;
	return;
 } // if (document.getElementById('container').scrollTop > 0)
} // function scrollUp()


function scrollDown() {
 if (document.getElementById('container').scrollTop <= document.getElementById('stati').offsetHeight - document.getElementById('container').offsetHeight) {
  document.getElementById('container').scrollTop+= scrollStep;
 } else {
  document.getElementById('container').scrollTop = document.getElementById('stati').height;
	alert('max');
	return;
 } // if (document.getElementById('container').scrollTop < document.getElementById('stati').height)
} // function scrollDown()

function stopScroll() {
 stop = true;
} // function stopScroll()

//-->
</SCRIPT>

</HEAD>
<BODY id="body" BGCOLOR="#ffffff" onmouseover="document.getElementById('status').innerHTML = window.event.srcElement.id;">
<FORM NAME="modulo">
<INPUT TYPE="text" NAME="input1" ID="input1" VALUE="Scrivi..." CLASS="" > 
<INPUT TYPE="button"  VALUE="Cerca" onclick="find()" >


 <DIV ID="container" 
   STYLE="height:200px; width:150;z-index=100;font-family:verdana;font-size:9pt;overflow: auto;">
	<TABLE id="stati" NAME="stati" BORDER="1">
<TR><TD>Albania</TD></TR>
<TR><TD>Cayman Islands</TD></TR>
<TR><TD>Central African Rep.</TD></TR>
<TR><TD>Chad</TD></TR>
<TR><TD>Chile</TD></TR>
<TR><TD>China</TD></TR>
<TR><TD>Christmas Island</TD></TR>
<TR><TD>Gambia</TD></TR>
<TR><TD>Georgia</TD></TR>
<TR><TD>Germany</TD></TR>
<TR><TD>Ghana</TD></TR>
<TR><TD>Gibraltar</TD></TR>
<TR><TD>Great Britain (UK)</TD></TR>
<TR><TD>Greece</TD></TR>
<TR><TD>Greenland</TD></TR>
<TR><TD>Grenada</TD></TR>
<TR><TD>Guadeloupe (Fr.)</TD></TR>
<TR><TD>Guam (US)</TD></TR>
<TR><TD>Guatemala</TD></TR>
<TR><TD>Guinea</TD></TR>
<TR><TD>Guinea Bissau</TD></TR>
<TR><TD>Guyana</TD></TR>
<TR><TD>Italy</TD></TR>
<TR><TD>Ivory Coast</TD></TR>
</TABLE>
</div>
<input type="button" id="up" value="Up" onmouseover="stopScrollUp=false" onmouseout="stopScrollUp=true">
<input type="button" id="down" value="Down" onmouseover="stopScrollDown=false" onmouseout="stopScrollDown=true">
<input type="button" id="previous" value="Previous" onclick="gotoPrevious()">
<input type="button" id="next" value="Next" onclick="gotoNext()">


<div id="status"></div>
</FORM>
<script language="JavaScript" type="text/javascript">
<!--
//---------------- Si posiziona sulla prima riga
gotoRow(0);
//-->
</script>


</BODY>
</HTML>

**Mega69** · 13-06-2006, 16:46

O usi flash, oppure potresti creare due div dello stesso colore dello sfondo e
metterli sovrepposti al div col testo, in modo che coprano la parte superiore e quella
inferiore:
______
|______| div superiore

| *** |
| *** | div col testo semicoperrto
| *** |
______
|______| div inferiore

All evento onclick dei tasti modifichi l'opzione top del div con testo:
la diminuisci col taso up, la incrementi col tasto down.

Forse ci sono altre soluzioni ma per certi versi mi pare la piu semplice...
a meno che non esista un'istruzione apposita che lo faccia al posto nostro!

EDIT
Sono arrivato in ritardo!
E' molto meglio la sua soluzione!

**LostCore** · 15-06-2006, 16:32

Grazie mille per l'aiuto! ^_^

Discussione: Div scrollabile tramite link

Strumenti discussione

Ricerca discussione

Visualizza

Div scrollabile tramite link

Permessi di invio