elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Como proteger una cartera - billetera de Bitcoin


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] duda de script		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] duda de script  (Leído 6,125 veces)
fernandorb10

Desconectado Desconectado

Mensajes: 10


Ver Perfil
[Resuelto] duda de script
« en: 18 Septiembre 2015, 08:37 am »
buenas noches,

Soy nuevo en este foro y no se bien si esto va aqui, saludos a todos. Espero ayudar y ser ayudado.


Al grano, mi duda es que tengo un script de cambio de idioma en mi hotspot y es el siguiente.

Código
  1. <script type="text/javascript" >
  2. var idioma = "hispano";
  3. function ponerIdioma(cual)   {
  4.    document.getElementById(idioma).style.display = "none";
  5.  
  6.  
  7.    idioma = cual;
  8.  
  9.    document.getElementById(idioma).style.display = "block";
  10.  
  11.  
  12. }
  13. </script>

BOTONES

Código
  1. <button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>
  2.  
  3.  
  4.    <button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die  Anweisung in deutsch</b></button>
  5.  
  6.  
  7.     <button onClick="ponerIdioma('hispano')" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>



Y estos son los div con la id de (hispano, english o aleman)

Código
  1. <div id="hispano" >
  2.             texto en español.
  3.          </div>
  4.  
  5.          <div id="english" style="display: none;" >
  6.             texto en ingles
  7.          </div>
  8.  
  9.          <div id="aleman" style="display: none;" >
  10.             TEXTO EN ALEMAN
  11.          </div>


Vale, hasta aquí bien, funciona correctamente. Pero yo necesito que cambie mas div aparte de este texto, necesito que cambie dos div's mas. En total al pinchar al boton tiene que hacer 3 cambios de texto o imagen en la pagina.

¿Como podria hacerlo?

Gracias de antebrazo ;)

Mod: Obligatorio el uso de etiquetas GeSHi.
« Última modificación: 21 Septiembre 2015, 16:44 pm por #!drvy » En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: duda de script
« Respuesta #1 en: 18 Septiembre 2015, 14:02 pm »
Sin saber la estructura de tu archivo HTML y los elementos en especifico que quieres cambiar, no podemos ayudarte. Te recomiendo que uses clases para elementos del mismo idioma:

Código
  1. <div class="english">Text1</div>
  2. <div class="english">Text2</div>
  3. <div class="english">Text3</div>
  4.  
  5. <div class="hispano">Text1</div>
  6. <div class="hispano">Text2</div>
  7. <div class="hispano">Text3</div>

Posible javascript:
Código
  1. var idioma = "hispano";
  2. function ponerIdioma(cual)   {
  3.    [idioma, cual].forEach(function(i){
  4.        toggleClassVisibility(i);
  5.        idioma = i;
  6.    });
  7. }
  8.  
  9. function toggleClassVisibility(cs){
  10.    var ele = document.getElementsByClassName(cs);
  11.    Array.prototype.forEach.call(ele, function(el){
  12.       el.style.display = el.offsetParent !== null ? 'none' : 'block';
  13.    });
  14. }

Con jQuery es mucho más sencillo:

Código
  1. var idioma = "hispano";
  2. function ponerIdioma(cual){
  3.     $('.' + idioma).hide();
  4.     $('.' + cual).show();
  5.     idioma = cual;
  6. }
« Última modificación: 18 Septiembre 2015, 22:28 pm por MinusFour » En línea
fernandorb10

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: duda de script
« Respuesta #2 en: 18 Septiembre 2015, 20:50 pm »
Cita de: MinusFour en 18 Septiembre 2015, 14:02 pm
Sin saber la estructura de tu archivo HTML y los elementos en especifico que quieres cambiar, no podemos ayudarte. Te recomiendo que uses clases para elementos del mismo idioma:

Código
  1. <div class="english">Text1</div>
  2. <div class="english">Text2</div>
  3. <div class="english">Text3</div>
  4.  
  5. <div class="hispano">Text1</div>
  6. <div class="hispano">Text2</div>
  7. <div class="hispano">Text3</div>

