Re: [SOLVED] Need code for statistics asa like as this forum

[Ange TuteurAdministrator]

Hi @Royal Bengal Tiger,

If you're interested in the coding behind this theme, I would suggest looking over the source code here :
https://github.com/SethClydesdale/forumactif-edge

The file which concerns the statistics is found here :
index_body : https://github.com/SethClydesdale/forumactif-edge/blob/master/templates/general/index_body.html
CSS : https://github.com/SethClydesdale/forumactif-edge/blob/master/css/fa_edge.css (LINE 1675)


Of course if you're interested you can always install Forumactif Edge to have all of it's features.
https://github.com/SethClydesdale/forumactif-edge/wiki/Installing

[Ange TuteurAdministrator]

I'm not sure what else to give you. I provided you with the files which create the who is online section on this forum.

In the following file the who is online section starts at line 43 and ends at line 136. You can take this section and replace it in your own index_body template.
https://github.com/SethClydesdale/forumactif-edge/blob/master/templates/general/index_body.html

After that you just need to get the necessary CSS and place it in your stylesheet.

[Ange TuteurAdministrator]

I did, did you not click on the links I gave you in the following post ?
https://fmdesign.forumotion.com/t833-need-code-for-statistics-asa-like-as-this-forum#16632

[Ange TuteurAdministrator]

Add this anywhere in your index_body template :

Code:

<!-- BEGIN disable_viewonline -->
<div id="who_is_online">

  <div id="wio_left">
    <div id="wio_activity" class="content-block">
      <!-- BEGIN switch_viewonline_link -->
       <div class="title"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
       <!-- END switch_viewonline_link -->

       <!-- BEGIN switch_viewonline_nolink -->
       <div class="title">{L_WHO_IS_ONLINE}</div>
       <!-- END switch_viewonline_nolink -->
      <div class="txt-content">
        <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
        {TOTAL_USERS_ONLINE}<br/>

        {LOGGED_IN_USER_LIST}

        {L_ONLINE_USERS}
        {L_CONNECTED_MEMBERS}<br />
        {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
      </div>
    </div>

    <div id="wio_group_legend" class="content-block">
      <div class="title">{LEGEND}</div>
      <div class="txt-content">
        <div id="wio_groups">{GROUP_LEGEND}</div>
      </div>
      <script type="text/javascript">if (window.wio_formatGroups) { wio_formatGroups(); }</script>
    </div>

  </div>

  <div id="wio_right">
    <div id="wio_statistics" class="content-block">
      <!-- BEGIN switch_statistics_link -->
       <div class="title"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
       <!-- END switch_statistics_link -->

       <!-- BEGIN switch_statistics_nolink -->
       <div class="title">{L_STATISTICS}</div>
       <!-- END switch_statistics_nolink -->

      <div class="txt-content">

        <div class="wio_row">
          <div id="wio_newest_user" class="wio_stats">
            <div id="wio_newest_inner">
              <div id="wio_new_avatar"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" /></div>
              <div class="wio_value">{NEWEST_USER}</div>
              <div id="wio_new_date"></div>
              <div class="clear"></div>
            </div>
          </div>
          <script type="text/javascript">if (window.wio_getNewAvatar) { wio_getNewAvatar(); }</script>

          <div id="wio_total_posts" class="wio_stats"><span class="wio_value">{TOTAL_POSTS}</span></div>
        </div>

        <div class="wio_row">
          <div id="wio_total_users" class="wio_stats"><span class="wio_value">{TOTAL_USERS}</span></div>
          <div id="wio_total_topics" class="wio_stats"><span class="wio_value"><strong>N/A</strong></span></div>
        </div>

        <div class="wio_row">
          <div id="wio_record_users" class="wio_stats"><span class="wio_value">{RECORD_USERS}</span></div>
          <div id="wio_board_age" class="wio_stats"><span class="wio_value"><strong>N/A</strong></span></div>
        </div>

      </div>
      <script type="text/javascript">if (window.wio_getStats) { wio_getStats(); }</script>
    </div>


    <!-- BEGIN switch_chatbox_activate -->
    <div id="wio_chatters" class="content-block">
      <div class="title"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
      <div class="txt-content">
         {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
         {CHATTERS_LIST}<br />
          <!-- BEGIN switch_chatbox_popup -->
          <div id="chatbox_popup"></div>
          <script type="text/javascript">
          insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
          </script>
          <!-- END switch_chatbox_popup -->
      </div>
    </div>
    <!-- END switch_chatbox_activate -->
  </div>
  <div class="clear"></div>
</div>
<!-- END disable_viewonline -->


Add this to your CSS stylesheet :

Code:

/* -- 18. WHO IS ONLINE -- */
#who_is_online .content-block { margin:12px 0; }
#wio_left .content-block { margin-right:6px; }

#wio_left {
  float:left;
  width:60%;
}

#wio_right {
  float:right;
  width:40%;
}

.wio_value { font-size:0; }
.wio_value strong {
  font-size:22px;
  line-height:32px;
}

.wio_stats {
  width:50%;
  min-height:65px;
  margin-bottom:5px;
  text-align:center;
  display:inline-block;
}

.wio_row.last .wio_stats { margin-bottom:0; }

.wio_stats:after {
  font-size:13px;
  line-height:20px;
  display:block;
}

