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>
.
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 undiv
a otro sitio, lo que más interesa es saber la forma de identificar esediv
para transportarlo. ¿Tiene unid
, tiene una posición exacta en un contenedor, tiene una clase, tiene algo que lo identifique?<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 undisplay:none;
una vez que se trasporte quitarle eldisplay:none
div
a partir de esenav
? Es que lo otro que empiezas a explicar no creo que sirva de nada (para el caso). O sea, si transportas undiv
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.display:none
al momento de hacer click en esos enlaces traspasar la información de ese div, al cuadro del diseño.