Posible javascript:
Código
  1. var idioma = "hispano";
  2. function ponerIdioma(cual)   {
  3.    [idioma, cual].forEach(function(i){
  4.        toggleClassVisibility(i);
  5.        idioma = i;
  6.    });
  7. }
  8.  
  9. function toggleClassVisibility(class){
  10.    var ele = document.getElementsByClassName(class);
  11.    Array.prototype.forEach.call(ele, function(el){
  12.       el.style.display = el.style.display === 'none' ? 'block' : 'none';
  13.    });
  14. }

Con jQuery es mucho más sencillo:

Código
  1. var idioma = "hispano";
  2. function ponerIdioma(cual){
  3.     $('.' + idioma).hide();
  4.     $('.' + cual).show();
  5.     idioma = cual;
  6. }


Buenas Minus, muchisimas gracias por tu ayuda, pero aún no me funciona.

Veamos, he puesto el script de jQuery y he puesto los div tal como me has pedido.

<script type="text/javascript" >
    var idioma = "hispano";
    function ponerIdioma(cual){
        $('.' + idioma).hide();
        $('.' + cual).show();
        idioma = cual;
    }

</script>

Pero en el boton onclick deberia de cambiar algo?

<button onClick="ponerIdioma('hispano');" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>
« Última modificación: 18 Septiembre 2015, 21:07 pm por fernandorb10 » En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: duda de script
« Respuesta #3 en: 18 Septiembre 2015, 21:03 pm »
Como te explique en el tema anterior, depende mucho de la estructura final de tu HTML, la cual no tenemos. Porfavor, usa las etiquetas [code ] [ /code] necesarias. Espero tambien que hayas cargado jQuery.
En línea
fernandorb10

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: duda de script
« Respuesta #4 en: 18 Septiembre 2015, 21:08 pm »
De acuerdo, ya entiendo lo de la etiqueta code.4

Script le cargo así o bien le pongo en la pagina de index.html mia como te pusé arriba.

Código:
<script src="jquery.js"></script>

La estructura es sencilla, es un html que tiene 3 botones, uno para cada idioma (aleman, ingles y español), al pinchar en uno de esos botones tiene que cambiar 2 imagenes que ya tengo en mi carpeta de img (al pinchar en boton ingles cambia 2 imagenes a imagenespañol1 a imageningles1 y imagenespañol2 por imageningles2 por ejemplo)  y el texto que ya tengo en esos idiomas.  

BOTONES:


Código
  1. <button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>
  2. <button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die  Anweisung in deutsch</b></button> 
  3. <button onClick="ponerIdioma('hispano');" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>




Gracias por tu ayuda.
« Última modificación: 18 Septiembre 2015, 21:16 pm por fernandorb10 » En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: duda de script
« Respuesta #5 en: 18 Septiembre 2015, 21:32 pm »
Si, pero eso no es todo el codigo HTML. Necesitamos ver el código HTML de los contenedores.
En línea
fernandorb10

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: duda de script
« Respuesta #6 en: 18 Septiembre 2015, 21:42 pm »
Código
  1. <table width="10%" style="margin-top: 10%;"   bgcolor="white" opacity: 0.3;> 
  2. 	<th colspan=2> <h1> <font size="15px" color="#073763"> INSTRUCTIONS FOR USE 
  3. 	<br>
  4.  
  5. 	<button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>
  6.  
  7.  
  8. 	<button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die  Anweisung in deutsch</b></button> 
  9.  
  10.  
  11. 	 <button onClick="ponerIdioma('hispano');" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>
  12.  
  13. 	</font> </h1></th>
  14.  
  15.  
  16. 	<tr>  
  17. 	<td>
  18. 			<div class="hispano" >
  19. 			<img src="img/eslogin.png">
  20. 			</div>
  21.  
  22. 			<div class="english" style="display: none;" >
  23. 				<img src="img/button9.png">
  24. 			</div>
  25.  
  26. 			<div class="aleman" style="display: none;" >
  27. 				<img src="img/button.png">
  28. 			</div>
  29.  
  30.  
  31.  
  32.  
  33.  
  34. 	</td>
  35. 	<td>
  36.  
  37.  
  38. 			<div class="hispano" >
  39. 				<img src="img/esusers.png"  alt="Español"/>
  40. 			</div>
  41.  
  42. 			<div class="english" style="display: none;" >
  43. 				<img src="img/button10.png"  alt="Español"/>
  44. 			</div>
  45.  
  46. 			<div class="aleman" style="display: none;" >
  47. 				<img src="img/button.png">
  48. 			</div>
  49.  
  50.  
  51.  
  52.  
  53. 	</td>
  54. 	</tr>
  55. 	<tr>
  56. 	<td>
  57.  
  58.  
  59.  
  60.  
  61. <div class="hispano"  >
  62. 	<div style="color:black; font-size: 16px"> <b>TEXTO EN ESPAÑOL </b> </div>
  63. </div>
  64.  
  65. <div class="english" style="display: none;"  > 
  66. 	<div style="color:black; font-size: 16px"> TEXTO EN INGLES</div>
  67.  
  68. </div>
  69.  
  70. <div class="aleman" style="display: none;" > 
  71. 	<div style="color:black; font-size: 16px"> TEXTO EN ALEMAN </b></div>
  72.  
  73. </div>
  74.  
  75. </td>
  76. 	<td align="center">
  77. 				IMAGEN
  78. 	</td>
  79. </tr>
  80.  
  81.  
  82.  
  83. 		</table>
  84.  
  85.  
  86. 	</td>
  87. 	</tr>
  88. </table>


Necesitas algo mas?
En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: duda de script
« Respuesta #7 en: 18 Septiembre 2015, 22:20 pm »
Pues el código en jQuery funciona:

https://jsfiddle.net/r10hgn2r/

El código en Vanilla javascript necesita cambios.
En línea
fernandorb10

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: duda de script
« Respuesta #8 en: 20 Septiembre 2015, 23:54 pm »
Cita de: MinusFour en 18 Septiembre 2015, 22:20 pm
Pues el código en jQuery funciona:

https://jsfiddle.net/r10hgn2r/

El código en Vanilla javascript necesita cambios.

guau minus, ahora hace falta meterlo al notepad que no me funciona. Dime si ves algo erroneo que a mi vista se escapa

Código:

<!doctype html>

<html>

  <head>
    <title>A blank HTML page</title>
    <meta charset="utf-8" />

    <script type="text/javascript">

      var idioma = "hispano";
	function ponerIdioma(cual){
   $('.' + idioma).hide();
   $('.' + cual).show();
   idioma = cual;
}

    </script>

  </head>

  <body>
<button onclick="ponerIdioma('english')">English</button>
<button onclick="ponerIdioma('hispano')">Hispano</button>

<div class="english" style="display: none;">Ingles</div>
<div class="english" style="display: none;">Ingles</div>
<div class="english" style="display: none;">Ingles</div>
 
<div class="hispano">Español</div>
<div class="hispano">Español</div>
<div class="hispano">Español</div>
  </body>

</html>

En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: duda de script
« Respuesta #9 en: 21 Septiembre 2015, 04:33 am »
No tienes importado jQuery.
En línea
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
{Resuelto} [Duda VBS] Clipboardd. « 1 2 3 »
Scripting 		xassiz_ 22 11,910 Último mensaje 15 Septiembre 2009, 16:45 pm
por xassiz_
[Resuelto] Abrir primero un script que una página .html
Desarrollo Web 		Puntoinfinito 1 2,520 Último mensaje 12 Enero 2013, 22:25 pm
por ‭lipman
[Resuelto] Problema al probar los script de entrada al localhost
PHP 		Blitox1570 7 3,804 Último mensaje 3 Julio 2015, 17:20 pm
por DarK_FirefoX
Problema con While En Script de Ubuntu (Resuelto)
Scripting 		Aitorseven 8 8,304 Último mensaje 21 Mayo 2018, 20:26 pm
por Aitorseven
[DUDA SQL] IF en SQL Script [RESUELTO]
Bases de Datos 		Reent 0 2,854 Último mensaje 4 Agosto 2020, 15:34 pm
por Reent
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines