Javascript cambio lingua

**XNeo** · 23-08-2008, 14:38

Salve devo rendere multilingua delle pagine html, non posso usare linguaggi lato server, al massimo posso usare javascript.

Sto usando le classiche bandierine, a seconda che si clicchi su quella italiana o quella inglese il contenuto di un div cambia

codice:

<script language="javascript">
<!--

		    function change_description( language )
			{
				document.getElementById('description_it').style.display = 'none';
				document.getElementById('description_en').style.display = 'none';

				document.getElementById('description_' + language ).style.display = '';
			}

			
		-->
	</script>


 
			  


    <script language="javascript">
    
			  <!--
			var flag_lang_it = 'Nome articolo';
			var flag_lang_en = 'Article name';

			
			if( flag_lang_it != '' ) 
			  	document.getElementById('flag_lang_it').style.display = '';
			if( flag_lang_en != '' ) 
			  	document.getElementById('flag_lang_en').style.display = '';
			  -->
			  
	</script>

Lo script funziona bene con due contenitori div uno con id="description_it" e l'altro con id="description_en" e ovviamente style="display:none;" per non farlo visualizzare senza che si clicchi sulla bandierina inglese.

Il problema sta nel fatto che funziona solo su questa coppia di div

Nel resto della pagina ci sono altre div in cui vorrei che il contenuto cambiasse a seconda della bandierina selezionata, ma pur dandogli gli stessi id lo script non agisce su questi.

Fino ad ora ho usato scorciatoie Prima ho usato più bandierine ovvero ogni blocco che volevo in doppia lingua aveva le sue due bandierine, ma non è il massimo, l'ideale è quella di avere due bandierine in alto che controllino il tutto. Poi (proprio per avere solo due bandierine) ho racchiuso tutto la pagina in un div id="description_it" e poi la sua versione inglese in un div id="description_en", ma oltre a non essere la miglior soluzione tecnica, visto la quantita di codice in più, mi costringe a duplicare ogni volta una grande quantità di contenuti che non ha bisogno di essere in doppia lingua.

Come posso ovviare al problema?
Leggendo un pò di guide forse fa al caso mio applicare il ciclo for allo script in modo da farlo funzionare anche agli altri div che presentano lo stesso id, ma non so come applicarlo... potete darmi una mano?

Spero di essere stato chiaro, grazie dell'attenzione

**cavicchiandrea** · 23-08-2008, 18:04

Si forse con un ciclo potresti risolvere, ma è un operazione complicata per un profano, inoltre ricaricando la pagina perderebbe tutte le impostazioni e per ovviare a questo problema dovresti impostare dei cookie. Secondo me non ne vale la pena io farei due pagine index-it e index-en, ma se tu non sei dello stesso avviso leggi le ottime guide di html.it che trovi qui. http://javascript.html.it/guide/

**frizzo28** · 23-08-2008, 19:14

Ecco un codice funzionante scritto or ora da me dove puoi usare quanti div vuoi... e la modifica viene applicata a tutti...
Cliccando su italiano visualizza solo i div con class=ita e cliccando su inglese tutti quelli con class=ingle

Codice PHP:


<html>

<head>

<script type="text/javascript">

<!--











function lingua(ling)

{

//Nascondo entrambe le lingue

var appoit=document.getElementsByTagName('div');

for(i=0;i<appoit.length;i++){appoit.item(i).style.display='none';}



//Visualizzo la lingua scelta

for(i=0;i<appoit.length;i++){if(appoit.item(i).className==ling)appoit.item(i).style.display='block';}









}





// -->





</script>



</head>







<body>

[url="javascript:lingua('ita')"]Italiano[/url]


[url="javascript:lingua('ingle')"]Inglese[/url]





<div class="ita">Uao primo contenuto in itliano</div>

<div class="ingle" style="display:none">Yeah first contnent in english</div>



<div class="ita">Ciao mondo</div>

<div class="ingle" style="display:none">Hello World</div>



<div class="ita">Il libro...</div>

<div class="ingle" style="display:none">The Book</div>



<div class="ita">Non so che scrivere</div>

<div class="ingle" style="display:none">I don't know what to write</div>

</body>





</html>

ciao

**XNeo** · 23-08-2008, 20:59

Si forse con un ciclo potresti risolvere, ma è un operazione complicata per un profano

Beh almeno non era una cavolata la cosa che avevo pensato

Secondo me non ne vale la pena io farei due pagine index-it e index-en, ma se tu non sei dello stesso avviso leggi le ottime guide di html.it che trovi qui

Se era un sito avrei agito in questo modo sicuramente, il fatto è che sono insersioni ebay, quindi devo creare una pagina html per ogni insersione e inserire per esempio i link alle foto su host esterni o le misure degli articoli due volte mi allunga il lavoro, anche se sono dei semplici copia e incolla, molto macchinoso agire su 3 chilometri di codice, andando a cambiare di volta in volta i vari elementi. L'ideale per il prossimo futuro sarebbe creare un piccolo cms che mi generi queste pagine in modo da velocizzare la loro creazione. Ma mi devo mettere sotto e studiare bene questi l'inguaggi, arruffando non si va molto lontano.

Ecco un codice funzionante scritto or ora da me dove puoi usare quanti div vuoi... e la modifica viene applicata a tutti...
Cliccando su italiano visualizza solo i div con class=ita e cliccando su inglese tutti quelli con class=ingle

Ti ringrazio moltissimo, mi hai risolto una bella grana, in modo molto semplice e pulito. Devo proprio mettermi a studiare

Grazie mille a tutti

**XNeo** · 26-08-2008, 11:52

Originariamente inviato da frizzo28
Ecco un codice funzionante scritto or ora da me dove puoi usare quanti div vuoi... e la modifica viene applicata a tutti...
Cliccando su italiano visualizza solo i div con class=ita e cliccando su inglese tutti quelli con class=ingle

Codice PHP:


<html>

<head>

<script type="text/javascript">

<!--











function lingua(ling)

{

//Nascondo entrambe le lingue

var appoit=document.getElementsByTagName('div');

for(i=0;i<appoit.length;i++){appoit.item(i).style.display='none';}



//Visualizzo la lingua scelta

for(i=0;i<appoit.length;i++){if(appoit.item(i).className==ling)appoit.item(i).style.display='block';}









}





// -->





</script>



</head>







<body>

[url="javascript:lingua('ita')"]Italiano[/url]


[url="javascript:lingua('ingle')"]Inglese[/url]





<div class="ita">Uao primo contenuto in itliano</div>

<div class="ingle" style="display:none">Yeah first contnent in english</div>



<div class="ita">Ciao mondo</div>

<div class="ingle" style="display:none">Hello World</div>



<div class="ita">Il libro...</div>

<div class="ingle" style="display:none">The Book</div>



<div class="ita">Non so che scrivere</div>

<div class="ingle" style="display:none">I don't know what to write</div>

</body>





</html>

ciao

Mmmmh scusa frizzo28 ma non mi funziona lo script... se clikko su una lingua mi apre una pagina in cui mi dice che è impossibile visualizzarla perchè probabilmente il contenuto richiede un programma non presente nel computer.

Mi sembra strano, non ho mai avuto problemi con javascript, poi l'ho provato su diversi pc il risultato è uguale, a te funziona?

**Xinod** · 26-08-2008, 15:11

togli il - tra java e script

**XNeo** · 26-08-2008, 15:21

Oh mamma mia.... sono stato due ore guide alla mano a controllare la sintassi, non volevo rompere per un errorino di battitura, ed era l'errore più semplice che ci poteva essere, lo avrò riletto 100 volte

Grazie mille

**XNeo** · 27-08-2008, 19:38

Vi devo rompere un'altra volta... lo script ora va bene ma c'è un piccolo problema, non mi lascia stare gli altri div.

Mi spiego meglio, se inserisco altri div che non devono essere influenzati dal cambio lingua, va tutto bene fino a che non entra in azione lo script e vengono correttamente visualizzati, ma una volta che si preme su italiano o inglese il div sparisce.

O mi serve un comando if nello script che dica che se il class del div non è ita o ingle va lasciato stare, o qualche proprietà da aggiungere ai div che non devono essere influenzati che non faccia agiro lo script.

Altrimenti devo usare i div solo per i contenuti multilingua e fare tutto con le tabelle, ma volevo realizzarlo tableless.

Sapete per l'ennesiamo volta aiutarmi? Grazie dell'attenzione

**Xinod** · 27-08-2008, 20:22

puoi fare in tanti modi diversi, x es.

codice:

function lingua(ling){
  var altra=(ling=='ita')?'ingle':'ita';
  var appoit=document.getElementsByTagName('div');
  for(i=0;i<appoit.length;i++){
    if(appoit[i].class){
      if(appoit[i].class==ling){
         appoit[i].style.display='block';
      }
      else if(appoit[i].class==altra){
         appoit[i].style.display='none';
      }
    }
  }
}

ciao

**frizzo28** · 27-08-2008, 20:32

Stavolta l'ho testato

Questa versione non cambia i div diversi da ita e ingle ma li lascia come sono

...

Codice PHP:


<html> 

<head> 

<script type="text/javascript"> 

<!-- 











function lingua(ling) 

{ 

//Nascondo entrambe le lingue 

var appoit=document.getElementsByTagName('div'); 

for(i=0;i<appoit.length;i++){if(appoit.item(i).className=="ita"||appoit.item(i).className=="ingle")appoit.item(i).styl



e.display='none';} 



//Visualizzo la lingua scelta 

for(i=0;i<appoit.length;i++){if(appoit.item(i).className==ling)appoit.item(i).style.display='block';} 









} 





// --> 





</script> 



</head> 







<body> 

[url="javascript:lingua('ita')"]Italiano[/url]
 

[url="javascript:lingua('ingle')"]Inglese[/url] 





<div class="ita">Uao primo contenuto in itliano</div> 

<div class="ingle" style="display:none">Yeah first contnent in english</div> 



<div class="ita">Ciao mondo</div> 

<div class="ingle" style="display:none">Hello World</div> 



<div class="ita">Il libro...</div> 

<div class="ingle" style="display:none">The Book</div> 

<div class "Prova">

Div per conto suo sempre uguale


</div>



<div class="ita">Non so che scrivere</div> 

<div class="ingle" style="display:none">I don't know what to write</div> 

</body> 





</html>

[OT per un Moderatore]K non era uno errore di battitura.... io digito javascript per intero e quando posto il codice vedo scritto java-script com'e'?

Discussione: Javascript cambio lingua

Strumenti discussione

Ricerca discussione

Visualizza

Javascript cambio lingua

Permessi di invio