Tópicos mais recentes em baixo do forum

[Kyou]

Detalhes da questão

Endereço do fórum: http://schoolflix.forumeiros.com
Versão do fórum: PunBB

Descrição

Queria uma box que mostrase os menssagens em topicos recentes, até mesmo os topicos mais recentes (ultimas atualizações do forum) a que vem padrão no widget é bem feinha e não tem como colocar no final da pagina queria algo como está
Imagem ilustrativa para meu pedido


quero coloca acima das Estatística

[Kyou]

Up

[Kyo Panda]

Acredito que o senhor esteja procurando este tutorial, mas trocando essa linha no código:

Código:

 .prependTo('#main-content') // Inserindo no main-content

Por:

Código:

 .insertBefore('#pun-info') // Inserindo no main-content

o/

---
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

[Kyou]

Ok 2 problemas

O widget de últimos assuntos ficou do lado do fórum e duplicado com o do meio obs:não há como mudar ele de local já que widgets do "fórum" só da pra colocar dos lados

E os ultimos assuntos não estão estáticos estão se movendo como padrão

[Daemon]

Leia a minha seguinte postagem: https://ajuda.forumeiros.com/t107984-ultimos-assuntos-com-numero-de-respostas-e-botao-scroll#756388

[Kyou]

Nossa daemon ficou melhor do que eu imaginava =3, mas não teria como puxar os ultimos assuntos de todo o fórum em vez de 1 fórum especifico
------------------------------

Na questão da aparência gostaria q as novidades ficassem empilhadas umas em cimas das outras envez de ficarem uma do lado das outras
e teria como remover essa box que fica como um background e alterar as cores?

[Daemon]

O código já está adaptado para que fiquem um abaixo do outro, como no exemplo da imagem que usei no meu post.
Provavelmente algum código CSS q vc adicionou entrou em conflito com a estrutura do elemento do box que deixou os tópicos na horizontal. Não tenho como ver o que causou isso agora pq estou pelo celular, mas amanhã eu resolvo esse problema aí.
Outra coisa é que no código você pode escolher os últimos assuntos de diversos fóruns pré-definidos, apenas colocando o ID do fórum e um nome para identificá-lo, pois desta forma torna um box de últimos assuntos mais organizado para os usuários.
O q poderia ser feito talvez seria diminuir o tamanho dos botões no topo do box, o q vc acha? Concorda?

[Kyou]

Eu gostei da proporção dos tamanhos de Novidades e Tutoriais, gostaria de remover a box de fundo pois queria q esse menu de novidades parece-se ligado com o layout do fórum; em outras palavras dentro do fórum como na imagem do seu tutorial

Essa box com o degrade de fundo, dá a impressão que é algo que não é do fórum, algo meio supérfluo sabe.

[Shek]

Olá e bom dia.

Localize no seu CSS esta imagem, e retire-na do código: https://i.servimg.com/u/f36/11/96/49/61/dropsh10.png

[Kyou]

Bom tiro o degrade, mas não a box de fundo

[Shek]

Tira do seu CSS estes códigos:

Código:

#pun-announcement {
    background-color: #fbfbfb;
    border-style: solid;
    border-width: 1px;
    padding: 1em;
}

#pun-announcement, #pun-visit, .main-box {
    -moz-border-radius: 5px;
    -moz-box-shadow: 0 2px 5px 0 #dcdcdc;
    background: #fff url() 0 -1px repeat-x;
    border: 1px solid #D6D6D6;
    border-image: initial;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 #dcdcdc;
}

[Kyou]

Bom no meu CSS só achei a 2° parte do código

Código:

#pun-announcement, #pun-visit, .main-box {
    -moz-border-radius: 5px;
    -moz-box-shadow: 0 2px 5px 0 #dcdcdc;
    background: #fff url() 0 -1px repeat-x;
    border: 1px solid #D6D6D6;
    border-image: initial;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 #dcdcdc;
}

e minha box ficou realmente rente ao fórum só que ainda ta lá com cores que dão um contraste estranho no fórum, poderia me passar a parte do código onde eu mudo as cores da box de fundo?

[Daemon]

Adicione em seu css:

Código:

#pun-announcement {background: transparent !important;border-width: 0 !important;}

No código jQuery q passei no post citado, procure por:

Código:

  '.ncont li {' +
  '  border-bottom: 1px dashed #e6e6e6;' +
  '  line-height: 30px;' +
  '}' +


Troque:

Código:

  '.ncont li {' +
  '  border-bottom: 1px dashed #e6e6e6;' +
  '  line-height: 30px;' +
  '  display: list-item;' +
  '}' +


[Kyou]

Perfeito =), vlw
só poderia me dizer como adicionar mas as novidades
por exemplo já tentei
"Novidades": "10","4",
"Novidades": "10, 4"
"Novidades": "10 4"
"Novidades": "10; 4"

[Daemon]

É simples... veja:

Código:

var subForuns = {
  "Novidades": "4",
  "Tutoriais": "9"
};

No exemplo abaixo foi criada uma variável que irá criar duas abas para dois fóruns diferentes... Novidades (f4) e Tutoriais (f9).
Para adicionar mais, basta fzr da seguinte forma:

Código:

