[TUTORIAL] Botão atualizar para widgets de ultimos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Qui 14 Fev 2013, 12:22



[TUTORIAL] Botão atualizar para widgets de ultimos assuntos

(Administradores, vcs poderiam abir um espaço aqui no forum para suporte forumeiros pois é muito bom Razz)O efeito desse tutorial é adicionar um botão para atualizar o widget ultimos assuntos

--> Tutoriais sobre Programação <--
[TUTORIAL] Botão atualizar para widgets de ultimos assuntos


- Código JavaScript...
Aceda em: Novo JavaScript

Código:
jQuery(document).ready(function(){
numero = POSIÇÃO_DO_WIDGET;
pega = numero - 1;
jQuery('.module:eq('+pega+')').before('<center><div id="contatlua"><span id="atlua">Atualizar</span><br><img src="http://i.imgur.com/xIXxQPx.png"></div></center>');
jQuery('#right, #left').mouseleave(function(){
jQuery('#contatlua').fadeOut();
});
jQuery('#atlua').click(function(){
jQuery('#atlua').text('Atualizando...');
jQuery('.module:eq('+pega+') .main-content').html('<center><img width="90%" src="http://www.portal.fmu.br/Global/img/loading.gif"></center>');
jQuery.get('/forum', function(expiressf){
pegsrf = jQuery('.module:eq('+pega+') .main-content', expiressf).html();
jQuery('.module:eq('+pega+') .main-content').html(pegsrf);
jQuery('#atlua').text('Atualizado!');
jQuery('#right, #left').delay(700).mouseleave();
});
});
jQuery('#contatlua').hide();
jQuery('.module:first').hover(function(){
jQuery('#atlua').text('Atualizar');
jQuery('#contatlua').fadeIn();
});

});
Envestimento: Em todas as págianas

Procure por: POSIÇÃO_DO_WIDGET e troque pela posição em que o widget ultimos assuntos está, por exemplo aqui no forum ele está em primeiro lugar, então terei que colocar o número 1.

Salve!

- Código CSS...
Aceda em: Folha de Estilo CSS

Código:
#atlua:hover{
background: #7FBDF0
}
#atlua{
z-index:999;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
position:relative;
cursor:pointer;
font-weight:bold;
border: 1px solid darkblue;
border-radius:6px;
background:#BAD9F2;
padding: 5px 10px;
}
Salve!

  • Funcionalidade:
    PUNBB.

  • Resultado:




© SH-Design


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Botão atualizar para widgets de ultimos assuntos - Mais tutoriais em: http://shdesign.ativoforum.com

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por Dancity em Qui 14 Fev 2013, 15:07

Muito bom soulokko você vai ajudar bastante a comunidade, e principalmente a staff.

Só achei que isso não é bem um tutorial é mais um "como fazer" afinal você deu o código pronto. Mas de qualquer forma esses tipos de tutoriais são muito bons pra quem não sabe fazer algo.

Gostei muito, continue assim!

Dancity

Ranking : Nota A
Número de Mensagens : 1339
Data de inscrição : 11/01/2009
Notas recebidas : A
Reputação : 8
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   :
   :

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por PedroX em Qui 14 Fev 2013, 15:58

Funcionalidade:
PUNBB.
Esse é o problema. Não se aplica a esse fórum.

Mas o tutorial é muito bom. São códigos bem úteis. A forumeiros não dá suporte a javascript, então foi uma boa ideia criar um fórum sobre isso. Seria melhor ainda se os tutoriais aqui fossem para phpBB3.

Até mais!

PedroX

Ranking : Nota C
Número de Mensagens : 6034
Idade : 21
Data de inscrição : 26/07/2008
Notas recebidas : C+B
Reputação : 286
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Sab 16 Fev 2013, 21:59

Ok, aqui o code para phpbb3 (p.s.: o css é o mesmo):

Código:
jQuery(document).ready(function(){
numero = POSIÇÃO_DO_WIDGET;
pega = numero - 1;
jQuery('#left .module:eq('+pega+')').before('<center><div id="contatlua"><span id="atlua">Atualizar</span><br><img src="http://i.imgur.com/xIXxQPx.png"></div></center>');
jQuery('#right, #left').mouseleave(function(){
jQuery('#contatlua').fadeOut();
});
jQuery('#atlua').click(function(){
jQuery('#atlua').text('Atualizando...');
jQuery('#left .module:eq('+pega+')').html('<center><img width="90%" src="http://www.portal.fmu.br/Global/img/loading.gif"></center>');
jQuery.get('/forum', function(expiressf){
pegsrf = jQuery('.module:eq('+pega+')', expiressf).html();
jQuery('#left .module:eq('+pega+')').html(pegsrf);
jQuery('#atlua').text('Atualizado!');
jQuery('#right, #left').delay(700).mouseleave();
});
});
jQuery('#contatlua').hide();
jQuery('#left .module:eq('+pega+')').hover(function(){
jQuery('#atlua').text('Atualizar');
jQuery('#contatlua').fadeIn();
});

});

