Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: fernandorb10 en 18 Septiembre 2015, 08:37 am



Título: [Resuelto] duda de script
Publicado por: fernandorb10 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.


Título: Re: duda de script
Publicado por: 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(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. }


Título: Re: duda de script
Publicado por: fernandorb10 en 18 Septiembre 2015, 20:50 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>




Título: Re: duda de script
Publicado por: MinusFour 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.


Título: Re: duda de script
Publicado por: fernandorb10 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.


Título: Re: duda de script
Publicado por: MinusFour 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.


Título: Re: duda de script
Publicado por: fernandorb10 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?


Título: Re: duda de script
Publicado por: 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.


Título: Re: duda de script
Publicado por: fernandorb10 en 20 Septiembre 2015, 23:54 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>



Título: Re: duda de script
Publicado por: MinusFour en 21 Septiembre 2015, 04:33 am
No tienes importado jQuery.


Título: Re: duda de script
Publicado por: fernandorb10 en 21 Septiembre 2015, 09:42 am
No tienes importado jQuery.

Uala!!

Ahora si,

Muchisimas gracias!!!