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

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Navegador no interpreta codigo JS		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Navegador no interpreta codigo JS  (Leído 3,460 veces)
MrDev

Desconectado Desconectado

Mensajes: 31


Ver Perfil
Navegador no interpreta codigo JS
« en: 3 Mayo 2016, 20:09 pm »
Pues eso amigos, estoy aqui liado con una pruebecilla, pero no reconoce el codigo JS... A ver si me podeis echar una mano...

Código
  1. <!DOCTYPE>
  4.    <meta charset="utf-8">
  5.    <link rel="stylesheet" href="styles.css">
  6.     <title>Responsive</title>
  7. </head>
  9.    <div class="general">
  10.     <div class="subrela">
  11.        <div class="house casa" id="casa1"></div>
  12.        <div class="house casa" id="casa2"></div>
  13.        <div class="house casa" id="casa3"></div>
  14.        <div class="house casa" id="casa4"></div>
  15.        <div class="house casa" id="casa5"></div>
  16.        <div class="house casa" id="casa6"></div>
  17.     </div>
  18.     <div class="rela">
  19.        <div class="subhouse" id="subcasa1"></div>
  20.        <div class="subhouse" id="subcasa2"></div>
  21.        <div class="subhouse" id="subcasa3"></div>
  22.        <div class="subhouse" id="subcasa4"></div>
  23.        <div class="subhouse" id="subcasa5"></div>
  24.        <div class="subhouse" id="subcasa6"></div>
  25.     </div>
  26.     </div>
  27.  
  28.     <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
  29.     <script type="text/javascript" src="script.js"></script>
  30.  
  31.  
  32. </body>
  33. </html>

Código
  1. function obtenerPadding(){
  2.     var tamaño;
  3.     var css;
  4.     css = document.getElementsByClassName("casa");
  5.     tamaño = css.style.paddingBottom;
  6.     return tamaño;
  7. }
  8.  
  9. $(document).ready(function(){
  10. 	$('#casa1').click(function(){
  11.   		$('#subcasa1').animate({'margin-top': obtenerPadding();});
  12.     });
  13. });

obviamente, tengo jQuery enlazado.
« Última modificación: 4 Mayo 2016, 17:13 pm por MrDev » En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Navegador no interpreta codigo JS
« Respuesta #1 en: 3 Mayo 2016, 20:51 pm »
jQuery no anima colores por defecto. Tienes que usar un plugin o usar otra librería para animar. jQuery UI añade la opción de animar colores.
En línea
MrDev

Desconectado Desconectado

Mensajes: 31


Ver Perfil
Re: Navegador no interpreta codigo JS
« Respuesta #2 en: 4 Mayo 2016, 16:44 pm »
Cita de: MinusFour en  3 Mayo 2016, 20:51 pm
jQuery no anima colores por defecto. Tienes que usar un plugin o usar otra librería para animar. jQuery UI añade la opción de animar colores.

Bueno, lo que pretendo, que no lo puse ahi, es que un div que esta bajo otro, al pulsar en el div superior, el de abajo se deslice, eso si se puede hacer en jquery
En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Navegador no interpreta codigo JS
« Respuesta #3 en: 4 Mayo 2016, 16:51 pm »
Cita de: MrDev en  4 Mayo 2016, 16:44 pm
Bueno, lo que pretendo, que no lo puse ahi, es que un div que esta bajo otro, al pulsar en el div superior, el de abajo se deslice, eso si se puede hacer en jquery

Difícil de ayudar a alguien cuando pones código ficticio que no está relacionado a tu problema. Problemas reales para soluciones reales.
En línea
MrDev

Desconectado Desconectado

Mensajes: 31


Ver Perfil
Re: Navegador no interpreta codigo JS
« Respuesta #4 en: 4 Mayo 2016, 17:14 pm »
Cita de: MinusFour en  4 Mayo 2016, 16:51 pm
Difícil de ayudar a alguien cuando pones código ficticio que no está relacionado a tu problema. Problemas reales para soluciones reales.

He puesto el javascript que estoy usando ahora en el inicio del hilo, lo que quiero hacer es que el div inferior, aumente su margin-top tanto como tenga de padding-bottom el div que se encuentra encima(encima quiere decir que esta z-index +1)
En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Navegador no interpreta codigo JS
« Respuesta #5 en: 4 Mayo 2016, 17:48 pm »
Cita de: MrDev en  4 Mayo 2016, 17:14 pm
He puesto el javascript que estoy usando ahora en el inicio del hilo, lo que quiero hacer es que el div inferior, aumente su margin-top tanto como tenga de padding-bottom el div que se encuentra encima(encima quiere decir que esta z-index +1)

¿Y como vamos a saber cual div está encima si no sabemos el z-index de los elementos?

Tienes un error aquí:

Código
  1. css = document.getElementsByClassName("casa");
  2. tamaño = css.style.paddingBottom;

La función getElementsByClassName regresa un NodeList (una estructura de datos muy parecida a un arreglo) que contiene todos los elementos con una clase en específico. Tu segunda linea intenta recoger una propiedad de un elemento cuando tienes una lista de elementos.
En línea
MrDev

Desconectado Desconectado

Mensajes: 31


Ver Perfil
Re: Navegador no interpreta codigo JS
« Respuesta #6 en: 4 Mayo 2016, 19:02 pm »
Cita de: MinusFour en  4 Mayo 2016, 17:48 pm
¿Y como vamos a saber cual div está encima si no sabemos el z-index de los elementos?

Tienes un error aquí:

Código
  1. css = document.getElementsByClassName("casa");
  2. tamaño = css.style.paddingBottom;

La función getElementsByClassName regresa un NodeList (una estructura de datos muy parecida a un arreglo) que contiene todos los elementos con una clase en específico. Tu segunda linea intenta recoger una propiedad de un elemento cuando tienes una lista de elementos.

Este es el CSS:

Código
  1. body{background-color: lightgray;width: 100%; height: 100%;}
  2. .house{background-color: black;}
  3. .subhouse{background-color: white;z-index: 0;}
  4. .general{background-color: transparent; position: absolute;width: 100%;height: 100%;}
  5. .rela{background-color: transparent;width: 100%; height: 100%; position: absolute;z-index: -1;}
  6. .casa{background-size: cover;}
  7. img{height: 100%;width: auto;}
  8.  
  9.  
  10. /* CSS PARA TAMAÑO MINIMO DE 1024px */
  11. @media only screen and (min-width: 920px) {
  12.     .house{
  13.         width: 30%;
  14.         height: 0;
  15.         margin-left: 2.5%;
  16.         float: left;
  17.         padding-bottom: 19%;
  18.         margin-bottom: 3%;
  19.     }
  20.     .subhouse{
  21.         width: 30%;
  22.         height: 0;
  23.         margin-left: 2.5%;
  24.         float: left;
  25.         padding-bottom: 20%;
  26.         margin-bottom: 2%;
  27.     }
  28. }
  29.  
  30.  
  31. /* CSS PARA TAMAÑO MINIMO DE 600px */
  32. @media only screen and (max-width: 920px) {
  33.     .house{
  34.         width: 35%;
  35.         height: 0;
  36.         margin-left: 9%;
  37.         float: left;
  38.         padding-bottom: 21%;
  39.         margin-bottom: 6%;
  40.     }
  41.     .subhouse{
  42.         width: 35%;
  43.         height: 0;
  44.         margin-left: 9%;
  45.         float: left;
  46.         padding-bottom: 24%;
  47.         margin-bottom: 3%;
  48.     }
  49. }
  50.  
  51.  
  52. /* CSS PARA TAMAÑO PEQUEÑO  */
  53. @media only screen and (max-width: 600px) {
  54.     .house{
  55.         width: 90%;
  56.         height: 0;
  57.         margin-left: 5%;
  58.         margin-right: 5%;
  59.         float: left;
  60.         padding-bottom: 54%;
  61.         margin-bottom: 6%;
  62.     }
  63.     .subhouse{
  64.         width: 90%;
  65.         height: 0;
  66.         margin-left: 5%;
  67.         margin-right: 5%;
  68.         float: left;
  69.         padding-bottom: 58%;
  70.         margin-bottom: 2%;
  71.     }
  72. }
  73.  
  74. #casa1{
  75.     background-image: url(img/casa1.jpg);
  76. }
  77. #casa2{
  78.     background-image: url(img/casa2.jpg);
  79. }
  80. #casa3{
  81.     background-image: url(img/casa3.jpg);
  82. }
  83. #casa4{
  84.     background-image: url(img/casa4.jpg);
  85. }
  86. #casa5{
  87.     background-image: url(img/casa5.jpg);
  88. }
  89. #casa6{
  90.     background-image: url(img/casa6.jpg);
  91. }
  92.  
  93.  

Entonces tendria que añadirles otro id para sacarlos?
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
El Navegador no me Carga Todo el codigo HTML (JSP)
Java 		Lu15_CL4 2 4,598 Último mensaje 3 Noviembre 2009, 08:01 am
por Lu15_CL4
busco codigo fuente de navegador web en c++
Programación C/C++ 		netbios_hack1111111j 5 9,281 Último mensaje 7 Septiembre 2011, 22:18 pm
por Slava_TZD
¿Como se interpreta el ADN? « 1 2 »
Foro Libre 		Ori-chan 10 4,853 Último mensaje 13 Febrero 2015, 17:51 pm
por Gh057
Cómo anclar un código a un navegador?
Desarrollo Web 		ike array 6 4,202 Último mensaje 25 Noviembre 2016, 22:03 pm
por ike array
PHP no me interpreta el código « 1 2 »
PHP 		SantiagoRiver 10 7,305 Último mensaje 28 Noviembre 2016, 04:38 am
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines