Jump to content
Fórum Script Brasil
  • 0

Div Flutuante


Chagas Neto
 Share

Question

Ola amigos. Acho que é meu primeiro post, pois sempre que eu procuro acho aqui bem mastigadinho. Mas agora preciso de uma pequena ajuda. Procurei e não encontrei, pra voces "experts" deve ser moleza.

Tenho uma pagina em php onde são fornecidas informacoes em tempo real de um servidor linux e é atualizada a cada minuto através do comando:

echo "<META HTTP-EQUIV=Refresh CONTENT='60'>";

então eu queria um popup onde não aparece a barra de endereços e até consegui, mas sabemos que, por medida de seguranca, o firefox mostra de qualquer jeito. Resumindo: no IExplorer 9 tudo ok, no Firefox, mostra a barra de endereços.

então a saida: Uma div flutuante. Funciona perfeitamente e muito legal em ambos. Mas... quando o refresh atua fecha popup (Div Flutuante). Estou descrevendo abaixo o código pra ver se existe algo que possamos colocar no código para que quando o refresh (também é necessário para sabermos varias informacoes que estao mudando a cada minuto) entre em execução o popup não feche. O script abre uma janelinha no centro da tela bem legal com uma barra de fechar. Agradeço antecipadamente se alguém souber algo. Um abraço a todos.

Codigo da Div Flutuante:

<script type="text/javascript">

function PopUp(url, width, height) {

// Definindo meio da tela e mais um pouquinho pra cima

var LadoEsquerdo = (screen.width - width)/2;

var ParteCima = ((screen.height - height)/2 - 80);

popup = document.createElement('div');

popup.style.position = 'absolute';

popup.style.width = width + 'px';

popup.style.height = height + 'px';

popup.style.left = LadoEsquerdo + 'px';

popup.style.top = ParteCima + 'px';

popup.style.border = '1px solid #3C70FF';

content = document.createElement('iframe');

content.src = url;

content.style.width = width + 'px';

content.style.height = height + 'px';

content.style.border = '0px';

close_btn = document.createElement('div');

close_btn.title = 'Fechar';

close_btn.style.position = 'absolute';

close_btn.style.background = 'url(BarraFechar.png)';

close_btn.style.width = '385px';

close_btn.style.height = '16px';

close_btn.style.left = (width-362) + 'px';

close_btn.style.margin = '-20px';

close_btn.style.textAlign = 'center';

close_btn.onclick = function () {

document.body.removeChild(popup);

}

close_btn.onmouseover = function () {

close_btn.style.backgroundPosition = '0px 0px';

}

close_btn.onmouseout = function () {

close_btn.style.backgroundPosition = '0px 0px';

}

popup.appendChild(close_btn);

popup.appendChild(content);

document.body.appendChild(popup);

}

</script>

o link como chamamos o popup:

<a href="java script:AbrePopUP('Atendimento.php',380,400)"><img border="0" align="middle" src="User.gif" width="16" height="12"></a>

Chagas Neto

Mossoró/RN

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Obrigado amigo. Vou dá uma olhada.

22/08/2012.

Dei uma olhada mas não sever para o que eu quero. Eu consegui resolver o problema do refresh, foi só criar uma div dentro de outra pagina e atualizar os dados de lá, então não há refresh. O problema agora é outro. Quando abro uma janela e depois outra sem fechar uma ficam as duas e não dá pra fechar nem uma nem outra. Será que não tem um jeito de impedir que abram outra janela usando esse script enquando já tiver uma aberta, ou então ao se abrir outra fechar a que estiver aberta? onde eu encontro os parâmetros do Popup.Style e do conte.style?

obrigado a todos.

Edited by Chagas Neto
Link to comment
Share on other sites

  • 0

ninguém mais tem uma dica? Ainda continuo com o mesmo problema. Deve ter algum parametro que quando clica-se em em algum lugar fechar a div, ou então torna-la modal, nesse caso obrigatoriamente teria que fechar a janela para abrir outra. Eu coloquei a div em cima dos links que abrem a janela div pra evitar que se clique e abra outra div, mas to precisando colocar links em outros lugares, então não tem como a div "cobrir" toda a area.

Agradeceria se alguém desse uma dica, pois é importante para o que estou fazendo. não queria colocar Jquery ou outra coisa porque esse codigo é muito simples, legal e não precisa de nenhum componente adicional, nem .js, nem css nem nada e ficou muito legal.

Edited by Chagas Neto
Link to comment
Share on other sites

  • 0

Se o problema é só aquele no firefox que mostra o o caminho no link, use AJAX!

Ele serve para isso mesmo, esconder as informações que estão transitando a cada min.

E eu acho que você nem precisa atualizar a página toda para receber, basta atualizar a página com o AJAX (abrir de novo o php, sem ter que atualizar a página inteira).

Olha um exemplo de AJAX, é um relógio, mostra as horas do servidor:

java script:

function getHTTPObject(){
    if (window.ActiveXObject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP"); // IE
    }
    else if (window.XMLHttpRequest)
    {
        return new XMLHttpRequest(); // Outros Navegadores
    }
    else{
        alert("Seu Navegador não suporta AJAX."); // Navegadores antigos
        return null;
    }
}
function setOutput(){
    if (httpObject.readyState == 4)
    {
        document.getElementById('hora').innerHTML = httpObject.responseText;
    }

}
function horas(){
    httpObject = getHTTPObject();
    if (httpObject != null)
    {
        httpObject.open("GET", "Hora.php", true);
        httpObject.send(null);
        httpObject.onreadystatechange = setOutput;
    }
     setTimeout("horas();",(1));
}
var httpObject = null;
window.onload = function () {
    horas();    
}
PHP, Hora.php:
<?php
date_default_timezone_set('America/Sao_Paulo');
echo "Data: ";
echo date("d/m/y");
echo " Hora: ";
echo date("H:i:s"); 
echo " (Brasília)";
?>

Edited by Arash
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.9k
    • Total Posts
      648.7k
×
×
  • Create New...