Você não está conectado. Conecte-se ou registre-se

[Modificar] Código JS Membro do Mês

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [Modificar] Código JS Membro do Mês em Dom Ago 23, 2015 4:32 pm

Júnior Duarte

avatar
Membro elite


  • Descrição:

Fala galera, gostaria de fazer algumas modificações nesse código de membro do mês que possuo.

Código:
$(document).ready(function() {
    function makeArray() {
        for (i = 0; i < makeArray.arguments.length; i++) {
                this[i + 1] = makeArray.arguments[i];
        }
    }
 
    var months = new makeArray('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro');
    var date = new Date();
    var month = date.getMonth() + 1;
    var yy = date.getYear();
    var year = (yy < 1000) ? yy + 1900 : yy;
    var link = $('.module table[summary="Os membros mais ativos do mês"] td:eq(0) a').attr('href');
 
    $.get(link, function(d) {
        var nome = jQuery('#profile-advanced-right .module .main-head .h3:eq(0) strong', d).text();
        var avatar = jQuery('#profile-advanced-right .main-content.clearfix.center:eq(0) img', d).attr('src');
        var register = jQuery('#field_id-4 dd', d).text();
        var posts = jQuery('#field_id-6 dd', d).text();
        var pontos = jQuery('#field_id-13 dd', d).text();
        var rep_m = jQuery('#field_id-14 dd', d).text();
        var id = link.match(/\d+/g);
        var verify = jQuery('#profile-advanced-right .module .main-head .h3:eq(0) em', d).text();
      
        if( verify == '(conectado)' ) {
            status = 'online';
        }
        else {
            status = 'offline';
        }
 
        var p = $('.pun-crumbs')[0];
      
        $(p).after('<div class="main destaque" style="display: none;"><div class="main-head"> <div class="page-title" style="padding: 3px 6px 3px;"> <h2><img src="http://i.imgur.com/fHukYSL.png"/> Membro do Mês</h2> </div></div><div class="main-content"><table><tbody class="statused"> <tr><td width="105px" align="center" style="background-color: aliceBlue;padding: 3px;"> <img src="' + avatar + '" class="avatar_d" alt="' + avatar + '"/><br><br><span class="bs_badge" style="background:green;margin-bottom:3px;margin-top:3px;"><a href="/privmsg?mode=post&u=' + id + '">Envie um pm</a></span><br><span class="bs_badge" style="background:green;"><a href="/spa/' + nome + '">Posts</a></span> </td><td><div style="position:relative;left:-5px;padding:5px 0px 5px 15px;"> <div style="border-bottom:1px solid lightgrey;padding-bottom:3px;"> <h4><span style="font-size:1.3em;">' + nome + '</span> <span style="float:right;color:grey;font-size:10px;position:relative;" class="m_o_m"></span></h4> </div><span><p class="message_motm" style="padding-top:3px"></p><div style="padding:5px;float:right"><span class="bs_badge reset_cursor" id="m_post"></span><span class="bs_badge reset_cursor" id="m_rep"></span><span class="bs_badge bs_badge_lightgrey reset_cursor perf"><a href="' + link + '">ir para o perfil</a></span></div></span></div></td></tr></tbody></table></div></div>');
      
        if( link ) {
            $('.destaque').show();
        }
 
        $('p.message_motm').html('Parabéns ' + nome + ' nosso novo membro do mês - <strong>' + months[month] + ' - ' + year + '</strong>. Foi registrado nesse fórum em ' + register + '. Ele postou um total de ' + posts + ' posts. Ele tem o total de ' + pontos + ' pontos. Ele recebeu ' + rep_m + ' pontos de reputação. Agora ele está ' + status + '.');
        $('.m_o_m').html('Membro do Mês:  <span class="bs_badge" style="background:green;">' + months[month] + ' - ' + year + '</span>');
        $('#m_post').html('' + posts + ' posts');
        $('#m_rep').html('' + rep_m + ' Pontos de Reputação');
    });
});

Gostaria de mudar apenas a posição, ele atualmente aparece no topo do Fórum, gostaria que ele fosse modificado para o radapé, dou o exemplo nas imagens abaixo.

Onde ele está atualmente:



Onde quero que fique:



Gostaria também que a parte do título fosse arrumada, vejam:



A parte que fica o título ocupa muito espaço, gostaria que fosse diminuído de forma que combinasse com o restante do Fórum.

