Box Overlay...

Bruno Augusto · Fevereiro 5, 2012

Ah! Fala sério.

Eu devo ser muito ruim de JavaScript mesmo. Tentei fazer sozinho, mas acabei apagando todas as tentativas de raiva. Procurei uma forma simples de fazer e também não consegui.

A mais próxima foi com jQuery UI, mas estilizar esse negócio é o cão chupando manga virado do avesso.

Eu quero uma coisinha simples, uma caixinha com uma imagem de carregando para usar antes de uma requisição AJAX e ocultar depois de executado.

Só que essa caixinha seria dessas que estende uma DIV pela tela e bloqueia os elementos por trás, liberando quando escondida.

Só isso, é tão difícil assim?

Guilherme Oderdenge · Fevereiro 5, 2012

Podes fazer isso com CSS.

Veja:

#overlay_platform {
   background: #000;
   width: 100%;
   min-height: 100%;
   position: fixed;
   z-index: 9999;
   display: none;
}

Depois, no HTML, é só fazer:

<html>
  <body>
     <head>...</head>

     <div id="overlay_platform"></div>
     .... todo o seu conteúdo ....
   </body>
</html>

Ou seja, coloque a camada lá encima - antes de todo o conteúdo - e invoque-a com jQuery (show, slideUp, fadeIn, etc...).

Abraço! :thumbsup:

Bruno Augusto · Fevereiro 6, 2012

Éééé.... A parte do CSS funcionou de forma correta, enquanto as outras tentativas não (antes essa DIV ficava emcima e não sobre).

Mas o problema maior ainda está no JavaScript mesmo.

Além de usar esse overlay nas requisições AJAX, gostaria de poder usar antes e depois de outras ações, como que indicando que algo está trabalhando, entende?

No primeiro caso, depois de carregada a página, estaria procurando determinadas ocorrências e atribuindo links à elas.

Gostaria que, assim que a página carregasse o overlay aparecesse e, depois de executada a ação, ele sumisse. Mas do jeito que está, ele nem aparece:

Layout.messages = function() {

   Helper.blackout( 'show' );

   var content = $( '#content' );

   $( JSON.parse( Cookie.read( 'CookieComAsInformacoesQueVouUsar' ) ) ).each( function() {

       content.html(

           content.html().replace(

               this.ocorrencia,

               '<a href="' + Helper.url( { 'foo': 'bar', 'id': this.idOcorrencia } ) + '">' + this.ocorrencia + '</a>'
           )
       );
   });

   Helper.blackout( 'hide' );
};

Como pode ver eu separei o blackout dialog num "objeto" à parte:

function Helper() {}

Helper.blackout = function( action ) {

   if( action == 'show' ) {

       $( '#ExtensionLoading' ).show();

   } else if( action == 'hide' ) {

       $( '#ExtensionLoading' ).hide();
   }
};

Tentei fazer umas gambiarras contando os elementos ou fazendo o objeto do seletor que estou manipulando prometer esperar, mas nada adianta.

Se eu comento o "hide", beleza, o overlay aparece e, devido a opacidade eu vejo através dele o each() funcionando. Mas depois não consigo ocultá-lo.

Bruno Augusto · Fevereiro 16, 2012

Sem querer upar, mas já upando... Nada?

Podem até esquecer tudo aquilo que eu já tenho, apenas uma direção para o negócio funcionando de forma simples já tá valendo.

Daí eu tento implementar e SE der problema, veremos.

William Bruno · Fevereiro 16, 2012

http://wbruno.com.br/2011/11/22/abrir-modal-tuto-maujor-automaticamente-ao-carregar-pagina-jquery/

chame a função open_modal() no início da tua requisição, com o teu loading, e qndo a requisição acabar, feche tudo.

Bruno Augusto · Fevereiro 16, 2012

O problema (eu acho) é que não é o usuário quem deverá fechar o elemento. Logo não haveria um botão/link que dispararia a ação de ocultar a DIV e clarear a tela.

A intenção é DEPOIS do load completo da página, executar uma rotina X automaticamente.

