impostare "setInterval" ad una funzione?

**mygametech** · 09-09-2012, 17:52

ho questo codice html con uno script:

codice:

<html>

    <head>
    
	<style type="text/css">
		
		.menu {
			background-color: green;
			width: 500px;
			height: 400px;
			
			margin-top: 100px
		
			
		}
		
		.menu1 {
		
		background-color: gray;
			width: 500px;
			height: 400px;
		margin-top: 100px
		
		}
		
		.menu2 {
		
		background-color: yellow;
			width: 500px;
			height: 400px;
		
		margin-top: 100px
		}
		
		.menu3 {
		
		background-color: blue;
			width: 500px;
			height: 400px;
		margin-top: 100px
		
		}
		
		.menu4 {
		
		background-color: greenyellow;
			width: 500px;
			height: 400px;
		margin-top: 100px
		
		}
		
		.lista_notizie {
			background-color: red;
			width: 100px;
			height: 75px;
			margin-left: 1px;
			float: left;
		}
		
	</style>
    
   <script type="text/javascript" language="javascript">
	
   
   
	function visualizza(id){
	
	
	
  	if (document.getElementById){
  	
  	
    if(document.getElementById(id).style.display == 'none')
    // se l'elemento Ã¨ invisibile
    {
      document.getElementById(id).style.display = 'block';
      // rendi visibile l'elemento; non sulla stessa linea
      
      
      if (id == 'principale1') {
      document.getElementById('principale2').style.display = 'none'; 
      document.getElementById('principale3').style.display = 'none'; 
      document.getElementById('principale4').style.display = 'none'; 
      document.getElementById('principale5').style.display = 'none'; 
      
      
      } 
				

		if (id == 'principale2') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale3').style.display = 'none'; 
		document.getElementById('principale4').style.display = 'none'; 
		document.getElementById('principale5').style.display = 'none'; 
		
		}
		
		if (id == 'principale3') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale2').style.display = 'none'; 
		document.getElementById('principale4').style.display = 'none'; 
		document.getElementById('principale5').style.display = 'none'; 
		
		}
		
		if (id == 'principale4') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale2').style.display = 'none'; 
		document.getElementById('principale3').style.display = 'none'; 
		document.getElementById('principale5').style.display = 'none'; 
		
		}
		
		if (id == 'principale5') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale2').style.display = 'none'; 
		document.getElementById('principale3').style.display = 'none'; 
		document.getElementById('principale4').style.display = 'none'; 
		
		}
		
		
    }
    else{
      document.getElementById(id).style.display = 'block';
    }
  }
}




</script>
    
 	</head>
 	
    <body>



<div class="lista_notizie" onclick="visualizza('principale1')"></div>
<div class="lista_notizie" onclick="visualizza('principale2')"></div>
<div class="lista_notizie" onclick="visualizza('principale3')"></div>
<div class="lista_notizie" onclick="visualizza('principale4')"></div>
<div class="lista_notizie" onclick="visualizza('principale5')"></div>

<div class="menu" id="principale1" style="display:block">


</div>

<div class="menu1" id="principale2" style="display:none;">


</div>

Il codice serve a creare un div all' interno del quale mettere alcune notizie per il mio sito e sopra 5 pulsanti per cambiare notizia velocemente, volevo però aggiungere anche un intervallo che faccia scorrere automaticamente dopo un tot di tempo le notizie cosicche' possano essere lette tutte senza cliccare nulla, sono ricorso quindi a setInterval, purtroppo però non so dove metterlo all' interno del codice scritto sopra.

Per semplicita' ecco solamente il codice javascipt:

codice:

function visualizza(id){
	
	
	
  	if (document.getElementById){
  	
  	
    if(document.getElementById(id).style.display == 'none')
    // se l'elemento Ã¨ invisibile
    {
      document.getElementById(id).style.display = 'block';
      // rendi visibile l'elemento; non sulla stessa linea
      
      
      if (id == 'principale1') {
      document.getElementById('principale2').style.display = 'none'; 
      document.getElementById('principale3').style.display = 'none'; 
      document.getElementById('principale4').style.display = 'none'; 
      document.getElementById('principale5').style.display = 'none'; 
      
      
      } 
				

		if (id == 'principale2') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale3').style.display = 'none'; 
		document.getElementById('principale4').style.display = 'none'; 
		document.getElementById('principale5').style.display = 'none'; 
		
		}
		
		if (id == 'principale3') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale2').style.display = 'none'; 
		document.getElementById('principale4').style.display = 'none'; 
		document.getElementById('principale5').style.display = 'none'; 
		
		}
		
		if (id == 'principale4') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale2').style.display = 'none'; 
		document.getElementById('principale3').style.display = 'none'; 
		document.getElementById('principale5').style.display = 'none'; 
		
		}
		
		if (id == 'principale5') {
		document.getElementById('principale1').style.display = 'none'; 
		document.getElementById('principale2').style.display = 'none'; 
		document.getElementById('principale3').style.display = 'none'; 
		document.getElementById('principale4').style.display = 'none'; 
		
		}
		
		
    }
    else{
      document.getElementById(id).style.display = 'block';
    }
  }
}




</script>

ho provato ad inserire setInterval ma non riesco a farlo funzionare, spero che voi mi aiutiate

**cavicchiandrea** · 09-09-2012, 22:48

vedi se http://webprogetti.it/rotazionediv.asp ti può andare bene, altrimenti adattalo alle tue esigenze.

**mygametech** · 09-09-2012, 23:15

cavicchiandrea ma hai preso il mio codice e lo hai modificato? perche se lo hai fatto ti ringrazio di cuore, e' prirpio quello che mi serviva!. Però, se non ti disturbo, potresti spiegarmi brevemente cosa hai fatto? perchè sono alle prime armi con il javascript e colgo queste occasioni per imparare...

**cavicchiandrea** · 09-09-2012, 23:48

Molto sinteticamente due funzioni con all'interno ciclo uno per la rotazione e una per il click, spiegarlo nel dettaglio sarebbe complicato

**mygametech** · 09-09-2012, 23:58

ok va bene, grazie mille del tuo aiuto, so che ora uscirò fuori tema ma ti intendi anche di css3 e di transisioni? Perche' ho visitato il tuo sito e volevo mettere un effetto di sfumatura quando si passa da un div ad un altro.

**cavicchiandrea** · 10-09-2012, 06:46

Originariamente inviato da mygametech
ok va bene, grazie mille del tuo aiuto, so che ora uscirò fuori tema ma ti intendi anche di css3 e di transisioni? Perche' ho visitato il tuo sito e volevo mettere un effetto di sfumatura quando si passa da un div ad un altro.

Non ho affrontato ancora il discorso css3 (per una mia fissa probabilmente sbagliando) perché è supportato solo dai nuovi browser (sopratutto IE) per questo motivo per le transizioni uso jquery che mi garantisce la retro compatibilità anche con browser obsoleti come IE6, pertanto non posso esserti d'aiuto, ma sul forum css sapranno sicuramente cosa fare.

**mygametech** · 10-09-2012, 12:03

ok, grazie. Al limite anche io userò jquery

Discussione: impostare "setInterval" ad una funzione?

Strumenti discussione

Ricerca discussione

Visualizza

impostare "setInterval" ad una funzione?

Permessi di invio