Como gostaria:



Conto com a ajuda de vocês amigos.

  • Informações:



Fórum:http://invitesexpress.omeuforum.net/Versão:PUNBB

Ver perfil do usuário

2 Re: [Modificar] Código JS Membro do Mês em Dom Ago 23, 2015 11:06 pm

Je4n

avatar
Membro ativo

Me envie o seu template index_box.



{WASD}
Ver perfil do usuário

3 Re: [Modificar] Código JS Membro do Mês em Dom Ago 23, 2015 11:09 pm

Júnior Duarte

avatar
Membro elite

Segue como solicitado.

Código:
    <div class="pun-crumbs">
      <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
    </div>
    <div class="main">
    <!-- BEGIN catrow -->
      <!-- BEGIN tablehead -->
          <div class="main-head">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
          </div>
          <div class="main-content">
            <table cellspacing="0" class="table">
                <thead>
                  <tr>
                      <th class="tcl">{L_FORUM}</th>
                      <th class="tc2">{L_TOPICS}</th>
                      <th class="tc3">{L_POSTS}</th>
                      <th class="tcr">{L_LASTPOST}</th>
                  </tr>
                </thead>
                <tbody class="statused">
      <!-- END tablehead -->
 
      <!-- BEGIN forumrow -->
                  <tr>
                      <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                        <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                        </span>
                        <h{catrow.forumrow.LEVEL} class="hierarchy" id="title-categoria"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                        <span id="categoria-des">
                        {catrow.forumrow.FORUM_DESC}
                        </span>
                        <!-- BEGIN switch_moderators_links -->
                        <br />
                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        <div class="subforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                      </td>
                      <td class="tc2"><span class="stats_number">{catrow.forumrow.TOPICS}</span><span class="stats_text">tópicos</span></td>
                      <td class="tc3"><span class="stats_number">{catrow.forumrow.POSTS}</span><span class="stats_text">respostas</span></td>
                      <td class="tcr">
                                <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->
 
                        <span>
                        <!-- BEGIN switch_topic_title -->
                        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                        <!-- END switch_topic_title -->
                        {catrow.forumrow.USER_LAST_POST}
                        </span>
                      </td>
                  </tr>
      <!-- END forumrow -->
 
      <!-- BEGIN tablefoot -->
                </tbody>
            </table>
          </div>
      <!-- END tablefoot -->
    <!-- END catrow -->
    </div>
 
    <!-- BEGIN switch_on_index -->
    <div class="main-box clearfix">
      <ul>
          <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
          <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
          <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
      </ul>
      <!-- BEGIN switch_delete_cookies -->
      <p class="right">
          <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </p>
      <!-- END switch_delete_cookies -->
    </div>
    <!-- END switch_on_index -->
<script>$(function () {
    $('.main-head:has(.page-title)').prepend('<style>.collapsee.tcatCollapse img{opacity:0} .collapsee.tcatCollapse img:hover{opacity:.9} .main .main-head.collapsede { opacity: .9!important;margin-bottom:5px }</style><a class="collapsee tcatCollapse" id="collapse_c_cat1" href="#top" style="float: right;margin-top: -3px;"><img src="http://i.imgur.com/d7jXnmJ.png" alt="" height="20px"></a>');
    $('.main-head a.collapsee[id]').click(function (e) {
        e.preventDefault()
    });
    $('.main-head a.collapsee[id]').attr('onclick', " if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/I5HCAxH.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsede')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/LBFBNlE.png'); $(this).closest('.main-head').addClass('collapsede');}");
    $(document).ready(function () {
        $('.main-head a.collapsee[id]').closest('.main-head').each(function () {
            if (my_getcookie($(this).find('.page-title').text() + '_ct') == '1') {
                $(this).next('.main-content:first').css('display', 'none');
                $(this).find('a.collapsee[id] img').attr('src', 'http://i.imgur.com/LBFBNlE.png');
                $(this).closest('.main-head').addClass('collapsede')
            } else {
                $(this).next('.main-content:first').css('display', 'block');
                $(this).find('a.collapsee[id] img').attr('src', 'http://i.imgur.com/I5HCAxH.png');
                $(this).closest('.main-head').removeClass('collapsede')
            }
        })
    })
});</script>

Ver perfil do usuário

4 Re: [Modificar] Código JS Membro do Mês em Dom Ago 23, 2015 11:13 pm

Je4n

avatar
Membro ativo

Adicione o template a seguir (index_box):
Código:
    <div class="pun-crumbs">
      <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
    </div>
    <div class="main">
    <!-- BEGIN catrow -->
      <!-- BEGIN tablehead -->
          <div class="main-head">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
          </div>
          <div class="main-content">
            <table cellspacing="0" class="table">
                <thead>
                  <tr>
                      <th class="tcl">{L_FORUM}</th>
                      <th class="tc2">{L_TOPICS}</th>
                      <th class="tc3">{L_POSTS}</th>
                      <th class="tcr">{L_LASTPOST}</th>
                  </tr>
                </thead>
                <tbody class="statused">
      <!-- END tablehead -->
 
      <!-- BEGIN forumrow -->
                  <tr>
                      <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                        <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                        </span>
                        <h{catrow.forumrow.LEVEL} class="hierarchy" id="title-categoria"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                        <span id="categoria-des">
                        {catrow.forumrow.FORUM_DESC}
                        </span>
                        <!-- BEGIN switch_moderators_links -->
                        <br />
                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        <div class="subforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                      </td>
                      <td class="tc2"><span class="stats_number">{catrow.forumrow.TOPICS}</span><span class="stats_text">tópicos</span></td>
                      <td class="tc3"><span class="stats_number">{catrow.forumrow.POSTS}</span><span class="stats_text">respostas</span></td>
                      <td class="tcr">
                                <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->
 
                        <span>
                        <!-- BEGIN switch_topic_title -->
                        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                        <!-- END switch_topic_title -->
                        {catrow.forumrow.USER_LAST_POST}
                        </span>
                      </td>
                  </tr>
      <!-- END forumrow -->
 
      <!-- BEGIN tablefoot -->
                </tbody>
            </table>
          </div>
      <!-- END tablefoot -->
    <!-- END catrow -->
    </div>
 <div class="membro_do_mes"></div>
    <!-- BEGIN switch_on_index -->
    <div class="main-box clearfix">
      <ul>
          <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
          <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
          <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
      </ul>
      <!-- BEGIN switch_delete_cookies -->
      <p class="right">
          <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </p>
      <!-- END switch_delete_cookies -->
    </div>
    <!-- END switch_on_index -->
<script>$(function () {
    $('.main-head:has(.page-title)').prepend('<style>.collapsee.tcatCollapse img{opacity:0} .collapsee.tcatCollapse img:hover{opacity:.9} .main .main-head.collapsede { opacity: .9!important;margin-bottom:5px }</style><a class="collapsee tcatCollapse" id="collapse_c_cat1" href="#top" style="float: right;margin-top: -3px;"><img src="http://i.imgur.com/d7jXnmJ.png" alt="" height="20px"></a>');
    $('.main-head a.collapsee[id]').click(function (e) {
        e.preventDefault()
    });
    $('.main-head a.collapsee[id]').attr('onclick', " if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/I5HCAxH.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsede')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/LBFBNlE.png'); $(this).closest('.main-head').addClass('collapsede');}");
    $(document).ready(function () {
        $('.main-head a.collapsee[id]').closest('.main-head').each(function () {
            if (my_getcookie($(this).find('.page-title').text() + '_ct') == '1') {
                $(this).next('.main-content:first').css('display', 'none');
                $(this).find('a.collapsee[id] img').attr('src', 'http://i.imgur.com/LBFBNlE.png');
                $(this).closest('.main-head').addClass('collapsede')
            } else {
                $(this).next('.main-content:first').css('display', 'block');
                $(this).find('a.collapsee[id] img').attr('src', 'http://i.imgur.com/I5HCAxH.png');
                $(this).closest('.main-head').removeClass('collapsede')
            }
        })
    })
});</script>

Agora troque seu atual script por esse:
Código:
$(document).ready(function() {
  function makeArray() {
      for (i = 0; i<makeArray.arguments.length; i++)
      this[i + 1] = makeArray.arguments[i];
  }
  var months = new makeArray('Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
  var date = new Date();
  var month = date.getMonth() + 1;
  var yy = date.getYear();
  var year = (yy < 1000) ? yy + 1900 : yy;
  var link = $('.module table[summary="Os membros mais ativos do mês"] td:eq(0) a').attr('href');
  $.get(link, function(d) {
  var nome = jQuery('#profile-advanced-right .module .main-head .h3:eq(0) strong', d).text(),
      avatar = jQuery('#profile-advanced-right .main-content.clearfix.center:eq(0) img', d).attr('src'),
      register = jQuery('#field_id-4 dd', d).text(),
      posts = jQuery('#field_id-6 dd', d).text(),
      pontos = jQuery('#field_id-13 dd', d).text(),
      rep_m = jQuery('#field_id-14 dd', d).text(),
      id = link.match(/\d+/g),
      verify = jQuery('#profile-advanced-right .module .main-head .h3:eq(0) em', d).text();
      if(verify == '(conectado)') {
          var status = 'online';
      } else {
          var status = 'offline';
      }
      var p = $('.membro_do_mes')[0];
      $(p).before(
      '<div class="main destaque" style="display: none;">' +
      '  <div class="main-head">' +
      '  <div class="page-title">' +
      '    <h2><img src="http://i.imgur.com/fHukYSL.png" style="height: 12px;">Membro do Mês</h2>' +
      '  </div>' +
      '  </div>' +
      '  <div class="main-content">' +
      '  <table>' +
      '  <tbody class="statused">' +
      '    <tr>' +
      '    <td width="105px" align="center" style="background-color: aliceBlue;padding: 3px;">' +
      '    `  <img src="'+avatar+'" class="avatar_d" alt="'+avatar+'" />' +
      '      <br /><br />' +
      '      <span class="bs_badge" style="background: green;margin-bottom: 3px;margin-top: 3px;">' +
      '        <a href="/privmsg?mode=post&u='+id+'">Envie um pm</a>' +
      '      </span>' +
      '      <br />' +
      '      <span class="bs_badge" style="background: green;">' +
      '          <a href="/spa/'+nome+'">Posts</a>' +
      '      </span>' +
      '    </td>' +
      '    <td>' +
      '      <div style="position: relative;left: -5px;padding: 5px 0px 5px 15px;">' +
      '      <div style="border-bottom: 1px solid lightgrey;padding-bottom: 3px;">' +
      '      <h4>' +
      '        <span style="font-size: 1.3em;">'+nome+'</span>' +
      '        <span style="float: right;color: grey;font-size: 10px;position: relative;" class="m_o_m"></span>' +
      '      </h4>' +
      '      </div>' +
      '      <span>' +
      '        <p class="message_motm" style="padding-top: 3px;"></p>' +
      '        <div style="padding: 5px;float: right;">' +
      '        <span class="bs_badge reset_cursor" id="m_post"></span>' +
      '        <span class="bs_badge reset_cursor" id="m_rep"></span>' +
      '        <span class="bs_badge bs_badge_lightgrey reset_cursor perf">' +
      '        <a href="'+link+'">ir para o perfil</a>' +
      '        </span>' +
      '        </div>' +
      '      </span>' +
      '      </div>' +
      '    </td>' +
      '    </tr>' +
      '  </tbody>' +
      '  </table>' +
      ' </div>' +
      '</div>'
      );
      if(link) {
          $('.destaque').show();
      }
$('p.message_motm').html('Parabéns '+nome+' nosso novo membro do mês - <strong>'+months[month]+' - '+year+'</strong>. Foi registrado nesse fórum em '+register+'. Ele postou um total de '+posts+' posts. Ele tem o total de '+pontos+' pontos. Ele recebeu '+rep_m+' pontos de reputação. Agora ele está '+status+'.');
$('.m_o_m').html('Membro do Mês:  <span class="bs_badge" style="background:green;">'+months[month]+' - '+year+'</span>');
$('#m_post').html(''+posts+' posts');
$('#m_rep').html(''+rep_m+' Pontos de Reputação');
});
});



{WASD}
Ver perfil do usuário

5 Re: [Modificar] Código JS Membro do Mês em Dom Ago 23, 2015 11:24 pm

Júnior Duarte

avatar
Membro elite

Ficou Show @Je4n obrigado mais uma vez pela ajuda. 

Precisando de algo que eu possa ajudar to aqui.

Ver perfil do usuário

6 Re: [Modificar] Código JS Membro do Mês em Seg Ago 24, 2015 6:17 am

MzS

avatar
Membro ativo

[alerta="Mensagem automática"][/alerta]



Este tópico foi movido de "JavaScript & jQuery" para "Arquivos".





Olá
Leia as regras.
Leia os termos de uso
Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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