EDIT*
testei esse code acima e é funcional em todas as versões ;)

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por PedroX em Sab 16 Fev 2013, 22:24

Parece que não está funcionando. Obs: está aplicado aos tópicos e fóruns.

PedroX

Ranking : Nota C
Número de Mensagens : 6034
Idade : 21
Data de inscrição : 26/07/2008
Notas recebidas : C+B
Reputação : 286
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Sab 16 Fev 2013, 22:35

Olá, deixe marcado em todas as páginas ;) já montei o code, só pegar e colar:

Código:
jQuery(document).ready(function(){
numero = 2;
pega = numero - 1;
jQuery('#left .module:eq('+pega+')').before('<center><div id="contatlua"><span id="atlua">Atualizar</span><br><img src="http://i.imgur.com/xIXxQPx.png"></div></center>');
jQuery('#left').mouseleave(function(){
jQuery('#contatlua').fadeOut();
});
jQuery('#atlua').click(function(){
jQuery('#atlua').text('Atualizando...');
jQuery('#left .module:eq('+pega+')').html('<center><img width="90%" src="http://www.portal.fmu.br/Global/img/loading.gif"></center>');
jQuery.get('/forum', function(expiressf){
pegsrf = jQuery('.module:eq('+pega+')', expiressf).html();
jQuery('#left .module:eq('+pega+')').html(pegsrf);
jQuery('#atlua').text('Atualizado!');
jQuery('#left').delay(700).mouseleave();
});
});
jQuery('#contatlua').hide();
jQuery('#left .module:eq('+pega+')').hover(function(){
jQuery('#atlua').text('Atualizar');
jQuery('#contatlua').fadeIn();
});

});
OFF = Vê ai dps: http://gmbr.forumeiros.com/t25848-sugestao-formulario-automatico

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por PedroX em Dom 17 Fev 2013, 10:45

Agora está funcionando. É bem rápido.

Edit: Acontece algo estranho:

- Ao marcar 'Em todas as páginas', não funciona em lugar algum.
- Ao marcar 'Indice', 'Tópicos' e 'Fóruns', funciona apenas no índice e nos fóruns.

Até mais!

PedroX

Ranking : Nota C
Número de Mensagens : 6034
Idade : 21
Data de inscrição : 26/07/2008
Notas recebidas : C+B
Reputação : 286
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Dom 17 Fev 2013, 11:13

Nossa, que estranho >.<

Faça assim: Crie um novo widget, procure por: Utilizar table type e marque não. Após isso, cole o codigo abaixo e salve:

Código:
<script>    jQuery(document).ready(function(){
    numero = 2;
    pega = numero - 1;
    jQuery('#left .module:eq('+pega+')').before('<center><div id="contatlua"><span id="atlua">Atualizar</span><br><img src="http://i.imgur.com/xIXxQPx.png"></div></center>');
    jQuery('#left').mouseleave(function(){
    jQuery('#contatlua').fadeOut();
    });
    jQuery('#atlua').click(function(){
    jQuery('#atlua').text('Atualizando...');
    jQuery('#left .module:eq('+pega+')').html('<center><img width="90%" src="http://www.portal.fmu.br/Global/img/loading.gif"></center>');
    jQuery.get('/forum', function(expiressf){
    pegsrf = jQuery('.module:eq('+pega+')', expiressf).html();
    jQuery('#left .module:eq('+pega+')').html(pegsrf);
    jQuery('#atlua').text('Atualizado!');
    jQuery('#left').delay(700).mouseleave();
    });
    });
    jQuery('#contatlua').hide();
    jQuery('#left .module:eq('+pega+')').hover(function(){
    jQuery('#atlua').text('Atualizar');
    jQuery('#contatlua').fadeIn();
    });

    }); </script>

P.S.: APAGUE O JAVASCRIPT E DEIXE APENAS O WIDGET, E VÁ FAZENDO O TESTE, SE É MELHOR COM OS DOIS JUNTOS, APENAS COM O WIDGET OU APENAS COM O JAVASCRIPT.

Deve funionar nas outras páginas ;)

http://gmbr.forumeiros.com/t25848-sugestao-formulario-automatico

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Dom 17 Fev 2013, 18:45

Olá, desculpem pelo double-post, mas axo que alguem mexeu no code e ele tá dando bug agora >.< troquem o code por este:

