1

tengo un codigo en javascript que accede a firebase para obtener informacion y luego inserta codigo html con dicha informacion. Todo esto lo hace pero no como se espera. Por ejemplo, se usa imagenes pero en vez de ponerlas con un tamaño especifico, lo pone al maximo tamaño, ocupando toda la pantalla. Otra cosa seria las letas que en vez de estar escritas en color blanco se ponen en un color gris. Y claro todo desorganizado.

Me preguntaba si era algo que no he tenido en cuenta, o simplemente algo que estoy haciendo mal, asi que pongo aca el codigo:

.
.
.
<div class="container-fluid">
<div class="card-group" id="ejemplo"> 







<script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
.
.
.
.
};
firebase.initializeApp(config);

var database = firebase.database();
var numerojaja=-1;


var aaaa= firebase.database().ref("/peliculas/");          // hacemos una referencia al nodo de peliculas


aaaa.once("value",function(snapshot){            // accedemos a la base de datos 

var vector=[];                           // creamos un vector

snapshot.forEach(function(child){        // por cada hijo de "peliculas"

vector.push(child.key);          // pusheamos dicho hijo, ya que esta en orden ascendente

});      
// window.alert("hola");
var ejemplo = document.getElementById("ejemplo");                                            // una vez terminado la obtencion de los indices de los hijos de "peliculas"
for(var i = vector.length-1; i>=0;i--){       // hacemos un bucle para acceder al vector en orden inverso

aaaa.child(vector[i]).once('value').then(function(snapshot){     // accedemos al hijo que tiene el identificador de la ultima posicion del vector


ejemplo.insertAdjacentHTML("beforeend",'<div class="col-xs-12 col-sm-6  col-md-4  col-lg-3">');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card">');
ejemplo.insertAdjacentHTML("beforeend",'<img class="card-img-top" src="'+snapshot.val().cartelera+'" alt="Card image cap" >');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card-body">');
ejemplo.insertAdjacentHTML("beforeend",'<p class="card-title"> '+snapshot.val().nombre+'</p>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="descripcion">'+snapshot.val().descripcion+'</i>');
ejemplo.insertAdjacentHTML("beforeend",'<br>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="cocos">'+snapshot.val().reputacion+' cocos sobre 5</i>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');





});                                                                                                  

}                                                                                                      
});                                                                                      




</script>

Tengo tambien como deberia de estar las etiquetas en html, pero con los datos de forma local (de esta forma si funciona todo bien).

<div class="col-xs-12 col-sm-6  col-md-4  col-lg-3">
<div class="card">
<img class="card-img-top" src="imagenes/ep1.jpg" alt="Card image cap" >
<div class="card-body">
<p class="card-title"> Star Wars Episodio 1, la amenaza fantasma</p>
<i class="descripcion">Dual of fates.</i>
<br>
<i class="cocos">3 cocos sobre 5</i>
</div>
</div>
</div>

En el archivo css tengo :

    body {

      background-color: #0F171E;
       min-height: 100%;
            min-width: 800px;

            /* Escalamiento proporcional */
            width: 100%;
            height: auto;



    }

    .navbar{
        background-color:rgba(000, 000, 000, 0.4);
        color:white;



    }



    .cocos{
        font-size:10px;

    }

    .descripcion{
        font-size:20px;

    }

    .card-title{
        font-size:25px;



    }

    .card{
        background-color:rgba(255, 255, 255, 0.0);
        width: 18rem;
        color:white;
        font-family:trebuchet-ms;
    }

1 respuesta 1

3

siguiendo tu ejemplo:

var ejemplo = document.getElementById("ejemplo");
ejemplo.insertAdjacentHTML("beforeend",'<div class="col-xs-12 col-sm-6  col-md-4  col-lg-3">');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card">');
ejemplo.insertAdjacentHTML("beforeend",'<img class="card-img-top" src="https://static.comicvine.com/uploads/original/11132/111322790/6171776-8796081884-v69lH.jpg" alt="Card image cap" >');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card-body">');
ejemplo.insertAdjacentHTML("beforeend",'<p class="card-title">Hackers</p>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="descripcion">Hackers movie</i>');
ejemplo.insertAdjacentHTML("beforeend",'<br>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="cocos">5 cocos sobre 5</i>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
body {

      background-color: #0F171E;
       min-height: 100%;
            min-width: 800px;

            /* Escalamiento proporcional */
            width: 100%;
            height: auto;



    }

    .navbar{
        background-color:rgba(000, 000, 000, 0.4);
        color:white;



    }



    .cocos{
        font-size:10px;

    }

    .descripcion{
        font-size:20px;

    }

    .card-title{
        font-size:25px;



    }

    .card{
        background-color:rgba(255, 255, 255, 0.0);
        width: 20px;
        color:white;
        font-family:trebuchet-ms;
    }
<div id="ejemplo">

</div>

Si ejecutamos y vamos a la inspección de los elementos para ver cómo se está creando el html (F12, luego posicionarse con el mouse en la imagen y con el boton derecho del mouse seleccionar "inspeccionar elemento") veremos que el código resultante es:

<div id="ejemplo">
<div class="col-xs-12 col-sm-6  col-md-4  col-lg-3"></div>
<div class="card"></div> 
<img class="card-img-top" 
 src="https://static.comicvine.com/uploads/original/11132/111322790/6171776- 
 8796081884-v69lH.jpg" alt="Card image cap"><div class="card-body"></div>
<p class="card-title">Hackers</p>
<i class="descripcion">Hackers movie</i><br>
<i class="cocos">5 cocos sobre 5</i>
</div>

Si te fijas no se está creando como tu defines en el código, que por lo menos en ésta línea indicas que se cree la apertura de capa:

ejemplo.insertAdjacentHTML("beforeend",'<div class="card">');

Pero se crea la capa con cierre también:

<div class="card"></div>

Qué pasa entonces?, la respuesta es que la función insertAdjacentHTML() "analiza la cadena de texto introducida como cadena HTML o XML e inserta al árbol DOM los nodos resultantes de dicho análisis en la posición especificada".insertAdjacentHTML Doc, dicho en otras palabras la función determinará en base a la cadena pasada por parámetro qué elemento debe agregar al DOM, por consiguiente ve que se quiere agregar un div y genera dicho NODO, al generar el mismo lo hace de manera válida es decir sin errores y eso quiere decir que la etiqueta tenga un inicio y un fin.

Lo que debes hacer en éste caso específico es tener una variable que contenga todo el texto del html y luego la insertas.

var ejemplo = document.getElementById("ejemplo");
var card = '<div class="col-xs-12 col-sm-6  col-md-4  col-lg-3"><div class="card"><img class="card-img-top" src="https://static.comicvine.com/uploads/original/11132/111322790/6171776-8796081884-v69lH.jpg" alt="Card image cap" ><div class="card-body"><p class="card-title">Hackers</p><i class="descripcion">Hackers movie</i><br><i class="cocos">5 cocos sobre 5</i></div></div></div>';



ejemplo.insertAdjacentHTML("beforeend",card);
body {

      background-color: #0F171E;
       min-height: 100%;
            min-width: 800px;

            /* Escalamiento proporcional */
            width: 100%;
            height: auto;



    }

    .navbar{
        background-color:rgba(000, 000, 000, 0.4);
        color:white;



    }



    .cocos{
        font-size:10px;

    }

    .descripcion{
        font-size:20px;

    }

    .card-title{
        font-size:25px;



    }

    .card{
        background-color:rgba(255, 255, 255, 0.0);
        width: 10rem;
        color:white;
        font-family:trebuchet-ms;
    }
    
    .card img{
      width: 100%;
    }
<div id="ejemplo">

</div>

De resto bueno, tienes un detalle extra con la imagen ya que la misma no toma el tamaño de su contenedor por defecto por lo que tienes que indicarlo, eso lo hacemos colocando en el css el atributo witdh de la imagen en 100%, de ésa manera ocupará el 100% del elemento en el que se encuentre contenida.

.card img{
  width: 100%;
}

Si card mide de ancho 10em entonces la imagen medirá de 10 de ancho y así con los demás tamaños. Fíjate también que ya que tenemos un elemento principal llamado card podemos tomarlo en el css como el padre de los demás y manipular los demás en base a el, es por ello que coloco .card img en ves de crear una clase específicamente para la imagen con card-img-top.

Te dejo un juego que ayuda a entender los selectores de css, está muy bueno: Css Dinner

1
  • Muchas gracias, la verdad me has salvado el culo.
    – k1k4ss0
    Commented el 3 ene. 2019 a las 14:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.