var subForuns = {
  "Forum1": "1",
  "Forum2": "2",
  "Forum3": "3"
};

Você pode dar o nome que quiser na aba (De preferência o nome do próprio subforum).
Basta adicionar o nome do fórum e ao lado o ID. Repare que após a última entrada não existe a vírgula... mantenha assim sempre que adicionar outras.

[Kyou]

Ah, entendi então precisaria criar um novo assunto para cada fórum, no meu fórum tem um "fórum" de musicas e nela existe um bucado de subfóruns não teria como pegar o ID desse fórum (11) e nele mostrar todos as novidades dos subforuns, por que eu tentei colocar 11 mas fica branco na box de novidades

Grato

[Kyou]

Up

[Shek]

Olá!

Mas, como você tentou fazer isso? Poderia indicar a URL dos subfóruns, por gentileza?

[Kyou]

Claro.
Fórum: http://schoolflix.forumeiros.com/f11-musicas
Subfóruns: http://schoolflix.forumeiros.com/f10-rock
http://schoolflix.forumeiros.com/f14-pop
http://schoolflix.forumeiros.com/f15-eletronica
http://schoolflix.forumeiros.com/f17-gospel
http://schoolflix.forumeiros.com/f18-mpb
http://schoolflix.forumeiros.com/f16-reggae

[Kyou]

Up

[Kyou]

up

[Kyo Panda]

Olá,

O código dos 11 fóruns está aplicado no seu fórum?

[Kyou]

Não são 11 fóruns, o forum que contem os outros subforuns o ID dele seria 11

[Kyo Panda]

Não é possível colocar apenas o ID do fórum e pegar as novas mensagens dos subfóruns pelo meio que o script funciona. Por isso acreditei que estaria colocando o ID dos subfóruns também na configuração do script.

[Kyou]

É que se eu fosse colocar os IDs dos sub-forums no script, iria ficar com uma aba muito grande

[Kyo Panda]

Nós podemos até alterar o script para agrupar as abas, mas não será possível ordenar as mensagens dentro de cada aba pela sua data de postagem. Tudo bem?

[Kyou]

Pode ser.

[Kyo Panda]

Poderia nos passar o código aplicado no seu fórum, já com os IDs configurados?

[Kyou]

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;' +
  '  display: list-item;' +
  '}' +
  '.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 = {
  "SchoolFlix": "4",
  "Músicas": "10"
};
 
$.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
});
 
});

esse é o código atual só tem o id do fórum "MUSICAS" os id's dos subforuns seria

10 12 14 15 16 17 18 19

[Kyou]

Up

[Kyo Panda]

Tente esse:

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;' +
  '  display: list-item;' +
  '}' +
  '.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 = {
  "SchoolFlix": "4",
  "Músicas": [10, 12, 14, 15, 16, 17, 18, 19]
};
 
$.each(subForuns, function(e, val) {
      $(".ntab.fw", box).append("<a href='javascript:void(0);' class='tabIndex' attr-data='" + ($.isArray(val) ? val.join(',') : 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() {

   var ids = id.split(',');
   var $topics = $("#loaded_topics", box);
   
   $topics.html("<center><img src='http://imgur.com/oYkqPvl.gif' style='height:100px;' alt></center>");
   
   var list = [];
   var deferreds = [];
   var qtd = Math.max(ids.length, 7); // Quantidade de tópicos que irá aparecer
   var qtdTopic = Math.floor(qtd / ids.length); // Quantidade de tópicos por fórum
   
   $.each(ids, function(index, id) {
      deferreds.push($.ajax({
          type: "GET",
          url: "/f" + id + "-",
          success: function(data) {
             $("#main-content .table:last a.topictitle:lt(" + qtdTopic + ")", 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>";
                   }
   
                list.push("<li><a href='" + linkTopico + "' target='_blank'>" + acv + "" + nomeTopico + "</a></li>");
             });
          },
          error: function(jqXHR, textStatus, errorThrown) {
             console.log(textStatus, errorThrown);
          }
      }));
   }); 
   
   $.when.apply($, deferreds).then(function() {
      $topics.html('');
      
      $.each(list, function(index, elem) {
         $topics.append(elem);
      });
   });
}
 
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
});
 
});

[Kyou]

Sim funcionou só que só aparece 1 assunto por tópico.

[Kyo Panda]

Esse é o esperado:

Código:

  var qtd = Math.max(ids.length, 7); // Quantidade de tópicos que irá aparecer
  var qtdTopic = Math.floor(qtd / ids.length); // Quantidade de tópicos por fórum

Como você definiu o máximo de 7 tópicos para aparecer por aba, ele pegará 1 tópico por fórum definido na lista.

• Se o senhor definir para aparecer 10 tópicos por aba, e colocar 5 fóruns na aba, ele pegará 2 tópicos de cada fórum (2x5 = 10).
  
• Se o senhor definir para aparecer 5 tópicos por aba e colocar 8 fóruns na aba, ele pegará 1 tópico por aba (1x8 = 8), pois existem mais fóruns definidos do que tópicos por aba.

Se o senhor colocar tópicos nos outros fóruns, eles deverão aparecer.

[Kyou]

Entendi, vlw

[while]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".