16

Mediante un gran aporte, por parte de @ArtEze tengo un listado donde puedo enviar y recibir datos en etiquetas especificas sin recargar la página ejemplo, si en el listado es un enlace de vídeo, ese vídeo se enviara y se reproducirá en una etiqueta <video></video>, si es un sitio web, se ejecutara en una etiqueta <iframe>, cada información en sus respectiva etiquetas.

Se puede comprobar en el siguiente código completo:

$(document).ready(function(){
	function insertar_contenido(vid,elemento){
		var contenido,fuente
		var url = elemento.attr("href")
		var ext = "mp4"
		var formato = ext
		var es_video = new RegExp("^.+\\."+ext+"$").test(url)
		var cargando = $('.loading')
		function mostrar(){cargando.fadeIn(200)}
		function ocultar(){cargando.fadeOut(100)}
		mostrar()
		if(es_video){
			contenido = $(document.createElement("video"))
			fuente = $(document.createElement("source"))
			fuente.attr("src",url)
			fuente.attr("type","video/"+formato)
			contenido.attr("controls",true)
			contenido.attr("autoplay",true)
			contenido.on('waiting', mostrar)
			contenido.on('canplay', ocultar)
			contenido.append(fuente)
		}else{
			contenido = $(document.createElement("iframe"))
			contenido.attr("src",url)
			contenido.on('load', ocultar)
		}
		vid.html("")
		vid.append(contenido)
		$(".vids a").removeClass("playing")
		elemento.addClass("playing")
	}

	var vid = $('#myvid')
	var primer_elemento = $("a.link:first")

	insertar_contenido(vid,primer_elemento)
	primer_elemento.addClass("playing")

	$("a.link").on("click" , function(event){
		event.preventDefault()
		var esto = $(this)
		insertar_contenido(vid,esto)
	})
})
.container * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.container *:after , .container *:before {
	margin: 0;
    padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h2.title {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    font-family: tahoma;
    text-align: center;
    padding: 2em;
    display: block;
    margin: auto;
    background-color: #A97A7A;
}
.container {
    width: 960px;
    background: #010101;
    margin: auto;
    position: relative;
    height: 460px;
}
.vidcontainer {

	width: 75%;
    height: 100%;
    float: right;
    position: relative;
    overflow: hidden;
}
video {
    width: 100%;
    height: 405px;
    color: #fff;
    text-align: center;
    font-size: 20px;
}
.videolist {
    float: right;
    width: 25%;
    background-color: rgb(76, 76, 76);
    height: 100%;
    position: relative;
}

.vids {
    margin: 5px;
    background-color: #292626;
    max-height: 450px;
    min-height: 450px;
    border: 1px solid #616060;
    overflow-y: scroll;
    list-style: none;
    direction: rtl;
}
.vids::-webkit-scrollbar {
    width: 5px;
    background-color: #8A8A8A;
    border: 1px solid #AFACAC;

}
.vids::-webkit-scrollbar-thumb {
    background-color: #FF8D00;
    border-radius: 5px;
}
.vids::-webkit-scrollbar-thumb:hover{
background-color:#fff;
}
.vids::-webkit-scrollbar-thumb:active{
    background-color:#ccc;
}
.vids a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    display: block;
    border-bottom: 1px solid #616060;
    padding: 8px 5px;
    margin: 5px;
}

/*--- controllers ---*/
.controllers {
    position: absolute;
    bottom: 0;
    height: 50px;
    background-color: #fff;
    width: 100%;
}
.controllers button {
    border: 1px solid #E7E7E7;
    background-color: #FFFFFF;
    color: #777;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin: 5px;
    box-shadow: 1px 1px 3px #4C4C4C;
    outline: none;
    font-size: 18px;
    display: inline-block;
    float: left;
}
.controllers button:focus {
    box-shadow: 1px 0px 7px #4C4C4C;
    border-color: #ff8d00;
    color: #ff8d00;
    background-color: #4C4C4C;
}
.btnPlay:after {
    content: "\f04b";
    font-family: 'FontAwesome';
}
.paused:after {
    content: "\f04c";
}
.sound:after {
content: "\f027";
    font-family: 'FontAwesome';
}
.sound2:after {
content: "\f028";
}
.muted:after {
    content: "\f026";
}
.btnFS:after {
     content: "\f065";
    font-family: 'FontAwesome';
}
.ads {
    height: 350px;
    width: 350px;
    position: absolute;
    background-color: #777;
    top: 27.5px;
    right: 40px;
    z-index: 11;
}
.bigplay {
    height: 150px;
    width: 150px;
    position: absolute;
    top: 127.5px;
    left: 85px;
    z-index: 11;
    color: #fff;
    font-size: 150px;
    line-height: 150px;
    text-align: center;
    cursor: pointer;
    text-shadow: 0px 0px 15px #ff8d00;
}
.closeme {
    height: 32px;
    width: 32px;
    background-color: #fff;
    top: -10px;
    right: -10px;
    border: 1px solid #ff8d00;
    display: block;
    position: absolute;
    border-radius: 50%;
    text-align: center;
    line-height: 30px!important;
    color: #ff8d00;
    font-size: 25px!important;
}

.playing {
    background-color: #999;
    border: 1px solid #ff8d00!important;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
 }
.playing:after {
    content: "\f01d";
    font-family: 'FontAwesome';
    color: #ff8d00;
    float: left;
}

/* PROGRESS BAR CSS */
.topControl {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 50px;
    background-color: #fff;
    z-index: 1;
}

