Nabble Support › Old › Free Support › Português

Série Como Fazer - Mensagem com efeito fade-in

Classic

List

Threaded

1 message

jsmoraes

Série Como Fazer - Mensagem com efeito fade-in

Inicialmente foi um teste para inclusão de programação JAVA que possibilitasse alguns efeitos de html dinâmico. Entretanto teve um bom uso para uma mensagem de boas vindas ao visitante do fórum.

Escolhi uma posição bem próximo da região com o login do usuário. E para uma boa apresentação atentei para as cores de fundo do meu fórum. Portanto não é uma programação válida para qualquer fórum. É preciso algumas adaptações das cores para o efeito fade in.

Utilizei o mesmo princípio para mostra de mensagem de administração. E criei condição para que só esteja presente na página principal do fórum. Aqui também necessita de adaptação para uso em outro fórum, que certamente terá o nome de página inicial diferente.

Para que o script JAVA funcione ao carregar a página principal tive que alterar a declaração do tag HTML para body, incluindo a instrução para execução da função de fade in. Embora esta instrução esteja presente em todas as outras páginas, a inexistência do script JAVA com a função faz com que a declaração seja inócua.

Certamente não é a maneira mais inteligente e limpa de implementação do recurso, mas funciona !
A programação JAVA é bem antiga, com códigos muito simples. Mas também funciona !

Convém que quem vá fazer a inclusão deste recurso tenha um mínimo conhecimento de programação JAVA.

Para implementação do recurso primeiramente criei uma macro, que coloca o script JAVA e o campo DiV que irá mostrar as mensagens:

<macro name="jsm_stand_show_admnistrator_notice">
<n.put_in_head.>
<script type="text/javascript">
a=0;b=1;ob=1;
var colors=new Array("FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","F9F9F9","F1F1F1","E9E9E9","E1E1E1","D9D9D9","D1D1D1","C9C9C9","C1C1C1","BFBFBF","BFBFBF")
function strobeEffect()
{color=colors[a];
aah="<font color="+color+" size='1'>";
aab="</font>"
 
ob1="Bem Vindo"
ob2="ao nosso Fórum"
ob3="não usado"
 
obj=eval("ob"+ob);mid=obj;aa=aah+mid+aab
{object1.innerHTML=aa}
a+=b;if (a==16) b-=2,ob+=1;if (ob==3)ob=1;if (a==0) b+=2;xx=setTimeout("strobeEffect()",60);}
</script>
</n.put_in_head.>
<div id="object1"  style="display:block;text-align:center; margin-left:90%;width:10%;background-color:#BFBFBF"></div>
</macro>

O que seria necessário adaptar caso você queira utilizar deste recurso:
1) as declarações de cores em:

var colors=new Array("FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","F9F9F9","F1F1F1","E9E9E9","E1E1E1","D9D9D9","D1D1D1","C9C9C9","C1C1C1","BFBFBF","BFBFBF")

A última declaração, no caso "BFBFBF", tem que ser a cor de fundo de seu fórum ou da página onde a mensagem será mostrada.
São 17 declarações, mas somente as 16 primeiras serão utilizadas. Há necessidade de que se repita a última cor.

2) estou somente usando 2 variáveis para texto que será mostrado: ob1 e ob2, e por isto na linha de código mais abaixo há a declaração de (ob==3). É isto mesmo. Para duas variáveis com texto, a linha tem que fazer referencia a 3. Se usasse 3 variáveis, a linha faria referencia a 4.

3) na linha da declaração DIV eu defino background-color deste div com a mesma cor de fundo da minha página: BFBFBF.

Para que esta macro seja chamada eu alterei a macro de nome app_html, na região:

...
            <n.show_administrator_notice/>            
            <n.if.equal value1="[n.page_node.subject /]" value2="Astronomia e Astrofotos">
            <then>
                <n.jsm_stand_show_admnistrator_notice/>
            </then>
            </n.if.equal>
...

O que seria necessário adaptar caso você queira utilizar deste recurso:

1) na linha:

<n.if.equal value1="[n.page_node.subject /]" value2="Astronomia e Astrofotos">

em value2 está o nome da página que mostrará a mensagem.

E por fim, alterei a macro de nome html_impl na região:

...
                <head>
                    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                    <n.nabble_stylesheets/>
                    <n.nabble_javascript_libraries/>
                    <n.html_head_content/>
                    <n.nabble_shared_scripts/>
                </head>
                <body onload="strobeEffect()">
                    <div id="notice" class="notice rounded-bottom"></div>
                    <div class="nabble macro_[n.page_template/]" id="nabble">
                        <n.apply_filters.html_body_content/>
                    </div>
                    <n.bottom_scripts/>
                    <n.as_html_comments.site_information/>
                </body>
...

Observatório de Astronomia de Vilatur - W. Herschel
Saquarema - RJ - Brasil
http://www.astronomia.pousadavilatur.com.br