Porém, antes de tal rotina acontecer, a tela escurece e no meio da tela aparece uma mensagem informando O QUÊ está sendo executado e, quando a rotina se concuir, o box fecha automaticamente e a visibilidade normal da tela é restaurada.

A utilização prática do recurso será uma extensão que pretendo criar para o Chrome, que vai modificar o HTML de um determinado site, adicionando novos recursos, nem no estilo Greasemonkey do Firefox.

Se for possível atrsar a rotina X alguns milisegundos para que, sei lá, dê tempo de o usuário ler a mensagem do box (que pretendo variar de acordo com a cisrcunstância), melhor.

William Bruno · Fevereiro 17, 2012

sim, dá sim.

só tirar o botão de fechar, e você executar ele. Pronto.

Qual a dúvida ?

Bruno Augusto · Fevereiro 18, 2012

Refiz utilizando o tutorial demonstrado e, apesar de ter ficado bem mais sensato, continua com os dois problemas iniciais, ambos referentes à visibilidade do overlay.

Layout.messages = function() {

   Helpers.dialog( 'Foo', 1 );

   $( JSON.parse( Cookie.read( 'CookieName' ) ) ).each( function() {

       $( '#content' ).html(

           $( '#content' ).html().replace(

               new RegExp( 'padrão a ser usado, que não vem ao caso', 'g' ),

               'substituição'
           )
       );
   });

   //Helpers.dialog();
};

É assim que estou usando. Agora, a definição de Helpers.dialog() que nada mais é do que sua função, com as rotinas encapsuladas:

Helpers.dialog = function( message, state ) {

   // Creating necessary elements, if needed

   if( $( 'body' ).has( 'div#mask' ).length == 0 ) {

       $( 'body' ).prepend(

           '<div id="mask">' +

               '<div id="dialog">' + message + '</div>' +

           '</div>'
       );
   }

   // Configuring them

   $( 'div#mask' ).css(

       {
           'height' : $( document ).height(),
           'width'  : $( window ).width()
       }
   );

   $( 'div#mask #dialog' ).css(

       {
           'top'  : $( window ).height() / 2 - $( 'div#mask #dialog' ).height() / 2,
           'left' : $( window ).width()  / 2 - $( 'div#mask #dialog' ).width()  / 2
       }
   );

   // Show or Hide?

   if( ! state ) var state = 0;

   if( state == 0 || ! message ) {

       $( '#mask #dialog, #mask' ).hide();

   } else if( state == 1 ) {

       $( '#mask' ).fadeIn( 1000 );
       $( '#mask' ).fadeTo( 'slow', 0.8 );

       $( '#mask #dialog' ).fadeIn( 2000 );
   }
};

Como eu disse, a intenção é, após o load completo, mostrar a mensagem, executar a rotina desejada e, depois da mesma ter sido concluída, ocultar.

Como visto eu comentei a linha responsável pelo ocultamento e já explico o porquê.

Primeiro problema de visbilidade: A rotina a ser executada o está sendo EM PARALELO com a exibição do overlay e da caixa de diálogo.

Sendo assim, torna-se completamente inútil tal recurso, já que a idéia é informar o que vai acontecer antes que de fato aconteça (já que é visível através da opacidade aplicada).

Se descomentar a linha de ocultamento, piora, pois o overlay sequer aparece (pelo menos perceptívelmente) e, acredito eu que, uma vez resolvendo o primeiro problema o segundo se resolva sozinho.

Com "pelo menos perceptivelmente" quero dizer que a exibição até ocorre, mas só é vista se o hide() receber um parâmetro slow. O overlay e o box aparecem e somem, tudo MUITO rápido.

Agora não sei se é um defeito de codificação ou se é comportamento padrão de extensões do Chrome, que faz tudo ocorrer em paralelo por padrão.

Supondo que seja comportamento padrão, é possível atrasar manualmente a rotina para que só ocorra alguns segundos depois de o overlay tenha aparecido (para que de tempo de ler) e, também, atrasar o ocultamento para que só ocorra depois de a rotina ter se concluído?

William Bruno · Fevereiro 18, 2012

sim, é possível.

ai você usa um .delay(), ou um .setTimeout()

Arquivado

Box Overlay...

Recommended Posts

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante