Alternate 2 div with jquery, php and update link

Question

Alternate 2 div with jquery, php and update link

Navigation

#1 by (0 votes)

0

Hello friends I need to alternate 2 div, which are to change the format of a video without reloading the page

The problem of the div I solved it like this:

<script type="text/javascript">
function cambiaVisibilidad() {
   var div1 = document.getElementById('precio1');
   var div2 = document.getElementById('precio2');
   if(div2.style.display == 'block'){
       div2.style.display = 'none';
       div1.style.display = 'block';
   }else{
      div2.style.display = 'block';
      div1.style.display = 'none';
     }
   }
 </script>



 <div class="show" id="precio1">
<div class="video" align="center" >
 <ul>
        <p class="textocomentarios">Transmisión de La Plata - <?php     echo"$AgradLP";?> </p>
        <iframe width="660" height="390" align= "center" src="<?php echo"$LinkLP";?>" scrolling="no" frameborder="1" border="0" >Tu navegador no soporta frames!! actualiza tu Navegador</iframe>
  </ul>
</div>


</div>
 <div style="display:none;" id="precio2">

<div class="video1" align="center" >
  <ul>
        <p class="textocomentarios">Transmisión de La Plata - <?php echo"$AgradLP";?> </p>
        <iframe width="660" height="390" align= "center" src="<?php echo"$LinkLP";?>" scrolling="no" frameborder="1" border="0" >Tu navegador no soporta frames!! actualiza tu Navegador</iframe>
</ul>
</div> 

 </div>
  <div class="btn" align="center" onclick="cambiaVisibilidad()"><a id="accionar">Cambiar Tamaño de la Transmisión</a>     </div>

but the problem that I have if the video is running, when changing the size while I watch the video in the new format the other one keeps running back

jquery php

asked by Carlos Gonzalez 03.12.2017 в 14:47

source

1 answer

How to close a WebView automatically after a certain event (Android)? select nested in c # ajax mvc and bootstrap-select

score 0 · Answer 1

It's enough that you create a unique iframe, and update the contents of it

#video {
  position: relative;
}

#video iframe {
  max-width: 80%;
}

.video {
  background: yellow
}

.video1 {
  background: blue
}

<div id="video" align="center">
   <p class="textocomentarios"> Transmisión de La Plata - <?=$AgradLP?> </p>
   <iframe width="660" height="390" align="center"> Tu navegador no soporta iframes, actualízalo.</iframe>
</div>


<ul id="opciones" style="display:none">
  <li id="precio1" data-src="<?=$LinkLP>" data-class="video">opción 1</li>
  <li id="precio2" data-src="<?=$LinkLP>" data-class="video1">opción 2</li>
</ul>

<div align="center">
<a id="cambiar" href="#" class="btn">Cambiar Tamaño de la Transmisión</a>
</div>

<script>
;(function() {
  var ops = document.getElementById('opciones').children
  var video = document.getElementById('video')
  var btn = document.getElementById('cambiar')
  
  video.dataset.target = ops[0].id
  video.classList.add(ops[0].dataset.class)
  video.querySelector('iframe').src = ops[0].dataset.src
  
  function CambiarOpcion(e)
  {
    var actual = document.getElementById(video.dataset.target)
    var siguiente = actual.nextElementSibling || ops[0]
    
    video.classList.remove(actual.dataset.class)
    video.classList.add(siguiente.dataset.class)
    video.dataset.target = siguiente.id
    video.querySelector('iframe').src = siguiente.dataset.src
    
    e.preventDefault()
  }
  
  btn.addEventListener('click', CambiarOpcion)
}())
</script>