Through a great contribution, by @ArtEze I have a list where I can send and receive data in specific tags without reloading the example page, if the list is a video link, that video will be sent and played in a tag <video></video>, yes is a website, it will run in a tag <iframe>, each information in their respective tags.
It can be verified in the following complete code:
$(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>I have seen the need to also be able to transport all the information that this div contains <div class="text-data"></div>, its text and even its labels, images, everything that this div contains, transfer that information to the design box when clicking on the tses10 link .
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>.