#wio_total_posts:after { content:"Total Posts"; }
#wio_total_topics:after { content:"Total Topics"; }
#wio_total_users:after { content:"Total Members"; }
#wio_record_users:after { content:"Most Members Online"; }
#wio_board_age:after { content:"Forum Age (days)"; }
#wio_newest_inner:before {
  content:"Newest Member";
  font-size:14px;
  margin-top:8px;
  float:right;
  display:inline-block;
}
#wio_newest_inner .wio_value { margin-top:25px; }

#wio_newest_user { text-align:center; }
#wio_newest_inner {
  text-align:left;
  display:inline-block;
  white-space:nowrap;
}

#wio_newest_user strong {
  font-size:14px;
  line-height:20px;
}

#wio_new_avatar {
  float:left;
  margin-right:4px;
}

/* group legend */
#wio_groups { font-size:0; }
#wio_groups a {
  font-size:14px;
  font-weight:normal;
  border-radius:3px;
  display:inline-block;
  padding:3px 9px;
  margin:3px;
}

Add this to a new javascript with placement set to "in the homepage" :

Code:

/******************************
** ======= FUNCTIONS ======= **
*******************************
** 00. wio_formatGroups
** 01. wio_getStats
** 02. wio_applyStats
** 03. wio_getNewAvatar
******************************/


/* -- 00. wio_formatGroups -- */
// changes the formatting of the group legend
function wio_formatGroups() {
  var groups = document.getElementById('wio_groups');

  if (groups) {

    for (var a = groups.getElementsByTagName('A'), i = 0, j = a.length, rgb, color; i < j; i++) {
      color = a[i].style.color;
      rgb = color.replace(/rgb\(|\)|\s/g, '').split(',');

      a[i].style.backgroundColor = color;
      a[i].style.color = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) /1000) > 125 ? '#000' : '#FFF';
    }

  }
};


/* -- 01. wio_getStats -- */
// gets statistics via ajax
function wio_getStats() {
  var storage = window.localStorage,
      stats;

  if (storage && window.JSON) {
    if (storage.fa_wio_stats && storage.fa_wio_stats_exp > +new Date - 1*60*60*1000) {
      wio_applyStats(JSON.parse(storage.fa_wio_stats));
    } else {
      $.get('/popup_help.forum?l=miscvars', function(d) {
        var li = stats = {
          total_topics : $('li:contains({FORUMCOUNTOPIC})', d)[0],
          board_age : $('li:contains({FORUMAGE})', d)[0]
        },

        i;

        for (i in stats) {
          if (stats[i]) {
            stats[i] = '<strong>' + stats[i].innerHTML.replace(/.*?(\d+).*/, '$1') + '</strong>';
          }
        }

        wio_applyStats(stats);

        storage.fa_wio_stats = JSON.stringify(stats);
        storage.fa_wio_stats_exp = +new Date;
      });
    }

  }
};


/* -- 02. wio_applyStats -- */
// applies statistics
function wio_applyStats(stats) {
  var topics = document.getElementById('wio_total_topics'),
        age = document.getElementById('wio_board_age');

  if (topics) {
    topics.firstChild.innerHTML = stats.total_topics;
  }

  if (age) {
    age.firstChild.innerHTML = stats.board_age;
  }
}


/* -- 03. wio_getNewAvatar -- */
// gets the new avatar for the latest user
function wio_getNewAvatar() {
  var newMem = document.getElementById('wio_newest_user'),
      storage = window.localStorage,
      id;

  if (newMem) {
    id = newMem.getElementsByTagName('A')[0].href.replace(/.*?\/u(\d+).*/, '$1');

    if (storage && storage['fa_wio_newava' + id] && storage['fa_wio_newava' + id + '_exp'] > +new Date - 1*60*60*1000) {
      document.getElementById('wio_new_avatar').firstChild.src = storage['fa_wio_newava' + id];
    } else {
      $.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
        var avatar = $('.tooltip-content > img', d)[0];

        if (avatar) {
          document.getElementById('wio_new_avatar').firstChild.src = avatar.src;

          if (storage) {
            storage['fa_wio_newava' + id] = avatar.src;
            storage['fa_wio_newava' + id + '_exp'] = +new Date;
          }
        }
      });
    }

  }
};

[Ange TuteurAdministrator]

Post your index_body template here.

[Ange TuteurAdministrator]

Sure, go ahead.

[Ange TuteurAdministrator]

@Royal Bengal Tiger thanks

I've made the necessary corrections, let me know if that's to your liking.

[Ange TuteurAdministrator]

Edit the index_body template and replace {LEGEND} with whatever texts you want to change the legend title.

All you should need to do for your other forum is copy the index_body template, CSS, and JS on your current forum and transfer them to the other one.

[Ange TuteurAdministrator]

Thanks for the test account, I've made the necessary changes.

[Ange TuteurAdministrator]

Add this to your CSS whenever you get the chance :

Code:

@media (min-width:0px) and (max-width:768px) {
  #who_is_online > div > .content-block { margin:6px 0; }
  #who_is_online > div {
    float:none;
    width:100%;
  }
}

What you're seeing is the responsiveness on this theme. Forumactif Edge is mobile friendly, so it moves the content around when you're on mobile. See :

Desktop : https://i.servimg.com/u/f35/18/21/41/30/screen12.png
Mobile : https://i.servimg.com/u/f35/18/21/41/30/screen13.png

[Ange TuteurAdministrator]

You're welcome !

Topic archived

Have a good weekend.

[Sponsored content]