Reemplazar un video dentro de un DIV por un html

Citar

Escrito el 14 Jul 2015 03:03 pm

Hola a todos,

Estoy un poco estancada con este tema, tengo este html donde reproduzco un video en loop, el video se encuentra dentro de un DIV, quiero cambiar el contenido de ese DIV por un html que reemplace el video.

Hasta ahora tengo este código que vi en otro foro pero no me funciona.

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Museo Nacional de Geografía y Cartografía</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>
function cargar(dispatcher, div, url) {
    $(dispatcher).click(function(event) {
        event.preventDefault();
        $(div).load(url);
    });
}
</script>
<script>cargar("btncarga", "cont_ppal", "slider.html");</script>
</head>

<body>
<div id="cont_ppal">
<video src="video.mp4" poster="pantalla-01.jpg" height="1080" autoplay loop controls></video>
</div>
<a id="btncarga">cargar url por ajax</a>
</body>
</html>

Gracias

Por khonsu100

3 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Diseñadora Gráfica

Citar

Escrito el 15 Jul 2015 12:23 pm

Para cuando se ejecuta la función cargar() el elemento con id "btncarga" todavía no existe en el DOM, por lo tanto no se va a ejecutar el onclick de JQuery.

Me parece que lo que haz querido hacer es esto (solo la parte JS):

Código Javascript :

$(document).ready(function () { cargar("btncarga", "cont_ppal", "slider.html"); } );

function cargar(dispatcher, div, url) {
    $(dispatcher).click(function(event) {
        event.preventDefault();
        $(div).load(url);
    });
}

El evento "ready" se ejecuta cuando el navegadot termina de cargar el documento, que es lo mismo a decir que se terminó de crear el DOM de la página HTML.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 16 Jul 2015 08:48 pm

Gracias DriverOp, finalmente lo solucioné de esta manera.

Código HTML :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Museo Nacional de Geografía y Cartografía</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function(){
   $("#btncarga a").each(function(){
      var href = $(this).attr("href");
      $(this).attr({ href: "#"});
      $(this).click(function(){
         $("#cont_ppal").load(href);
      });
   });
});
</script>

</head>

<body>
<div id="cont_ppal">
<video src="video.mp4" poster="pantalla-01.jpg" height="1080" autoplay loop controls></video>
</div>
<ul id="btncarga">
<li><a href="slider.html">cargar url por ajax</a></li>
</ul>
</body>
</html>

Gracias

Por khonsu100

3 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Diseñadora Gráfica

Reemplazar un video dentro de un DIV por un html

Escribe una respuesta rapida