Código:
jQuery(document).ready(function(){
  jQuery('body *').hover(function(){
      jQuery.get('/forum', function(expiressf){
          pegsrf = jQuery('#left .module:eq(1)', expiressf).html();
                }, function(){
    jQuery('#left .module:eq(1)').html(pegsrf);
});
      });
PODEM DELETAR O CSS....

p.s.: agora ele atualiza tudo sozinho, sem apareer botão, a cada segundo ele fica atualizando ;)

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por PedroX em Seg 18 Fev 2013, 13:39

Estou usando o seguinte código:
Código:
ph="#left > .module:eq(1) > .inner";

function b(){$.get("/forum", c);}

function c(data) { $(ph).html($(ph, data).html()); }

$(document).ready(function(){$(ph).click(b);});

Basta dar um clique em qualquer parte do widget para atualizar.

PedroX

Ranking : Nota C
Número de Mensagens : 6034
Idade : 21
Data de inscrição : 26/07/2008
Notas recebidas : C+B
Reputação : 286
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Seg 18 Fev 2013, 14:43

é um bom código Very Happy mas com este, só em passar o mosue em qq lugar ele já atualiza:

Código:
jQuery(document).ready(function(){
  jQuery('body *').hover(function(){
      jQuery.get('/forum', function(expiressf){
          pegsrf = jQuery('#left .module:eq(1)', expiressf).html();
                }, function(){
    jQuery('#left .module:eq(1)').html(pegsrf);
});
      });

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por theguitarmester em Seg 18 Fev 2013, 14:45

vi que foi aplicado, prefiro que tenha um botãozinho para atualizar, porque do modo que está, quando clica para abrir um tópico, ele começa a atualizar, e isto é inutil.


acho que isso vai ser bom, vai evitar ter que atualizdno toda a página.

theguitarmester

Ranking : Sem avaliações
Número de Mensagens : 1908
Idade : 21
Data de inscrição : 28/02/2012
Notas recebidas : B
Reputação : 80
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 1
Prêmios
   : 2
   : 2
   : 1

http://guitarmester.no.comunidades.net/index.php?pagina=19362978

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por PedroX em Seg 18 Fev 2013, 14:55

é um bom código mas com este, só em passar o mosue em qq lugar ele já atualiza
O problema é esse mesmo. Ficar atualizando sempre vai consumir a internet da pessoa. A página pesa uns 60 KB. Se a pessoa tiver um plano 3G, logo gastará boa parte da banda contratada.

Até mais!

PedroX

Ranking : Nota C
Número de Mensagens : 6034
Idade : 21
Data de inscrição : 26/07/2008
Notas recebidas : C+B
Reputação : 286
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Seg 18 Fev 2013, 15:23

theguitarmester escreveu:vi que foi aplicado, prefiro que tenha um botãozinho para atualizar, porque do modo que está, quando clica para abrir um tópico, ele começa a atualizar, e isto é inutil.


acho que isso vai ser bom, vai evitar ter que atualizdno toda a página.
Verdade agora q notei isso >.<

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por soulokko em Seg 18 Fev 2013, 17:16

eu fiz outro code muito bom Very Happy

o resultado final dele é esse: http://i.imgur.com/E5XLcAN.png

http://shdesign.ativoforum.com/t287-tutorial-menu-de-mp-s#1786

soulokko

Número de Mensagens : 14
Data de inscrição : 08/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por Thopson1m em Seg 18 Fev 2013, 20:13

soulokko escreveu:cara, vc é um velho vonhecido meu Very Happy lembra da RMBR? caradealho? HenriqueBr? pois bem eu sou o henrique Happy au abandonei o RMBR agora montei outro forum: http://shdesign.ativoforum.com/

Galera não confiem nos códigos dele, pois ele é, como podem ver pela citação da MP que ele me enviou ao punir ele por quebrar as regras com Double Posts, fake do HenriqueBr, que estava só causando baderna e Spam no fórum, logo, não confiem nesses códigos que ele está passando, pois como ele estava querendo confusão antes, ele pode manipular e hackear o fórum usando esses códigos! Cuidado!
Bani ele novamente por uso de fake que não é autorizado por, pelo menos, antes de um bom tempo desde que foi banido.
Fica o alerta!
Até!

alert('Olá')

Thopson1m

Número de Mensagens : 624
Idade : 26
Data de inscrição : 21/05/2011
Reputação : 16
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://gnbr.forumeiros.com

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por PedroX em Seg 18 Fev 2013, 21:22

vi que foi aplicado, prefiro que tenha um botãozinho para atualizar, porque do modo que está, quando clica para abrir um tópico, ele começa a atualizar, e isto é inutil.
Resolvido, depois de várias tentativas. :]

$(this).after('');


Até mais!

PedroX

Ranking : Nota C
Número de Mensagens : 6034
Idade : 21
Data de inscrição : 26/07/2008
Notas recebidas : C+B
Reputação : 286
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Botão atualizar para widgets de ultimos

Mensagem por Conteúdo patrocinado Hoje à(s) 02:06


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum