Últimos assuntos com número de respostas e botão scroll
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1 • Compartilhe
Últimos assuntos com número de respostas e botão scroll
Detalhes da questão
Endereço do fórum: http://grandedown.forumeiros.com
Versão do fórum: PunBB
Descrição
Vi nesse fórum: http://brasilplayvicio.com.br/forum
Eu ja testei esse código: https://ajuda.forumeiros.com/t100061-addon-ultimos-assuntos-personalizado
Mas eu queria da forma do outro fórum, pois queria por mais tópicos, pra poder ver mais tópicos sem ocupar muito espaço e ver o número de respostas de cada tópico nos últimos assuntos.
Segue a imagem abaixo:
Lincoln- *****
- Membro desde : 24/09/2011
Mensagens : 422
Pontos : 711
Re: Últimos assuntos com número de respostas e botão scroll
aceda à sua folha de estilos e cole lá o seguinte código:
Seria isso?
- Código:
li.row { border: none !important; }
ul.topiclist li.header dl dd.topics, ul.topiclist li.header dl dd.posts, ul.topiclist li.header dl dd.lastpost { display: none; }
li.row dd.posts:after {
content: 'respostas';
}
li.row dd.topics:after {
content: 'tópicos';
}
Seria isso?
Re: Últimos assuntos com número de respostas e botão scroll
xBreninho_. escreveu:aceda à sua folha de estilos e cole lá o seguinte código:
- Código:
li.row { border: none !important; }
ul.topiclist li.header dl dd.topics, ul.topiclist li.header dl dd.posts, ul.topiclist li.header dl dd.lastpost { display: none; }
li.row dd.posts:after {
content: 'respostas';
}
li.row dd.topics:after {
content: 'tópicos';
}
Seria isso?
As respostas é um código JS, já o scroll não sei. Mas seu código não resultou em nada.
Lincoln- *****
- Membro desde : 24/09/2011
Mensagens : 422
Pontos : 711
Re: Últimos assuntos com número de respostas e botão scroll
Cara não é nada disso, o que você está arrumando?
Alguém que realmente entenda do assunto pode me ajudar?
Alguém que realmente entenda do assunto pode me ajudar?
Lincoln- *****
- Membro desde : 24/09/2011
Mensagens : 422
Pontos : 711
Re: Últimos assuntos com número de respostas e botão scroll
Lincoln escreveu:[...] Alguém que realmente entenda do assunto pode me ajudar?
Rapaz, essa não é uma atitude muito sabia para quem está procurando ajuda. Cordialidade e compreensão é o melhor caminho a se tomar em relação a alguém que tenta te ajudar.
---
Agora quanto aquele plugin de Últimos assuntos, ele é bonito, porém:
Por trás dos panos, ele faz uma requisição para cada tópico na lista apenas para recuperar esse número. O resultado foi mais de 50 requisições para o servidor do Forumeiros. Isso traz um prejuízo muito grande à conexão dos usuários Internet mais fraca, ou a usuários mobile onde existe franquia de dados.
Tem certeza que é isso que o senhor deseja?
Re: Últimos assuntos com número de respostas e botão scroll
O que eu mais queria mesmo seria o scroll, pra eu conseguir colocar mais tópicos, já ficarei satisfeito.
Lincoln- *****
- Membro desde : 24/09/2011
Mensagens : 422
Pontos : 711
Re: Últimos assuntos com número de respostas e botão scroll
Por padrão, o senhor pode definir que apareçam até 99 tópicos no widget. Se o senhor desativar a rolagem, é possível que acertemos no CSS para adicionar scroll. o7
Re: Últimos assuntos com número de respostas e botão scroll
Kyo Panda escreveu:Por padrão, o senhor pode definir que apareçam até 99 tópicos no widget. Se o senhor desativar a rolagem, é possível que acertemos no CSS para adicionar scroll. o7
Eu coloquei 5 tópicos, e desativei a rolagem. Falta só acrescentar o scroll mesmo, com uns 10 tópicos a mais e já está ótimo.
Código que eu uso:
- Código:
$(function() {
$('head').append(
'<style type="text/css">' +
'.recentTopics .main-content {' +
' font-family: helvetica, arial, sans-serif !important;' +
' line-height: 15px;' +
' padding: 0;' +
'}' +
'.recentTopics ul {' +
' padding-left: 0 !important;' +
'}' +
'.mini_photo {' +
' margin-right: 5px;' +
'}' +
'li.recentPost {' +
' min-height: 50px;' +
' padding: 1em 1em 0.5em 1em;' +
' list-style-type: none;' +
' border-bottom: 1px solid #f3f3f3;' +
'}' +
'.recentPost a[href^="/t"] {' +
' font-size: 14px;' +
' text-decoration: none;' +
' font-weight: bold;' +
'}' +
'.recentInline {' +
' min-width: 30%;' +
' font-size: 12px;' +
' float: right;' +
'}' +
'.small_links {' +
' display: table;' +
' margin-top: 10px;' +
'}' +
'.local {' +
' font-size: 0;' +
'}' +
'.local a:after {' +
' content: " → ";' +
'}' +
'.local a:last-child:after {' +
' content: "";' +
'}' +
'.small_links, .small_links a {' +
' color: #a4a4a4 !important;' +
' font-size: 12px !important;' +
' text-decoration: none !important;' +
'}' +
'.creator_post:before {' +
' content: "Tópico iniciado por ";' +
'}' +
'.creator_post:after {' +
' content: ", Em: ";' +
'}' +
'.recentTopics {' +
' margin: 15px 0;' +
'}' +
'</style>'
);
var jModuleRecentPosts = $('.module:contains("Últimos assuntos")');
jModuleRecentPosts
.clone() // Clonando widget de últimos assuntos
.prependTo('#main-content') // Inserindo no main-content
.addClass('recentTopics') // Adicionando nova classe
.removeClass('module'); // Removendo classe existente
$('.recentTopics').each(function() {
$(this).html(
$(this).html()
.replace(/\»/g, '')
.replace(/\<a href="\/t(.*?)\-/g,'<li class="recentPost"><a href="/t$1-')
.replace(/\<\/a\><br\>/g, '</a><div class="recentInline">')
.replace(/\<a href="\/u([0-9])"\>(.*?)<\/a\>/g, '<a href="/u$1">$2</a><br>')
).find('li').wrapAll('<ul></ul>');
$('a[href^="/u"]', this).each(function() {
var jLinkUser = $(this).attr('href');
$(this).before(
'<a href="' + jLinkUser + '" class="user_photo lastpost-avatar">' +
' <img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="mini_photo" />' +
'</a>'
);
var jImg = $(this).prev().find('img'),
jUser = sessionStorage.getItem(jLinkUser);
if(jUser) {
jImg.attr('src', jUser);
} else {
$.ajax({
url: jLinkUser + "?change_version=punbb",
type: 'GET',
success: function(data) {
var jImage = $('#profile-advanced-right .module:first img:first', data).attr('src');
jImg.attr('src', jImage);
sessionStorage.setItem(jLinkUser, jImage);
},
error: function(err)
{
console.log("AJAX error in request (Last posts)");
}
});
}
});
$('a[href^="/t"]', this).each(function() {
var jThis = $(this),
jLinkTpc = jThis.attr('href').split('#')[0];
$.ajax({
url: jLinkTpc + "?change_version=punbb",
type: 'GET',
success: function(recent) {
var jCreator = '',
jLocal = $('.crumbs:first a.nav', recent).wrapAll('<div></div>').parent().html(),
jPaging = $('.paging', recent)[0];
jThis.parents('.recentPost').append(
'<div class="small_links">' +
' <span class="creator_post">Carregando...</span>' +
' <span class="local">' + jLocal + '</span>' +
'</div>'
).find('a[href*="change_version"]').each(function() {
var jHref = $(this).attr('href').split('?')[0];
$(this).attr('href', jHref);
});
if(jPaging) {
jCreator = $('a:contains("1")', jPaging).attr('href');
jThis.parents('.recentPost').find('.creator_post').load(jCreator + ' .username:first', function() {
$(this).text($(this).text());
});
} else {
jCreator = $('.username:first', recent).text();
jThis.parents('.recentPost').find('.creator_post').text(jCreator);
}
},
error: function(err)
{
console.log("AJAX error in request (Last posts)");
}
});
});
});
});
Lincoln- *****
- Membro desde : 24/09/2011
Mensagens : 422
Pontos : 711
Re: Últimos assuntos com número de respostas e botão scroll
Uns meses atrás fiz um código que mostra os posts recentes de determinados fóruns pré-definidos pelo próprio usuário.
Ex:
Primeiro terá que adicionar um elemento em Visualização > Página inicial > Geral > Mensagem na página inicial > Conteúdo:
Feito isto, basta criar um novo JS com investimento no índice:
Pra escolher os fóruns que irão aparecer na box é simples... basta procurar o seguinte no código:
É necessário digitar o nome do fórum e o ID (sempre separando por vírgula, a n ser na última entrada).
E para escolher a quantidade de tópicos de cada fórum que irá ser exibido, basta procurar a variável qtd:
Dei essa sugestão ao FDF como um tutorial... talvez venha em breve, mas já estou lançando aí o código pra vocês!!!
Ex:
Primeiro terá que adicionar um elemento em Visualização > Página inicial > Geral > Mensagem na página inicial > Conteúdo:
- Código:
<div id="box_index"></div>
Feito isto, basta criar um novo JS com investimento no índice:
- Código:
$(document).ready(function() {
var box = $("#box_index");
box.html(
'<div class="news">' +
' <div class="ntab fw"></div>' +
' <div class="ncont por">' +
' <ul id="loaded_topics"></ul>' +
' </div>' +
'</div>' +
'<style>' +
'.news {' +
' margin-top: 16px;' +
' height: auto;' +
' max-height: 324px;' +
' background: #fcfcfc;' +
'}' +
'.ntab {' +
' border: 1px solid #cacaca;' +
' border-bottom-width: 1px;' +
' border-top-width: 3px;' +
' height: 46px;' +
' background: #f2f2f2;' +
'}' +
'.ntab .on {' +
' margin: -3px 0 0 -1px;' +
' border: 1px solid #cacaca;' +
' border-top: 3px solid #a3a3a3;' +
' border-bottom: 1px solid #fcfcfc;' +
' background: #fcfcfc;' +
'}' +
'.ntab a {' +
' display: inline-block;' +
' float: left;' +
' height: 20px;' +
' padding: 13px 0;' +
' line-height: 20px;' +
' text-align: center;' +
' cursor: pointer;' +
' font-size: 16px;' +
'}' +
'.ntab span {' +
' display: inline-block;' +
' width: 140px;' +
' text-align: center;' +
' border-right: 1px solid #cacaca;' +
'}' +
'.ntab .on span, .ntab .last span {' +
' border: 0;' +
'}' +
'.ncont {' +
' border: 1px solid #cacaca;' +
' border-top-width: 0;' +
'}' +
'.por {' +
' position: relative;' +
'}' +
'ul, ol {' +
' padding-left: 0 !important;' +
' list-style-type: none;' +
'}' +
'.ncont li {' +
' border-bottom: 1px dashed #e6e6e6;' +
' line-height: 30px;' +
'}' +
'.ncont li a {' +
' padding: 0 12px 0 28px;' +
' background: url(https://cdn3.iconfinder.com/data/icons/faticons/32/message-01-16.png) no-repeat 5px center;' +
' display: block;' +
'}' +
'.ncont li a:hover {' +
' background-color: #e9e9e9;' +
'}' +
'.ncont li span {' +
' float: right;' +
' color: #716e6e;' +
'}' +
'</style>'
);
var subForuns = {
"Novidades": "4",
"Tutoriais": "9"
};
$.each(subForuns, function(e, val) {
$(".ntab.fw", box).append("<a href='javascript:void(0);' class='tabIndex' attr-data='" + val + "'><span>" + e + "</span></a>");
}); // End each
var firstTab = $(".tabIndex:first", box); // Primeira tab
firstTab.addClass('on'); // Adicionar classe "on" na primeira tab
var id = firstTab.attr('attr-data'); // Pegar id do fórum na primeira tab
function load_topics() {
$.ajax({
type: "GET",
url: "/f" + id + "-",
beforeSend: function(objeto) {
$("#loaded_topics", box).html("<center><img src='http://imgur.com/oYkqPvl.gif' style='height:100px;' alt></center>");
},
success: function(data) {
$("#loaded_topics", box).html("");
var qtd = 7; //Quantidade de tópicos que irá aparecer
$("#main-content .table:last a.topictitle:lt(" + qtd + ")", data).each(function() {
var linkTopico =$(this).attr("href"),
nomeTopico = $(this).text(),
autor = $(this).closest("tr").find("td.tcl a[href^='/u']").text(),
qtdRespostas = $(this).closest("tr").find("td.tc2").text(),
qtdVisualizacoes = $(this).closest("tr").find("td.tc3").text(),
acv = "<span>por " + autor + " - Comentários: " + qtdRespostas + " - Visto: " + qtdVisualizacoes + "</span>";
if($(".blog_comments", data).length) {
acv = "<span>" + $(this).closest("tr").find(".blog_comments").text() + "</span>";
}
$("#loaded_topics", box).append("<li><a href='" + linkTopico + "' target='_blank'>" + acv + "" + nomeTopico + "</a></li>");
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
load_topics(); // Carregar função load_topics
$(".tabIndex").click(function(e) {
$('.on').removeClass('on'); // Remover classe on da tab
$(this).addClass('on'); // Adicionar classe on na tab clicada
id = $(this).attr('attr-data'); // Pegar id do fórum na tab clicada
load_topics(); // Carregar função load_topics
});
});
Pra escolher os fóruns que irão aparecer na box é simples... basta procurar o seguinte no código:
- Código:
var subForuns = {
"Novidades": "4",
"Tutoriais": "9"
};
É necessário digitar o nome do fórum e o ID (sempre separando por vírgula, a n ser na última entrada).
E para escolher a quantidade de tópicos de cada fórum que irá ser exibido, basta procurar a variável qtd:
- Código:
var qtd = 7; //Quantidade de tópicos que irá aparecer
Dei essa sugestão ao FDF como um tutorial... talvez venha em breve, mas já estou lançando aí o código pra vocês!!!
Re: Últimos assuntos com número de respostas e botão scroll
Perfeito Daemon, adorei! Parabéns por essa novidade!
Lincoln- *****
- Membro desde : 24/09/2011
Mensagens : 422
Pontos : 711
Re: Últimos assuntos com número de respostas e botão scroll
Apenas um adendo que o script passado tem o mesmo problema citado na mensagem anterior. Logo sugiro que não carregue um número muito grande de tópicos e, se possível, limite apenas à página inicial.
---
---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Tópicos semelhantes
» Scroll no widget de últimos assuntos
» Como eu coloco últimos assuntos no canto da tela mostrando os ultimos topicos ?
» Últimos assuntos não mostra os últimos assuntos
» scroll dos ultmos assuntos descontrolados e muito rapido
» Número de respostas personalizado
» Como eu coloco últimos assuntos no canto da tela mostrando os ultimos topicos ?
» Últimos assuntos não mostra os últimos assuntos
» scroll dos ultmos assuntos descontrolados e muito rapido
» Número de respostas personalizado
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos