Div Flutuante

[Chagas Neto]

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

[dinohills]

Cara de uma olhada nesse tópico que postei a um tempinho acho que te ajuda

window.open modal

Ou se não de uma procurada sobre div flutuante com jquery

T+

[Chagas Neto]

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.

Editado Agosto 22, 2012 por Chagas Neto

[Chagas Neto]

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.

Editado Setembro 21, 2012 por Chagas Neto

[Arash]

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)";
?>

Editado Setembro 21, 2012 por Arash