Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: MrDev en 3 Mayo 2016, 20:09 pm


Título: Navegador no interpreta codigo JS
Publicado por: MrDev 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.

Título: Re: Navegador no interpreta codigo JS
Publicado por: 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.

Título: Re: Navegador no interpreta codigo JS
Publicado por: MrDev 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

Título: Re: Navegador no interpreta codigo JS
Publicado por: MinusFour 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.

Título: Re: Navegador no interpreta codigo JS
Publicado por: MrDev 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)

Título: Re: Navegador no interpreta codigo JS
Publicado por: MinusFour 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.

Título: Re: Navegador no interpreta codigo JS
Publicado por: MrDev 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?


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines