[Resolvido] Readaptar código php para pop up div com timer no botão fechar

[Cristiano Siqueira 0]

Olá pessoal, bom dia.

Antes de tudo peço desculpas se estiver postando no local errado.

Depois de um bom tempo estou voltando a usar o php , mas infelizmente agora esta usando o PDO e é onde estou mais perdido que cego em tiroteio rsrs, mas pesquisando como sempre, sem mais delongas segue abaixo o meu problema.

 

Estou com um script onde ao clicar ele abre uma janela div com um video no YT , mas gostaria de adaptar ele o que estou ja a 2 dias tentando e todas as soluções que encontro não da muito certo, pois eu clico em fechar ele encerra o video e a div (até ai funcional)  , no intuito de adaptar para que o "fechar" apareça suponha 10 segundos apos a div abrir eu até consigo mas apos fechar se clicar novamente na opção de mostrar a div essa função já não mais é executada só se eu der reload na pagina, teria alguma forma de fazer isso sem que fosse necessário o reload?

 

Segue o código, e desde já muito obrigado por qualquer ajuda

 

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
  <div style="display:none;" id="divdesaparecer"><a href="javascript:;" onClick="toggleVideo('hide');">close</a></div>

e o código que uso para aparecer a div que tem o botão fechar é inserido abaixo da div .:

	<script>
		// O HTML da div precisa estar acima.
		// Esconde a div no início
		var div = document.getElementById('divdesaparecer');
		div.style.display = 'none';

		// Mostra a div após 4 segundos (apenas pra teste)
		setTimeout(function() {
			div.style.display = 'block';
		}, 4000);
	</script>

 

 

[Williams Duarte 431]

Onde se encaixa PHP neste caso?

[Cristiano Siqueira 0]

2 horas atrás, Williams Duarte disse:

Onde se encaixa PHP neste caso?

No caso nesse codigo eu irai colocar em um while buscando de um database o link do video  , como citei no inicio , não sei se postei na parte devida do forum,  seria inserido em uma pesquisa no database nesse caso seria isso  alem de ter uma parte em script (não sei se essa parte se aplica ao php ), esse codigo sera inserido em uma while onde na parte do href receberia uma string da session onde buscaria no database o link do video , mas essa parte ja esta funcional 

 

Nesse caso se aplicaria (não sei ) em uma sequencia em if, else, que fosse possivel dar um reload somente nesta função em questão sem precisar dar reload na pagina toda ou algum meio de readaptar o codigo pra isso.

 

Mas mesmo assim agradeço desde já 

[Eziquiel 96]

Seguindo seu exemplo, você precisa colocar o "setTimeout" dentro de uma função. Por exemplo:

function delayLink(){
    var div = document.getElementById('divdesaparecer');
        div.style.display = 'none';
        // Mostra a div após 4 segundos (apenas pra teste)
        setTimeout(function() {
            div.style.display = 'block';
        }, 4000);
}

 

Feito isso você precisa chamar essa função toda vez que a função "toggleVideo" for chamada. Exemplo:

function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
    delayLink();
}

Assim, toda vez que seu vídeo for exibido um tempo será contado e ao término o link será exibido.

 

[Cristiano Siqueira 0]

1 hora atrás, Eziquiel disse:

Seguindo seu exemplo, você precisa colocar o "setTimeout" dentro de uma função. Por exemplo:

function delayLink(){
    var div = document.getElementById('divdesaparecer');
        div.style.display = 'none';
        // Mostra a div após 4 segundos (apenas pra teste)
        setTimeout(function() {
            div.style.display = 'block';
        }, 4000);
}

 

Feito isso você precisa chamar essa função toda vez que a função "toggleVideo" for chamada. Exemplo:

function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
    delayLink();
}

Assim, toda vez que seu vídeo for exibido um tempo será contado e ao término o link será exibido.

 

Entendi, irei testar e logo reportarei. Obrigado pelo tempo disposto em responder.

 

----------------------------Report ------------------------------------------

Obrigado amigo funcionou , após fechar e reabrir o botão reaparece sem precisar dar o reload na pagina (o que não ocorria) 

[Eziquiel 96]

Aqui você consegue visualizar melhor.

 

Desse jeito você pode criar um while pra repetir seus vídeos sem problema algum.

Projeto em html.zip