1 [tutorial]botão de fim e topo da página 09/11/12, 03:44 pm
-Naruto
Administrador
Publicitário
Helper
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
<az><b></b>Botão de fim e topo da página</az>
Por vezes é chato quando o nosso fórum é bastante extenso e precisamos de fazer um scroll que demora sempre um pouco. Neste tutorial, irá aprender a como criar dois botões de topo e final de página, sempre visíveis na janela do navegador.
1º - <sp>Os códigos que serão usados para cada versão:</sp>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] phpBB3 e phpBB2
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] PunBB
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Invision
<v><div style="position: fixed; top: 0px; right: 0px;"><img src="https://i.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick="$('html,body').animate({scrollTop: $('#gfooter').offset().top}, 2000);" title="Fundo da página"></div><div style="position: fixed; bottom: 0px; right: 0px;">
<img src="https://i.servimg.com/u/f68/14/38/92/90/up-ico10.png" onclick="$('html,body').animate({scrollTop: $('#ipbwrapper').offset().top}, 2000);" title="Topo da página"></div></v>
Pode sempre ter dúvidas a modificar as imagens e agora aprenderá a como mudar e onde mudar.
Um código de qualquer versão, tem o código da imagem, como exemplo este, que se encontra no início e no fim do código:
Mudamos somente a parte do link para a imagem que nós desejamos, pode ser qualquer uma!
Exemplo:
<vr>Imagens usadas nos códigos</vr>
Topo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Fim:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
2º - A colocação do código no respectivo lugar:
Para o código ter efeito, tem de ser colocado em algum sítio. Recomendo na página inicial, pois costuma ser a com maior extensão!
Para isso, aceda a:
Painel de Controle[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Home page [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Geral[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Mensagem na Home Page
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Pode ainda preferir colocar em todas as páginas do fórum!
Para isso, aceda a:
Painel de Controle [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Módulos[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Portal & Widgets [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Gestão dos widgets do fórum
Procure o seguinte botão e clique nele:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
---------------------------------------
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Coloque o seguinte título: - Ele ficará oculto.
---------------------------------------
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Table-Type Selecione 'Não' para que não fique um widget a mais.
---------------------------------------
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Campo para o código Este é o campo que suporta o código. Nele, colocará o código de acordo com a sua versão.
<az><b></b>Botão de fim e topo da página</az>
Por vezes é chato quando o nosso fórum é bastante extenso e precisamos de fazer um scroll que demora sempre um pouco. Neste tutorial, irá aprender a como criar dois botões de topo e final de página, sempre visíveis na janela do navegador.
1º - <sp>Os códigos que serão usados para cada versão:</sp>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] phpBB3 e phpBB2
- Código:
<div style="position: fixed; top: 0px; right: 0px;"><img src="http://i68.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick="$('html,body').animate({scrollTop: $('#page-footer').offset().top}, 2000);" title="Fundo da página"></div><div style="position: fixed; bottom: 0px; right: 0px;">
<img src="http://i68.servimg.com/u/f68/14/38/92/90/up-ico10.png" onclick="$('html,body').animate({scrollTop: $('#phpbb').offset().top}, 2000);" title="Topo da página"></div>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] PunBB
- Código:
<div style="position: fixed; top: 0px; right: 0px;"><img src="http://i68.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick="$('html,body').animate({scrollTop: $('#pun-foot').offset().top}, 2000);" title="Fundo da página"></div><div style="position: fixed; bottom: 0px; right: 0px;">
<img src="http://i68.servimg.com/u/f68/14/38/92/90/up-ico10.png" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);" title="Topo da página"></div>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Invision
<v><div style="position: fixed; top: 0px; right: 0px;"><img src="https://i.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick="$('html,body').animate({scrollTop: $('#gfooter').offset().top}, 2000);" title="Fundo da página"></div><div style="position: fixed; bottom: 0px; right: 0px;">
<img src="https://i.servimg.com/u/f68/14/38/92/90/up-ico10.png" onclick="$('html,body').animate({scrollTop: $('#ipbwrapper').offset().top}, 2000);" title="Topo da página"></div></v>
Pode sempre ter dúvidas a modificar as imagens e agora aprenderá a como mudar e onde mudar.
Um código de qualquer versão, tem o código da imagem, como exemplo este, que se encontra no início e no fim do código:
- Código:
...<img src="http://i68.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick=...
Mudamos somente a parte do link para a imagem que nós desejamos, pode ser qualquer uma!
Exemplo:
- Código:
...<img src="http://2img.net/i/bl/logo.png" onclick=...
<vr>Imagens usadas nos códigos</vr>
Topo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Fim:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
2º - A colocação do código no respectivo lugar:
Para o código ter efeito, tem de ser colocado em algum sítio. Recomendo na página inicial, pois costuma ser a com maior extensão!
Para isso, aceda a:
Painel de Controle[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Home page [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Geral[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Mensagem na Home Page
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Pode ainda preferir colocar em todas as páginas do fórum!
Para isso, aceda a:
Painel de Controle [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Módulos[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Portal & Widgets [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Gestão dos widgets do fórum
Procure o seguinte botão e clique nele:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
---------------------------------------
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Coloque o seguinte título: - Ele ficará oculto.
---------------------------------------
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Table-Type Selecione 'Não' para que não fique um widget a mais.
---------------------------------------
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Campo para o código Este é o campo que suporta o código. Nele, colocará o código de acordo com a sua versão.