/* Progress bar */
.progress {
    width: 100%;
    height: 5px;
    position: relative;
    float: left;
    cursor: pointer;
    background: #999;
}
.progress span {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.timeBar{
    z-index:10;
    width:0;
    background: #ff8d00;
}
.bufferBar{
    z-index:5;
    width:0;
    background: #eee;
}

/* time and duration */
.time{
    width:12%;
    float:right;
    text-align:center;
    font-size:11px;
    line-height:12px;
    right: -12%;
    opacity: 0;
    position: absolute;
}
.topControl:hover .time {
    right: 0;
    opacity: 1;
}
.topControl:hover .progress {
    width: 88%;
    height: 12px;
}

/* VOLUME BAR CSS */
/* volume bar */
.volume {
    position: relative;
    cursor: pointer;
    width: 70px;
    height: 10px;
    float: left;
    margin-top: 20px;
    margin-right: 15px;
    background-color: #999;
}
.volumeBar{
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff8d00;
    z-index: 10;
}
.loading {
    width: 100%;
    background-color: rgba(255,141,0,0.5);
    height: 405px;
    position: absolute;
    top: 0;
}
i.fa.fa-spinner.fa-spin {
    height: 60px;
    width: 60px;
    font-size: 60px;
    color: #fff;
    text-shadow: 0px 0px 8px #000;
    top: 172.5px;
    left: 330px;
    position: absolute;
}
.disabled {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #C2C2C2!important;
}
ul.speedcnt {
    display: none;
    position: absolute;
    right: 30px;
    bottom: 60px;
    background-color: #fff;
    border-radius: 5px;
    list-style: none;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
}
ul.speedcnt li {
    text-align: center;
    font-family: 'verdana', tahoma , serif;
    font-size: 13px;
    padding: 5px 20px;
    cursor: pointer;
    display: block;
    border-bottom: 1px solid #ccc;
}
ul.speedcnt li:last-child {
    border-bottom: none;
}
ul.speedcnt li.selected {
    background-color: rgba(255, 141, 0, 0.6);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <div class="vidcontainer">
    <div id="myvid"></div>
    <div class="loading">
      <i class="fa fa-spinner fa-spin"></i>
    </div>
  </div>
  <div class="videolist">
    <nav class="vids">
      <a class="link" href="https://en.wikipedia.org/wiki/Main_Page">test1</a>
      <a class="link" href="https://legacy.datatables.net/usage/columns">test2</a>
      <a class="link" href="https://stackoverflow.com/">test3</a>
      <a class="link" href="http://futbolworldcup.com/">test4</a>
      <a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test5</a>
      <a class="link" href="http://www.html5videoplayer.net/videos/toystory.mp4">test6</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/H264/Other_Media/H264_test8_voiceclip_mp4_480x320.mp4">test7</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/dw11222.mp4">test8</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4">tsest9</a>
      <a class="link" href="#">tsest10</a>
      <div class="text-data"><span>Contenido e información del enlace test10</span></div>
      <a class="link" href="#">tsest11</a>
      <div class="text-data"><span>Contenido e información del enlace test11</span></div>
      <a class="link" href="#">tsest12</a>
      <div class="text-data"><span>Contenido e información del enlace test12</span></div>
    </nav>
  </div>
</div>

Me he visto en la necesidad de también poder trasportar toda la información que contenga este div <div class="text-data"></div>, su texto e incluso sus etiquetas, imágenes todo lo que contenga ese div, esa información traspasarla al cuadro del diseño al dar click en el enlace tses10.

Había pensado, que siguiendo el mismo patrón o el mismo funcionamiento del código jQuery traspasar al texto cuando en el href="#" exista el símbolo numeral #.

Investigando un poco encontré esté código

$(document).ready(function() {
    $("a").click(function() {
        $("#lorem").html($(this).html());
    });
});

¿Pero como lo puedo adaptar al código jQuery? Sobre todo el problema persiste porque en el código jQuery ya existe patrones u funcionalidades que permite poder ejecutar información según lo que este enlazado, como los sitios web en los <iframe>, los vídeos en las etiquetas <video>.

12
  • 1
    Me perdí un poco leyendo la pregunta. ¿Quieres pasar un div entero de un sitio a otro según he entendido. Si es tan simple como eso, no sé por qué te detienes en tantos detalles. ¿O es que no es eso lo que quieres? Simplemente, si quieres pasar un div a otro sitio, lo que más interesa es saber la forma de identificar ese div para transportarlo. ¿Tiene un id, tiene una posición exacta en un contenedor, tiene una clase, tiene algo que lo identifique?
    – A. Cedano
    Commented el 18 feb. 2019 a las 9:46
  • 1
    @A.Cedano El enlace encargado de transportar el div a otro sitio <a class="link" href="#">test10</a> y debajo del enlace el div que debe ser transportado <div class="text-data display-none">Contenido e información del enlace test10</div> claro que ese div debe estar con un display:none; una vez que se trasporte quitarle el display:none
    – Lou
    Commented el 18 feb. 2019 a las 12:02
  • 1
    Que me pierdo con tus explicaciones. Entendí hasta aquí: quiero pasar un div a otro sitio, toda esta información va estar en el listado de los enlaces que se encuentran en: <div class="videolist"> <nav> <a> ... ¿que quieres poner el div a partir de ese nav? Es que lo otro que empiezas a explicar no creo que sirva de nada (para el caso). O sea, si transportas un div a una parte se aplicarán las reglas o acciones que hayas definido para los elementos en ese contenedor o si le otorgas una clase, un id o lo que sea, se aplicarán las reglas que hayas decidido para ese id, clase, etc.
    – A. Cedano
    Commented el 18 feb. 2019 a las 12:04
  • 2
    @ArtEze Alguna vez has visto algún curso en la plataforma de Udemy, en su listado de cursos en ocasiones no existe vídeo si no solo texto, bueno ese texto se muestra en el mismo cuadro donde se reproducen los vídeos, solo que en vez de mostrar el vídeo muestra el texto, con sus estilos agregados al texto etc.
    – Lou
    Commented el 19 feb. 2019 a las 0:56
  • 2
    @ArtEze Para que sea más claro, puedes ejecutar el código, al final del listado se encuentra los enlaces tsest10, tsest11, tsest12 debajo de esos enlaces existen unos div, con información, esos div en el listado deben estar oculto mediante un display:none al momento de hacer click en esos enlaces traspasar la información de ese div, al cuadro del diseño.
    – Lou
    Commented el 19 feb. 2019 a las 1:18

3 respuestas 3

7
+100

Mi solución es crear un div nuevo, que contiene todos los contenidos ocultos, en mi caso lo llamo ocultado y le agrego la propiedad style="display: none" para que no se vea. Dentro, agrego los contenidos.

Dentro están los div con los contenidos, y le agrego una clase propia para que pueda ser identificado por jQuery, class="cuadro". Además, le agrego un id, por ejemplo, id="c_link_12".

<div id="ocultado" style="display: none">
  <div class="cuadro" id="c_link_10" >Contenido e información del enlace test10</div>
  <div class="cuadro" id="c_link_11" >Contenido e información del enlace test11</div>
  <div class="cuadro" id="c_link_12" >Contenido e información del enlace test12</div>
</div>

Los enlaces con contenido de la propia página, tienen que tener el id coincidiendo con el id del cuadro.

<a class="link" href="#" id="link_10" >test10</a>
<a class="link" href="#" id="link_11" >test11</a>
<a class="link" href="#" id="link_12" >test12</a>

La diferencia es que al id del cuadro se le agrega c_ al principio, para que puedan ser identificados correctamente.

En el código jQuery se hace una comprobación, si el id es undefined, inserta un iframe, de lo contrario muestra el contenido HTML propio.

var id = elemento.attr("id")
if(id==undefined)
{
    contenido = $(document.createElement("iframe"))
    contenido.attr("src",url)
    contenido.on('load', ocultar)       
}else{
    contenido = $(document.createElement("div"))
    contenido.append($("#c_"+id))
    ocultar()
}

Lo que hago con el código es, simplemente mover el div que estaba en ocultado al cuadro de diseño. En este caso, al mover un div no hay onload, porque ya estaba cargado, entonces, simplemente llamo a la función para desaparecer el loading.

Si anteriormente había un contenido, lo muevo a ocultado, es decir, voy moviendo los div a donde correspondan.

var cuadro = vid.find(".cuadro")
if(cuadro.length!=0){
    $("#ocultado").append(cuadro)
}

El método find es el equivalente de querySelectorAll de JavaScript pero para jQuery. Si existe el elemento con class = "cuadro", lo mueve al ocultado.

Código completo:

$(document).ready(function(){
	function insertar_contenido(vid,elemento){
		
		var contenido,fuente
		var url = elemento.attr("href")
		var ext = "mp4"
		var formato = ext
		var es_video = new RegExp("^.+\\."+ext+"$").test(url)
		var cargando = $('.loading')
		function mostrar(){cargando.fadeIn(200)}
		function ocultar(){cargando.fadeOut(100)}
		mostrar()
		var cuadro = vid.find(".cuadro")
		if(cuadro.length!=0){
			$("#ocultado").append(cuadro)
		}
		if(es_video){
			contenido = $(document.createElement("video"))
			fuente = $(document.createElement("source"))
			fuente.attr("src",url)
			fuente.attr("type","video/"+formato)
			contenido.attr("controls",true)
			contenido.attr("autoplay",true)
			contenido.on('waiting', mostrar)
			contenido.on('canplay', ocultar)
			contenido.append(fuente)
		}else{
			var id = elemento.attr("id")
			if(id==undefined)
			{
				contenido = $(document.createElement("iframe"))
				contenido.attr("src",url)
				contenido.on('load', ocultar)		
			}else{
				contenido = $(document.createElement("div"))
				contenido.append($("#c_"+id))
				ocultar()
			}
		}
		vid.html("")
		vid.append(contenido)
		$(".vids a").removeClass("playing")
		elemento.addClass("playing")
	}

	var vid = $('#myvid')
	var primer_elemento = $("a.link:first")

	insertar_contenido(vid,primer_elemento)
	primer_elemento.addClass("playing")

	$("a.link").on("click" , function(event){
		event.preventDefault()
		var esto = $(this)
		insertar_contenido(vid,esto)
	})
})
#myvid {
  color: #ffff;
}

.container * {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.container *::after , .container *::before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

h2.title {
	font-size: 24px;
	color: #fff;
	font-weight: bold;
	font-family: 'tahoma';
	text-align: center;
	padding: 2em;
	display: block;
	margin: auto;
	background-color: #A97A7A;
}

.container {
	width: 960px;
	background: #010101;
	margin: auto;
	position: relative;
	height: 460px;
}

.vidcontainer {
	width: 75%;
	height: 100%;
	float: right;
	position: relative;
	overflow: hidden;
}

video {
	width: 100%;
	height: 405px;
	color: #fff;
	text-align: center;
	font-size: 20px;
}

.videolist {
	float: right;
	width: 25%;
	background-color: rgb(76, 76, 76);
	height: 100%;
	position: relative;
}

.vids {
	margin: 5px;
	background-color: #292626;
	max-height: 450px;
	min-height: 450px;
	border: 1px solid #616060;
	overflow-y: scroll;
	list-style: none;
	direction: rtl;
}

.vids::-webkit-scrollbar {
	width: 5px;
	background-color: #8A8A8A;
	border: 1px solid #AFACAC;
}

.vids::-webkit-scrollbar-thumb {
	background-color: #FF8D00;
	border-radius: 5px;
}

.vids::-webkit-scrollbar-thumb:hover {
background-color: #fff;
}

.vids::-webkit-scrollbar-thumb:active {
	background-color: #ccc;
}

.vids a {
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	display: block;
	border-bottom: 1px solid #616060;
	padding: 8px 5px;
	margin: 5px;
}

/* --- controllers --- */
.controllers {
	position: absolute;
	bottom: 0;
	height: 50px;
	background-color: #fff;
	width: 100%;
}

.controllers button {
	border: 1px solid #E7E7E7;
	background-color: #FFFFFF;
	color: #777;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	margin: 5px;
	box-shadow: 1px 1px 3px #4C4C4C;
	outline: none;
	font-size: 18px;
	display: inline-block;
	float: left;
}

.controllers button:focus {
	box-shadow: 1px 0px 7px #4C4C4C;
	border-color: #ff8d00;
	color: #ff8d00;
	background-color: #4C4C4C;
}

.btnPlay::after {
	content: "\f04b";
	font-family: 'FontAwesome';
}

.paused::after {
	content: "\f04c";
}

.sound::after {
	content: "\f027";
	font-family: 'FontAwesome';
}

.sound2:after {
	content: "\f028";
}

.muted::after {
	content: "\f026";
}

.btnFS::after {
	content: "\f065";
	font-family: 'FontAwesome';
}

.ads {
	height: 350px;
	width: 350px;
	position: absolute;
	background-color: #777;
	top: 27.5px;
	right: 40px;
	z-index: 11;
}

.bigplay {
	height: 150px;
	width: 150px;
	position: absolute;
	top: 127.5px;
	left: 85px;
	z-index: 11;
	color: #fff;
	font-size: 150px;
	line-height: 150px;
	text-align: center;
	cursor: pointer;
	text-shadow: 0px 0px 15px #ff8d00;
}

.closeme {
	height: 32px;
	width: 32px;
	background-color: #fff;
	top: -10px;
	right: -10px;
	border: 1px solid #ff8d00;
	display: block;
	position: absolute;
	border-radius: 50%;
	text-align: center;
	line-height: 30px!important;
	color: #ff8d00;
	font-size: 25px!important;
}

.playing {
	background-color: #999;
	border: 1px solid #ff8d00!important;
	-webkit-transition: 0s;
	-o-transition: 0s;
	transition: 0s;
}

.playing:after {
	content: "\f01d";
	font-family: 'FontAwesome';
	color: #ff8d00;
	float: left;
}

/* PROGRESS BAR CSS */
.topControl {
	position: absolute;
	display: block;
	width: 100%;
	bottom: 50px;
	background-color: #fff;
	z-index: 1;
}

/* Progress bar */
.progress {
	width: 100%;
	height: 5px;
	position: relative;
	float: left;
	cursor: pointer;
	background: #999;
}

.progress span {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

.timeBar{
	z-index:10;
	width:0;
	background: #ff8d00;
}

.bufferBar{
	z-index:5;
	width:0;
	background: #eee;
}

/* time and duration */
.time{
	width:12%;
	float:right;
	text-align:center;
	font-size:11px;
	line-height:12px;
	right: -12%;
	opacity: 0;
	position: absolute;
}

.topControl:hover .time {
	right: 0;
	opacity: 1;
}

.topControl:hover .progress {
	width: 88%;
	height: 12px;
}

/* VOLUME BAR CSS */
/* volume bar */
.volume {
	position: relative;
	cursor: pointer;
	width: 70px;
	height: 10px;
	float: left;
	margin-top: 20px;
	margin-right: 15px;
	background-color: #999;
}

.volumeBar{
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ff8d00;
	z-index: 10;
}

.loading {
	width: 100%;
	background-color: rgba(255, 141, 0, 0.5);
	height: 405px;
	position: absolute;
	top: 0;
}

i.fa.fa-spinner.fa-spin {
	height: 60px;
	width: 60px;
	font-size: 60px;
	color: #fff;
	text-shadow: 0px 0px 8px #000;
	top: 172.5px;
	left: 330px;
	position: absolute;
}

.disabled {
	pointer-events: none;
	cursor: not-allowed;
	background-color: #C2C2C2!important;
}

ul.speedcnt {
	display: none;
	position: absolute;
	right: 30px;
	bottom: 60px;
	background-color: #fff;
	border-radius: 5px;
	list-style: none;
	-webkit-transition: 0s;
	-o-transition: 0s;
	transition: 0s;
}

ul.speedcnt li {
	text-align: center;
	font-family: 'verdana', tahoma , serif;
	font-size: 13px;
	padding: 5px 20px;
	cursor: pointer;
	display: block;
	border-bottom: 1px solid #ccc;
}

ul.speedcnt li:last-child {
	border-bottom: none;
}

ul.speedcnt li.selected {
	background-color: rgba(255, 141, 0, 0.6);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <div class="vidcontainer">
    <div id="myvid"></div>
    <div class="loading">
      <i class="fa fa-spinner fa-spin"></i>
    </div>
  </div>
  <div class="videolist">
    <nav class="vids">
      <a class="link" href="https://en.wikipedia.org/wiki/Main_Page">test1</a>
      <a class="link" href="https://legacy.datatables.net/usage/columns">test2</a>
      <a class="link" href="https://stackoverflow.com/">test3</a>
      <a class="link" href="http://futbolworldcup.com/">test4</a>
      <a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test5</a>
      <a class="link" href="http://www.html5videoplayer.net/videos/toystory.mp4">test6</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/H264/Other_Media/H264_test8_voiceclip_mp4_480x320.mp4">test7</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/dw11222.mp4">test8</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4">test9</a>
      <a class="link" href="#" id="link_10" >test10</a>
      <a class="link" href="#" id="link_11" >test11</a>
      <a class="link" href="#" id="link_12" >test12</a>
    </nav>
    <div id="ocultado" style="display: none">
      <div class="cuadro" id="c_link_10" >Contenido e información del enlace test10</div>
      <div class="cuadro" id="c_link_11" >Contenido e información del enlace test11</div>
      <div class="cuadro" id="c_link_12" >Contenido e información del enlace test12</div>
    </div>
  </div>
</div>

7
  • 1
    Gracias amigo, eres fantástico tomare algún curso muy avanzado sobre jQuery, para no causar mucha molestia aquí :)
    – Lou
    Commented el 25 feb. 2019 a las 1:27
  • 2
    @Fernando Lo dejo aquí definitivamente. Los enlaces atrás y siguiente aparecen en un nav separado: jsfiddle.net/ArtEze/sgy4tah5/109
    – user13558
    Commented el 26 feb. 2019 a las 3:29
  • 2
    @ArtEze Excelente, en unas de sus anteriores pregunta de Lou basadas a este tema, cuando dabas clic en unos de esos listado agregaba un icono play para así indentificar en que enlace del listado se encuentra, le han eliminado está funcionalidad? O aún existe está funcionalidad en el código, puedes agregarle esa funcionalidad que ya tenía en su primer pregunta sobre este tema gracias por el aporte. Saludos.
    – Fernando
    Commented el 26 feb. 2019 a las 12:54
  • 1
    @Fernando Era un problema del CSS, al responder la pregunta había quitado varias partes para entenderlo mejor yo. Aquí dejo la solución, tuve que cambiar una parte también en HTML, jQuery y CSS para identificar el nav, ahora tiene el id #enlaces jsfiddle.net/ArtEze/sgy4tah5/144
    – user13558
    Commented el 26 feb. 2019 a las 16:06
  • 1
    @ArtEze Amigo, disculpe que te moleste sera que tienes un poquito de tiempo en ayudarme en una pregunta basada a este mismo código, la pregunta es la siguiente es.stackoverflow.com/questions/295514/… por favor
    – Lou
    Commented el 23 sept. 2019 a las 6:12
2

Te dejo aquí un ejemplo donde se mueve un div completo (alcanzado por su id) de un sitio a otro. El div tiene dentro texto y tiene una imagen. Esa imagen tiene un listener. Al mover el div de un sitio a otro, las propiedades de los elementos no se pierden (en este caso el listener de la imagen sigue funcionando).

var btnMover = document.getElementById('btnMover');
var imgSO = document.getElementById('imgSO');


btnMover.addEventListener('click', function(event) {
  var fragment = document.createDocumentFragment();
  var divAMover=document.getElementById('a-mover');
  fragment.appendChild(divAMover);
  document.getElementById('destino').appendChild(fragment);
  divAMover.classList.remove('oculto');
});

imgSO.addEventListener('click', function(event) {
  console.log("Siempre escuchando");
});
#general {
  background-color: orange;
}

#destino {
  background-color: yellow;
}

.oculto {display: none;}
<div id="general">
  <div id="no-mover">
    <p>Esto no se moverá</p>
  </div>
  <div id="a-mover" class="oculto">
    <p>Esto se moverá, imagen incluida. Haz clic en la imagen antes y después de mover y verás...</p>
    <a title="Stack Exchange [Public domain], via Wikimedia Commons" href="#"><img id="imgSO" width="128" alt="Stack Overflow logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Stack_Overflow_logo.png/128px-Stack_Overflow_logo.png"></a>
  </div>
</div>
<hr />
<button id="btnMover">Mover</button>
<div id="destino">
  <p>Te estoy esperando...</p>
</div>

6
  • Es un ejemplo claro, pero el div que se va a pasar a otro sitio debe estar oculto, una vez que ya se pase ahí se debe mostrar el contenido.
    – Lou
    Commented el 18 feb. 2019 a las 12:40
  • @Lou revisa ahora el código editado. Sólo se muestra al moverlo.
    – A. Cedano
    Commented el 18 feb. 2019 a las 12:45
  • Gracias por el ejemplo, tarde analizaré el ejemplo que me has proporcionado para ver si lo puedo adaptar al código jQuery.
    – Lou
    Commented el 18 feb. 2019 a las 13:36
  • @A.Cedano Tengo una curiosidad, si desea agregar más listado de información a pasar, esto generaría más líneas de código javascript o bastaría con la existente. Commented el 18 feb. 2019 a las 13:55
  • 3
    @Lou jQuery es una librería Javascript y esto es Javascript puro. O sea este código funcionará en tu navegador y será más rápido.
    – A. Cedano
    Commented el 18 feb. 2019 a las 14:54
0

si lo que quieres es pasar el contenido de un div a otro hay una solucion simple sin mucho codigo, usando clone() el cual nos permite copiar todos los nodos del DOM, no perderias funcionalidades.

Encierras todo lo que deseas clonar en un div con su id y creas el otro div que es donde vas a clonar la info y añades una funcion en algun boton por ejemplo, hariamos algo asi:

HTML + JS

   <div id="contenedor-1">
     <h1>Div con la informacion</h1>
     <p>aqui esta todo</p>
   </div>
   <!-- boton con la funcion -->
   <input type="button" id="clonar" value="clonar div">

   <div id="contenedor-2"></div>

 <script>
    $(document).ready(function(){
        // toma el id del boton y habilita un solo click
        $("#clonar").one("click", function(){

            $("#contenedor-1").clone().appendTo("#contenedor-2");
            alert('Duplicado exitosamente');

        });
    });
 </script>

Es importante el hecho de que la función se ejecute con un solo click ya que sino se hace entonces va a clonar los elementos las veces que se clickee en el botón, aunque esto se podría arreglar con unas lineas extras en js. Aquí tienes otra idea.

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.