Navegador no interpreta codigo JS

Iniciado por MrDev, 3 Mayo 2016, 20:09 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

MrDev

3 Mayo 2016, 20:09 PM Ultima modificación: 4 Mayo 2016, 17:13 PM por MrDev
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 (html4strict) [Seleccionar]
<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
   <title>Responsive</title>
</head>
<body>
  <div class="general">
   <div class="subrela">
      <div class="house casa" id="casa1"></div>
      <div class="house casa" id="casa2"></div>
      <div class="house casa" id="casa3"></div>
      <div class="house casa" id="casa4"></div>
      <div class="house casa" id="casa5"></div>
      <div class="house casa" id="casa6"></div>
   </div>
   <div class="rela">
      <div class="subhouse" id="subcasa1"></div>
      <div class="subhouse" id="subcasa2"></div>
      <div class="subhouse" id="subcasa3"></div>
      <div class="subhouse" id="subcasa4"></div>
      <div class="subhouse" id="subcasa5"></div>
      <div class="subhouse" id="subcasa6"></div>
   </div>
   </div>
   
   <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
   <script type="text/javascript" src="script.js"></script>
 
 
</body>
</html>

Código (javascript) [Seleccionar]

function obtenerPadding(){
    var tamaño;
    var css;
    css = document.getElementsByClassName("casa");
    tamaño = css.style.paddingBottom;
    return tamaño;
}

$(document).ready(function(){
$('#casa1').click(function(){
  $('#subcasa1').animate({'margin-top': obtenerPadding();});
    });
});

obviamente, tengo jQuery enlazado.

MinusFour

#1
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.

MrDev

#2
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

MinusFour

#3
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.

MrDev

#4
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)

MinusFour

#5
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 (javascript) [Seleccionar]

css = document.getElementsByClassName("casa");
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.

MrDev

#6
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 (javascript) [Seleccionar]

css = document.getElementsByClassName("casa");
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 (css) [Seleccionar]
body{background-color: lightgray;width: 100%; height: 100%;}
.house{background-color: black;}
.subhouse{background-color: white;z-index: 0;}
.general{background-color: transparent; position: absolute;width: 100%;height: 100%;}
.rela{background-color: transparent;width: 100%; height: 100%; position: absolute;z-index: -1;}
.casa{background-size: cover;}
img{height: 100%;width: auto;}


/* CSS PARA TAMAÑO MINIMO DE 1024px */
@media only screen and (min-width: 920px) {
    .house{
        width: 30%;
        height: 0;
        margin-left: 2.5%;
        float: left;
        padding-bottom: 19%;
        margin-bottom: 3%;
    }
    .subhouse{
        width: 30%;
        height: 0;
        margin-left: 2.5%;
        float: left;
        padding-bottom: 20%;
        margin-bottom: 2%;
    }
}


/* CSS PARA TAMAÑO MINIMO DE 600px */
@media only screen and (max-width: 920px) {
    .house{
        width: 35%;
        height: 0;
        margin-left: 9%;
        float: left;
        padding-bottom: 21%;
        margin-bottom: 6%;
    }
    .subhouse{
        width: 35%;
        height: 0;
        margin-left: 9%;
        float: left;
        padding-bottom: 24%;
        margin-bottom: 3%;
    }
}


/* CSS PARA TAMAÑO PEQUEÑO  */
@media only screen and (max-width: 600px) {
    .house{
        width: 90%;
        height: 0;
        margin-left: 5%;
        margin-right: 5%;
        float: left;
        padding-bottom: 54%;
        margin-bottom: 6%;
    }
    .subhouse{
        width: 90%;
        height: 0;
        margin-left: 5%;
        margin-right: 5%;
        float: left;
        padding-bottom: 58%;
        margin-bottom: 2%;
    }
}

#casa1{
    background-image: url(img/casa1.jpg);
}
#casa2{
    background-image: url(img/casa2.jpg);
}
#casa3{
    background-image: url(img/casa3.jpg);
}
#casa4{
    background-image: url(img/casa4.jpg);
}
#casa5{
    background-image: url(img/casa5.jpg);
}
#casa6{
    background-image: url(img/casa6.jpg);
}

 

Entonces tendria que añadirles otro id para sacarlos?
Imprimir
Ir Arriba Páginas1
Acciones del Usuario