Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

  • 1
  • 2
  • 3
  • 4
  • 5
  • 9
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Exibir largura de janela modal jQuery em variável PHP

12-10-2016 20:10

Fiz adaptação de códigos de tópicos que postei para exibir, em variável PHP, a largura de janela capturada em jQuery.

No arquivo original, sem a exibição em janela modal, o trecho de código que envia a variável dentro da página para ser recebida por $_GET é o seguinte:

if(document.location.hash=="") { location.href="teste2.php?largura="+width+"#"; }

Porém, se mantenho esse código descomentado, a janela modal não é aberta, e o arquivo que deveria ser aberto nela (teste2.php) é aberto na janela do navegador, e seu endereço é exibido na barra de endereços do navegador.

Se mantenho esse trecho de código comentado, a janela modal é aberta, exibindo o arquivo lincado (teste2.php); os valores que vêm do arquivo que contém o link (teste1.php) são exibidos, bem como é exibida a variação da largura conforme o ajuste da janela do navegador.

Mas não é exibida a largura na variável PHP, por não estar sendo enviado tal valor.

Nesse caso, qual código deve ser usado em substituição de if(document.location.hash==""){location.href="teste2.php?largura="+width+"#";} para se exibir a largura em $_GET?

Abaixo, os arquivos:

teste1.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> a{text-decoration:none;text-align:center;} body{margin:4px} #link{padding:2px;background-color:transparent;border-color:red;border-style:solid;border-width:1px;height:60px;line-height:60px;border-spacing:0;text-align:center;margin:0;font-family:arial,sans-serif;font-size:.8em;font-weight:400;letter-spacing:0;text-decoration:none;color:black;text-align:center} #link:hover{padding:2px;background-color:#ffffb7;border-color:#000;border-style:solid;border-width:1px;height:60px;line-height:60px;border-spacing:0;text-align:center;margin:0;font-family:arial,sans-serif;font-size:.8em;font-weight:400;letter-spacing:0;text-decoration:none;color:black;text-align:centercursor:pointer;} #janela{ background-color: rgba(0, 0, 0, 0.6); position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index:1;} .janela-box{background:#FFF;position:absolute;max-width:100%;height:auto; overflow-y: auto;margin:0;top:5px;left:5px;right:5px;bottom:5px;text-align:center;z-index:2;} .scroll_janela{background:red;width:100%;height:200px;overflow:auto} .fechar_janela{cursor:pointer;position:fixed;padding:5px;right:10px;top:10px;font-family:arial;font-style:normal;font-weight:900;text-decoration:none;z-index:3} </style> </head> <body> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(a){$(".pagina_2").click(function(a){$("#janela").fadeIn(500),$(".janela-box-conteudo").load("teste2.php?valor1=1&valor2=2"),$("#janela, .scroll_janela").jScrollPane()}),$("#janela, .fechar_janela").click(function(a){a.target===this&&$("#janela").fadeOut(500)})}); </script> <a href="#" class="pagina_2"><div id="link">Link janela outro arquivo</div></a> <div id="janela"> <div class="fechar_janela">X</div> <div class="janela-box"> <div class="janela-box-conteudo"></div> </div> </div> </body> </html>

teste2.php

<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> function showViewPortSize(display) { if(display) { var height = window.innerHeight; var width = window.innerWidth; var screenTimer = null; /* if(document.location.hash=="") { location.href="teste2.php?largura="+width+"#"; } */ jQuery('body').prepend('<div id="viewportsize" style="z-index:9999;position:fixed;top:0px;left:0px;color:#fff;background:#000;padding:10px">Height: '+height+'<br>Width: '+width+'</div>'); //jQuery('body').prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: '+height+'<br>Width: '+width+'</div>'); jQuery(window).resize(function() { height = window.innerHeight; width = window.innerWidth; jQuery('#viewportsize').html('Height: '+height+'<br>Width: '+width); /* if(document.location.hash=="") { location.href="teste2.php?largura="+width+"#"; } */ screenTimer = setInterval(50); }); } } $(document).ready(function(){ showViewPortSize(true); }); </script> </head> <body> <?php echo "OUTRO ARQUIVO ABERTO NA JANELA"; ?> <br><br> <?php echo $_GET['valor1']; echo "&nbsp;-&nbsp;"; echo "variável GET valor1"; echo "<br>"; echo $_GET['valor2']; echo "&nbsp;-&nbsp;"; echo "variável GET valor2"; echo "<br>"; ?> <?php echo "largura do GET: ".$_GET['largura']; ?> </body> </html>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

12-10-2016 20:50

Para passar a largura da janela atual para modal use esse código abaixo, no lugar do seu script no arquivo teste1.php

<script type="text/javascript"> $(document).ready(function(a){ $(".pagina_2").click(function(a){ $("#janela").fadeIn(500),$(".janela-box-conteudo").load("teste2.php?valor1=1&valor2=2&largura="+$(window).width()),$("#janela, .scroll_janela").jScrollPane()}),$("#janela, .fechar_janela").click(function(a){a.target===this&&$("#janela").fadeOut(500)})}); </script>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

13-10-2016 10:09

Eu testei. Mas, nesse caso, a largura exibida na janela por $_GET, vinda do arquivo que contém o link, fica estática (não se ajusta à alteração da largura do dispositivo). O arquivo teste2.php captura a largura na janela. Eu gostaria de exibir em $_GET a largura capturada no arquivo teste2.php. Creio que a solução está na substituição, por outro, do código abaixo:

if(document.location.hash=="") { location.href="teste2.php?largura="+width+"#"; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

13-10-2016 13:24

Fiz o seguinte teste aqui. Antes do fechamento da tag script no documento teste1.php eu adicionei o seguinte:

jQuery(window).resize(function() { height = window.innerHeight; width = window.innerWidth; $("#janela").fadeIn(500),$(".janela-box-conteudo").load("teste2.php?valor1=1&valor2=2&largura="+$(window).width()),$("#janela, .scroll_janela").jScrollPane()}),$("#janela, .fechar_janela").click(function(a){a.target===this&&$("#janela").fadeOut(500)});

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 14:05

Funcionou. E eu tirei todo o código de captura da largura no arquivo teste2.php, deixando apenas a exibição da largura que vem de teste1.php. Show de bola. Muito obrigado.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 14:10

Ops! Um probleminha. Agora, se diminuo a janela estando no arquivo teste1.php, a janela contendo o arquivo teste2.php abre automaticamente, sem se clicar no link para se abrir a janela. Há como se evitar isso?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 15:12

Tem que verificar se a div está sendo mostrada ou não. Teste com esse bloco de resize.

jQuery(window).resize(function() { if( $('#janela').is(':visible') ) { } else { return false; } height = window.innerHeight; width = window.innerWidth; $("#janela").fadeIn(500),$(".janela-box-conteudo").load("teste2.php?valor1=1&valor2=2&largura="+$(window).width()),$("#janela, .scroll_janela").jScrollPane()}),$("#janela, .fechar_janela").click(function(a){a.target===this&&$("#janela").fadeOut(500); });

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 15:20

Vou testar. Mas tenho uma dúvida. Os dois códigos que você postou são muito parecidos. Tentei juntar os dois, colocando jQuery(window).resize(function() { dentro da função que tem onclick. Porém, a janela não abre. Se comento essa função de resize, a janela abre, mas o resize não é feito, ficando estática a largura recebida por $_GET. São precisos dois blocos de código?

<script type="text/javascript"> $(document).ready(function(a){ $(".pagina_2").click(function(a){ jQuery(window).resize(function() { height = window.innerHeight; width = window.innerWidth; $("#janela").fadeIn(500),$(".janela-box-conteudo").load("teste2.php?valor1=1&valor2=2&largura="+$(window).width()), $("#janela, .scroll_janela").jScrollPane() }), }), $("#janela, .fechar_janela").click(function(a){ a.target===this&&$("#janela").fadeOut(500) }) }); </script>

0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 15:25

Seu script funcionou. Mas fiquei curioso quanto a ter de se usar dois blocos de código.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 15:27

Eu só adicionei um if para verificar se a div está mostrada. Se a div não está sendo mostrada faz um return false, ou seja, não exibe o trecho do código de mostrar a div.

if( $('#janela').is(':visible') ) { } else { return false; }

São 2 blocos. Um é o do window do ready, que é independente. Outro é só para o resize.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 15:40

Entendi. Minha curiosidade maior foi por conta de a linha abaixo ter de ser duplicada, uma vez em cada bloco:

$("#janela").fadeIn(500),$(".janela-box-conteudo").load("teste2.php?valor1=1&valor2=2&largura="+$(window).width()),$("#janela, .scroll_janela").jScrollPane()}),$("#janela, .fechar_janela").click(function(a){a.target===this&&$("#janela").fadeOut(500);

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 15:44

:)
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 16:02

Muito obrigado.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 16:18

Numa paginação de resultados, como posso trabalhar o link para o mesmo arquivo aberto na janela modal sem sair dela?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 16:24

Você tem que usar uma paginação que seja em jQuery, e que o resultado seja aberto em divs.
Aqui tem um modelo http://onlinewebapplication.com/paginat ... jax-mysql/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 16:32

Vou ver. Obrigado.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 16:42

Num outro tópico em que você está me ajudando viewtopic.php?f=1&t=9994&p=33822#p33822, sobre captura da largura da janela, há o refresh a toda hora que creio ser por conta da altura da página. Se abro o código do arquivo teste2.php, recebendo a largura do arquivo teste1.php, na janela modal, a variação da largura funciona e o refresh não ocorre. Preciso conseguir fazer a paginação de resultados na janela modal. Vou ver o código de paginação cujo link você postou.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 17:01

Independentemente da paginação de resultados, como deve ser o link para outra página dentro da janela modal? A página que chamarei também deve ter o código da janela modal? No caso deste tópico, um link do arquivo teste2.php (aberto na janela modal) para o arquivo teste3.php (também a ser aberto dentro da janela modal)?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 18:18

O documento que se abre dentro da div é independente do arquivo principal. Sendo assim, você vai ter que colocar no documento que é aberto uma nova requisição via jQuery para abrir em uma div no próprio documento.

Sendo assim o documento que é aberto dentro da modal tem que ter a chamada jQuery, a função para o elemento que recebe o clique e abre a div dentro da própria modal.

Por exemplo, se você colocar esse código abaixo dentro da janela que será a modal.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".link").click(function() { $("#arquivo").load($(this).attr("data-link")); }); }); </script> <a href="javascript://" class="link" data-link="outroarquivo.php">link</a> <div id="arquivo"></div>

Dentro da modal vai haver uma nova requisição jogando o conteúdo na div dentro da modal.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 19:13

Obrigado. Vou tentar fazer.

Eu devo repetir, para o link das páginas internas, nos arquivos chamados na janela modal, o código CSS usado no arquivo que tem o link para a abertura da janela, ou é usado o CSS que está nesse arquivo?

E quanto ao resize, a respeito da variação da largura, nas páginas que são chamadas além da primeira chamada na janela?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 19:27

O código CSS você pode usar da página principal, mas seria interessante ter o CSS específico da página chamada, sem conflitar nomes com as classes do arquivo principal.

Como você receber a largura no primeiro arquivo chamado na modal, pode passar para os outros arquivos via GET ou POST pelo jQuery.
Agora, quando fizer o resize vai voltar para página principal.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 19:36

Cara, estou quase conseguindo. Muito legal. Não entendi o que você disse do resize. Por exemplo: quando chamo o primeiro arquivo da janela, o resize é feito. Mas nos arquivos que chamo em seguida na janela não é feito?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 19:39

Por exemplo, você está no celular no modo paisagem, vai carregar o documento primeiro.php dentro da modal. Ai vamos supor que o usuário vai navegando pela modal. Se por acaso ele mudar para o modo retrato vai recarregar o primeiro.php novamente. Porque é o que está definido lá no arquivo principal, na função do resize.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1309
Sexo: Masculino

Re: Exibir largura de janela modal jQuery em variável PHP

14-10-2016 20:02

Sim. Mas não posso mandar de primeiro.php para segundo.php, dentro da janela, o resize como foi mandado do arquivo que tem o link fora da janela para primeiro.php na janela?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Exibir largura de janela modal jQuery em variável PHP

15-10-2016 11:19

Se você está na modal no primeiro arquivo e chama o segundo arquivo via load por exemplo, você pode mandar a largura via GET ou POST. O problema será se o usuário redimensionar a janela. Porque ai fica complicado capturar o arquivo aberto na modal para mandar para o arquivo principal, onde está a função do resize.
0
A melhor hospedagem para o seu site HostGator!
  • 1
  • 2
  • 3
  • 4
  • 5
  • 9

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado