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

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] ¿No me cambia el estilo JS?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] ¿No me cambia el estilo JS?  (Leído 2,661 veces)
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
[Resuelto] ¿No me cambia el estilo JS?
« en: 19 Enero 2020, 03:50 am »
Que tal quiero cambiar el tamaño de un div mediante JS pero curiosamente realizo esto en una carpeta donde comienzo la maqueta del diseño y luego ya lo meto a una pagina.
desde el maqueteo si me cambiaba el tamaño pero cuando lo meti a la pagina ya no este es el código:
Código
  1. <div id="world">
  2.  
  3.     <div class="credencialPos">
  4.        <div class="fCuerpo" id="ficha">
  5.  
  6.     <div class="fBoxDatos" id="BoxD">
  7.         <h1>US</h1>
  8.         <div class="fBoxDatos1">
  9.             <div class="fBoxDatos2">
  10.                 <p><strong>Nivel: </strong><?php echo $_SESSION['nivel']; ?></p>
  11.                 <p><strong>Exp: </strong><?php echo $_SESSION['exp']; ?>XP</p>
  12.                 <p><strong>Amigos: </strong>500</p>
  13.                 <p><strong>Respeto: </strong>100</p>
  14.             </div>
  15.             <div class="fBoxDatos3">
  16.                 <p><strong>Puntaje : </strong>1000</p>
  17.                 <p><strong>Nivel : </strong>100</p>
  18.             </div>
  19.         </div>
  20.  
  21.  
  22.  
  23.     </div>
  24.     <div class="fBoxMedallas" id="BoxM">
  25.         <img src="../Mesa/Imgs/Medallas/medalla1.png" width="100" height="100" />
  26.     </div>
  27.  
  28. </div>
  29.  
  30.     </div>
  31.   </div>
  32.  

Ahora el de mi js
Código
  1. var p = false;
  2.     var m = false;
  3.     var DP = document.getElementById("BoxD");
  4.     var DM = document.getElementById("BoxM");
  5.     var ficha = document.getElementById("ficha");
  6.     function abrirDP() {        
  7.         if (p) {
  8.             p = false;
  9.             ficha.style.height = 420;
  10.             DP.style.visibility = "hidden";
  11.         } else {
  12.             p = true;
  13.             m = false;
  14.             ficha.style.height = 580;
  15.             DP.style.visibility = "visible";
  16.             DM.style.visibility = "hidden";
  17.         }
  18.  
  19.  
  20.     }
  21.  
  22.     function abrirDM() {
  23.         if (m) {
  24.             m = false;
  25.             ficha.style.height = 420;
  26.             DM.style.visibility = "hidden";
  27.         } else {
  28.             p = false;
  29.             m = true;
  30.             ficha.style.height = 510;
  31.             DP.style.visibility = "hidden";
  32.             DM.style.visibility = "visible";
  33.         }
  34.  
  35.     }
  36.  
Si vuelve visible y lo oculta los DP y DM pero ficha no obtiene ningun cambio
« Última modificación: 23 Febrero 2020, 00:01 am por #!drvy » En línea
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Re: ¿No me cambia el estilo JS?
« Respuesta #1 en: 19 Enero 2020, 04:26 am »
Ya lo pude solucionar, pero aque se debe de que solo en lugar de usar
Código:
ficha.style.height = 580;
use esto
Código:
ficha.style.height = "580px";
si me funcionaba con el primero, sera por la extensión donde lo probe es html y como ahora estoy trabajando dentro de un php?
En línea
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: ¿No me cambia el estilo JS?
« Respuesta #2 en: 19 Enero 2020, 13:43 pm »
Visibility solo afecta a textos y así.
Alterna entre display hidden y display block también.


Te recomiendo diseño responsive usando el viewport en lugar de px que se van a mostrar muy distintos dependiendo de cada pantalla.
Archivo html:
Código
  2.   <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, target-densitydpi=device-dpi">
  3. </head>
  4.  
  6.   <img src="imagen.png" class="botonImagen">
  7. </body>
   

Archivo CSS:
Código
  1. /* Por Defecto */
  2. .botonImagen {
  3.   width: 5.5vw;
  4. }
  5.  
  6.  /* Monitores alta resolución. */
  7. @media (min-width: 1281px) {
  8.  
  9.   .botonImagen {
  10.     width: 2.75vw;
  11.   }
  12.  
  13. }
  14.  
  15.  /* Resolución común para pcs y portátiles. */
  16. @media (min-width: 1025px) and (max-width: 1280px) {
  17.  
  18.   .botonImagen {
  19.     width: 2.25vw;
  20.   }
  21.  
  22. }
  23.  
  24. /* Tablets Ipads y similares resoluciones en modo vertical. */
  25. @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  26.  
  27.   .botonImagen {
  28.     width: 5.5vw;
  29.   }
  30.  
  31. }
  32.  
  33. /* Tablets Ipads y similares resoluciones en modo horizontal. */
  34. @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  35.  
  36.   .botonImagen {
  37.     width: 2.25vw;
  38.   }
  39.  
  40. }
  41.  
  42. /* Tables de baja resolución y Smartphones de alta resolución. Posición Horizontal */
  43. @media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
  44.  
  45.   .botonImagen {
  46.     width: 2.25vw;
  47.   }
  48.  
  49. }
  50.  
  51. /* Moviles Vertical */
  52.  @media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
  53.  
  54.   .botonImagen {
  55.     width: 5.5vw;
  56.   }
  57.  
  58. }

Hay muchas otras formas de crear diseños adaptables a las pantallas.
vw viewportWidth es el % del ancho del viewport.

vh viewportHeight es el % del alto del viewport.

Si pones 100vw el elemento ocupara todo el espacio visible horizontalmente.

Ando haciendo un proyecto usando todos estos elementos. Puedes ver como no muestro de la misma forma la web en un smartphone o en un pc.
https://smlearningfullstack.000webhostapp.com/dhunter/indexBUENO.html
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Re: ¿No me cambia el estilo JS?
« Respuesta #3 en: 19 Enero 2020, 21:57 pm »
Muchisimas gracias  ;-) me servirá!
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como se llaman este estilo de imagenes? (otro estilo XD) « 1 2 »
Diseño Gráfico 		Jnex 16 12,421 Último mensaje 18 Marzo 2009, 02:16 am
por JERRY110982
La frecuencia de la interfaz en modo monitor parece que no cambia, pero CAMBIA
Wireless en Linux 		gidiem 3 3,654 Último mensaje 26 Noviembre 2010, 21:28 pm
por zydas
[RESUELTO] Llamar a un tag custom (class,style pues estilo)
Desarrollo Web 		Servia 0 1,908 Último mensaje 29 Mayo 2011, 20:45 pm
por Servia
estilo a formulario <input type="text">[RESUELTO]
Desarrollo Web 		basickdagger 1 2,133 Último mensaje 12 Septiembre 2014, 23:33 pm
por #!drvy
Cambio la foto de mi cuenta google/gmail pero no se cambia o cambia parcialmente
Dudas Generales 		Maycole 1 5,439 Último mensaje 24 Enero 2020, 20:14 pm
por Maycole
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines