The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

List of members at the bottom of the page

2 posters

Go down

List of members at the bottom of the page Empty List of members at the bottom of the page

Post by Luiz~ June 30th 2017, 7:50 pm

Hi there,

This code will create a list of members that is updated via AJAX in the lower-left corner of the page.

Code:
/*globals jQuery, _userdata*/
/**
 *! Simple memberlist in bottom of the page.
 *
 *  @author Luiz~
 *  @licence MIT
 *
 *  Copyright (c) Luiz~ | All rights reserved.
 */
(function ($) {
  'use strict';

  var members = {

    config: {
      max_per_page: 20,
      only_members: false
    },

    text: {
      title: 'Memberlist',
      search_placeholder: 'Find a user...',
      next_text: 'Next',
      back_text: 'Back'
    },

    ajaxInit: function () {

      members.checkCount();
      members.counter = 0;

      $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          start: 0,
          username: ''
        },

        beforeSend: function () {
          members.template.find('.fa-user-list .append-user-list-zone')
            .html([
              '<span class="loading-status">',
              '  <i class="fa fa-spin fa-refresh"></i>',
              '</span>'
            ].join('\n'))
          ;
        }
      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.loading-status').remove();
          members.template.find('.member-user-row').remove();

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              members.extraValue = '';

              if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
                members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
              }
             
              if (members.template.find('#fa-display-user-type').val() === 'posts') {
                members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
              }

              if (members.template.find('#fa-display-user-type').val() === 'joined') {
                members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
              }
             
              members.create.new(avatar, member, members.extraValue, pmlink, isIn);
            }

          });

          return false;
        })
        .fail(function () {
          members.create.error('Error! :(');
        })
      ;
    },

    ajaxPrev: function () {

      members.checkCount('minus');

      $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          start: members.counter,
          username: ''
        },

        beforeSend: function () {
          members.template.find('.fa-user-list .append-user-list-zone')
            .html([
              '<span class="loading-status">',
              '  <i class="fa fa-spin fa-refresh"></i>',
              '</span>'
            ].join('\n'))
          ;
        }
      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.loading-status').remove();
          members.template.find('.member-user-row').remove();

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              members.extraValue = '';
             
              if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
                members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
              }
             
              if (members.template.find('#fa-display-user-type').val() === 'posts') {
                members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
              }

              if (members.template.find('#fa-display-user-type').val() === 'joined') {
                members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
              }
             
              members.create.new(avatar, member, members.extraValue, pmlink, isIn);
            }

          });

          return false;
        })
        .fail(function () {
          members.create.error('Houve um erro. <br /> Tente novamente!');
        })
      ;
    },

    ajaxNext: function () {

      members.checkCount('plus');

      $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          start: members.counter,
          username: ''
        },

        beforeSend: function () {
          members.template.find('.fa-user-list .append-user-list-zone')
            .html([
              '<span class="loading-status">',
              '  <i class="fa fa-spin fa-refresh"></i>',
              '</span>'
            ].join('\n'))
          ;
        }
      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.loading-status').remove();
          members.template.find('.member-user-row').remove();

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              members.extraValue = '';

              if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
                members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
              }
             
              if (members.template.find('#fa-display-user-type').val() === 'posts') {
                members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
              }

              if (members.template.find('#fa-display-user-type').val() === 'joined') {
                members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
              }
             
              members.create.new(avatar, member, members.extraValue, pmlink, isIn);
            }

          });

          return false;
        })
        .fail(function () {
          members.create.error('Error! :(');
        })
      ;
    },

    ajaxFind: function (username) {

      members.currentFind = $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          submit: 'Ok',
          username: username
        },

      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.finding-loading-status').remove();
          members.template.find('li.member-user-find').remove();

          if (!members.template.find('#fa-field-find-user').is(':focus')) {
            return false;
          }

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < 3 && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              if (members.template.find('#fa-field-find-user').val().length < 4) {

                members.template.find('.fa-search-error').remove();
               
                members.create.newFound($('<li>', {
                  class: 'member-user-find error-for-find fa-search-error',
                  html: '<i class="fa fa-ban"></i> You must enter at least 3 characters.'
                }).prop('outerHTML'));
                return;
              }

              if (!member) {
                members.create.newFound($('<li>', {
                  class: 'member-user-find error-for-find',
                  html: '<i class="fa fa-ban"></i> User does not exist.'
                }).prop('outerHTML'));
                return;
              }

              members.create.newFound($('<li>', {
                class: 'member-user-find member-user-find-' + isIn,
                html: [
                  $('<div>', { style: 'background-image: url(' + avatar + ')', 'class': 'fa-user-find-avatar' }).prop('outerHTML'),
                  $('<span>', { 'class': 'fa-username', html: member }).prop('outerHTML'),
                  $('<a>', { href: pmlink, 'class': 'fa-pmlink-find', html: '<i class="fa fa-envelope"></i>' }).prop('outerHTML')
                ].join('\n')
              }).prop('outerHTML'));
            }

          });

          return false;
        })
        .fail(function () {
          members.create.newFound($('<li>', {
            class: 'member-user-find error-for-find',
            html: 'Error :('
          }).prop('outerHTML'));
        })
      ;
    },

    checkCount: function (number) {
      if (members.counter === 0) {
        members.template.find('#fa-contact-prev-page')
          .addClass('disabled')
        ;
      } else {
        members.template.find('#fa-contact-prev-page')
          .removeClass('disabled')
        ;
      }

      if (number === 'plus') {

        members.template.find('#fa-contact-prev-page')
          .removeClass('disabled')
        ;

        members.counter = members.counter + 20;
        return;
      }

      if (number === 'minus' && members.counter !== 0) {

        if (members.counter === 0) {
          members.template.find('#fa-contact-prev-page')
            .addClass('disabled')
          ;
        }

        members.counter = members.counter - 20;
        return;
      }
    },

    create: {
      new: function (avatar, member, extraValue, pmlink, isIn) {
        members.template.find('.append-user-list-zone')
          .append([
            '<tr class="member-user-row member-user-' + isIn + '">',
            '  <td>',
            $('<img />', { src: avatar, 'class': 'fa-userlist-avatar' }).prop('outerHTML'),
            '  </td>',
            $('<td>', { 'class': 'fa-userlist-username', html: member }).prop('outerHTML'),
            $('<td>', { 'class': 'fa-userlist-extra-value', html: extraValue }).prop('outerHTML'),
            '  <td class="fa-userlist-pmwrapper">',
            $('<a>', { href: pmlink, html: '<i class="fa fa-envelope"></i>' }).prop('outerHTML'),
            '  </td>',
            '</tr>'
          ].join('\n'))
        ;
      },

      newFound: function (member) {
        members.template.find('.fa-members-find ul')
          .append(member)
        ;
      },

      error: function (log) {
        members.template.find('.fa-user-list .append-user-list-zone')
          .html('<span class="log log-error loading-status">' + log + '</span>')
        ;
      }
    },

    counter: 0,

    extraValue: ''

  };

  $(function () {

    if (_userdata["session_logged_in"] === 0 && members.config.only_members) {
      return false;
    }

    members.template = $([
      '<div class="fa-memberlist-wrapper">',
      '  <div class="fa-memberlist-toggler">',
      '    <a href="javascript:void(0)" title="Open the userlist.">',
      '      <i class="fa fa-users"></i>',
      '    </a>',
      '  </div>',
      '  <div class="fa-memberlist-inner">',
      '    <header>',
      '      <h4>' + members.text.title + '</h4>',
      '      <form id="fa-find-user">',
      '        <input id="fa-field-find-user" autocomplete="off" type="search" placeholder="' + members.text.search_placeholder + '" />',
      '        <div class="fa-members-find" style="display: none;">',
      '          <ul>',
      '            <span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a user nickname...</span>',
      '          </ul>',
      '          <span class="fa fa-times" id="close-find-wrapper"></span>',
      '        </div>',
      '        <div class="fa-select-form-group">',
      '          <label for="fa-display-user-type">Display by:</label>',
      '          <select id="fa-display-user-type">',
      '            <option value="lastvisit" selected="selected">Last visit</option>',
      '            <option value="joined">Register date</option>',
      '            <option value="username">Username</option>',
      '            <option value="posts">Messages</option>',
      '          </select>',
      '        </div>',
      '        <div class="fa-select-form-group">',
      '          <label for="fa-order-user-type">Order:</label>',
      '          <select id="fa-order-user-type">',
      '            <option value="">Growing</option>',
      '            <option value="DESC" selected="selected">Decreasing</option>',
      '          </select>',
      '        </div>',
      '      </form>',
      '    </header>',
      '    <div class="fa-user-list">',
      '      <table class="fa-userlist-table">',
      '        <tbody class="append-user-list-zone">',
      '        </tbody>',
      '      </table>',
      '    </div>',
      '    <footer>',
      '      <a id="fa-contact-next-page">' + members.text.next_text + '</a>',
      '      <a id="fa-contact-prev-page" class="disabled">' + members.text.back_text + '</a>',
      '    </footer>',
      '  </div>',
      '</div>'
    ].join('\n'))
      .appendTo('body')
    ;

    members.template.find('.fa-memberlist-toggler')
      .on('click', function () {

        members.counter = 0;
        var $this = $(this);

        $this.toggleClass('next-is-visible');

        if ($this.is('.next-is-visible')) {
          console.log('Rodando ajax primário...');
          members.ajaxInit();
        }

        $this
          .next()
            .toggle()
        ;

        return false;
      })
    ;
   
    members.template.find('#fa-contact-prev-page')
      .on('click', function () {

        if (members.counter >= 20) {
          console.log('Rodando ajax de página anterior...');
          members.ajaxPrev();
        }

        members.checkCount();

        return false;
      })
    ;
   
    members.template.find('#fa-contact-next-page')
      .on('click', function () {

        console.log('Rodando ajax de próxima página...');
        members.ajaxNext();

        return false;
      })
    ;

    members.template.find('#fa-field-find-user')
      .on({

        focus: function () {
          members.template.find('.fa-members-find ul li').remove();

          members.template.find('.fa-members-find ul')
            .html('<span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a user nickname...</span>')
          ;
        },

        keyup: function () {

          if (members.currentFind) {
            members.currentFind.abort();
          }

          if (members.template.find('#fa-field-find-user').val().length === 0) {
            members.template.find('.fa-members-find ul')
              .html('<span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a user nickname...</span>')
            ;
          }

          if ($(this).val().length >= 3) {
            members.template.find('.fa-members-find ul')
              .html([
                '<li class="finding-loading-status">',
                '  <i class="fa fa-spin fa-refresh"></i>',
                '  <span class="sr-only">Loading...</span>',
                '</li>'
              ].join('\n'))
            ;

            members.ajaxFind($(this).val());
           
          } else {
            members.template.find('.fa-members-find ul')
              .html('<span class="finding-loading-status fa-search-error"><i class="fa fa-ban"></i> You must enter at least 3 characters.</span>')
            ;

            return false;
          }
        }
      })
    ;

    members.template.find('#close-find-wrapper')
      .on('click', function () {
        members.template.find('.fa-members-find ul').hide();
        members.template.find('.fa-members-find ul li').remove();
        members.template.find('#fa-field-find-user').val('');
      })
    ;

    members.template.find('form')
      .on('submit', function (event) {
        event.preventDefault();
      })
    ;

    members.template.find('#fa-display-user-type, #fa-order-user-type')
      .on('change', function () {
        members.ajaxInit();

        return false;
      })
    ;

    members.template.on('click', function (event) {
      event.stopPropagation();
    });

    $(document).on('click', function () {
      members.template.find('.fa-memberlist-inner')
        .hide()
      ;
    });

    members.style = [
      '.fa-members-find .fa-user-find-avatar {',
      '  display: inline-block;',
      '  width: 30px;',
      '  height: 30px;',
      '  background-size: 20px;',
      '  background-position: center center;',
      '  background-repeat: no-repeat;',
      '  vertical-align: middle;',
      '  border-radius: 100px;',
      '  border: solid 1px #fff;',
      '  background-color: #fff;',
      '  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.39);',
      '}',
      '',
      '.fa-members-find ul li {',
      '  margin-bottom: 5px;',
      '  display: block;',
      '  position: relative;',
      '}',
      '',
      '.fa-members-find .fa-pmlink-find {',
      '  position: absolute;',
      '  top: 50%;',
      '  right: 20px;',
      '  color: #39c;',
      '  font-size: 15px;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      '.fa-members-find .fa-pmlink-find:hover {',
      '  color: #444;',
      '}',
      '',
      '.fa-memberlist-inner a {',
      '  cursor: pointer;',
      '}',
      '',
      '.fa-members-find {',
      '  display: block;',
      '  background-color: #cde6f3;',
      '  position: absolute;',
      '  left: 15px;',
      '  right: 15px;',
      '  padding: 15px;',
      '  color: #555;',
      '  box-shadow: 0 0 4px 0px #c5deea;',
      '  font-size: 11px;',
      '}',
      '',
      '.loading-status {',
      '  font-size: 24px;',
      '  padding: 15px 0px;',
      '  text-align: center;',
      '  display: block;',
      '}',
      '',
      '.fa-userlist-username img,',
      '.member-user-find img {',
      '  display: none;',
      '}',
      '',
      '.fa-memberlist-wrapper {',
      '  position: fixed;',
      '  bottom: 0px;',
      '  left: 0px;',
      '  z-index: 99999;',
      '}',
      '',
      'td.fa-userlist-extra-value {',
      '  position: absolute;',
      '  top: 50%;',
      '  right: 30px;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      '.fa-memberlist-inner {',
      '  position: absolute;',
      '  display: none;',
      '}',
      '',
      '.fa-memberlist-toggler {',
      '  width: 45px;',
      '  height: 45px;',
      '  box-sizing: border-box;',
      '  background-color: #39c;',
      '  position: relative;',
      '  border-radius: 0 5px 0 0;',
      '  transition: all 200ms;',
      '}',
      '',
      '.fa-memberlist-toggler:hover {',
      '  background-color: #2e3133;',
      '}',
      '',
      '.fa-memberlist-toggler i.fa {',
      '  position: absolute;',
      '  font-size: 25px;',
      '  top: 50%;',
      '  left: 47%;',
      '  color: #fff;',
      '  -moz-transform: translate(-50%, -50%);',
      '  -ms-transform: translate(-50%, -50%);',
      '  -webkit-transform: translate(-50%, -50%);',
      '  -o-transform: translate(-50%, -50%);',
      '  transform: translate(-50%, -50%);',
      '}',
      '',
      '.fa-memberlist-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-memberlist-inner {',
      '  position: absolute;',
      '  z-index: 99999999;',
      '  bottom: 45px;',
      '  background-color: #fff;',
      '  width: 350px;',
      '  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);',
      '  border: solid 1px #ddd;',
      '  border-left: solid 0px;',
      '}',
      '',
      '.fa-memberlist-inner header h4 {',
      '  color: #fff;',
      '  background-color: #39c;',
      '  padding: 10px 15px;',
      '  font-family: "Trebuchet MS", Arial, sans-serif;',
      '  text-transform: uppercase;',
      '  border: none;',
      '  margin: 0;',
      '  font-size: 18px;',
      '  font-weight: normal;',
      '}',
      '',
      '.fa-memberlist-inner header form {',
      '  padding: 15px 15px 0 15px;',
      '  position: relative;',
      '  width: 100%;',
      '  display: block;',
      '}',
      '',
      '.fa-memberlist-inner header form input,',
      '.fa-memberlist-inner header form select {',
      '  width: 100%;',
      '  border: solid 1px #cecece;',
      '  padding: 7px;',
      '  font-size: 13px;',
      '  border-radius: 3px;',
      '  display: block;',
      '  padding-left: 31px;',
      '  color: #555;',
      '  background-image: url(https://forumeiros.github.io/assets/src/svg/find.svg);',
      '  background-repeat: no-repeat;',
      '  background-size: 16px;',
      '  background-position: 8px center;',
      '  transition: all 200ms;',
      '}',
      '',
      '.fa-memberlist-inner header form select {',
      '  padding-left: 7px;',
      '  background: none;',
      '}',
      '',
      '.fa-memberlist-inner header form label {',
      '  display: block;',
      '  margin-bottom: 6px;',
      '  margin-top: 13px;',
      '  font-size: 11px;',
      '}',
      '',
      '.fa-memberlist-inner header form input::placeholder {',
      '  color: #555;',
      '}',
      '',
      '.fa-memberlist-inner header form input:focus {',
      '  border-color: #39c;',
      '  outline: none;',
      '  box-shadow: inset 0 0 1px 0px #3399cc, 0 0 1px 1px #3399cc;',
      '}',
      '',
      '.fa-memberlist-inner .fa-user-list {',
      '  padding: 15px;',
      '}',
      '',
      '.fa-memberlist-inner footer {',
      '  background-color: #ddd;',
      '  padding: 10px 15px;',
      '}',
      '',
      '.fa-memberlist-inner footer a {',
      '  font-size: 12px;',
      '  border-bottom: solid 1px transparent;',
      '  color: #39c;',
      '}',
      '',
      '.fa-memberlist-inner footer a:hover {',
      '  border-bottom-color: #39c;',
      '}',
      '',
      'a#fa-contact-next-page {',
      '  float: right;',
      '}',
      '',
      '.disabled {',
      '  opacity: .9;',
      '  filter: blur(.5px);',
      '  cursor: not-allowed !important;',
      '}',
      '',
      '.disabled:hover {',
      '  border-bottom-color: transparent!important;',
      '}',
      '',
      '.fa-user-list {',
      '  max-height: 80vh;',
      '  max-height: -moz-calc(100vh - 355px);',
      '  max-height: -webkit-calc(100vh - 355px);',
      '  max-height: -ms-calc(100vh - 355px);',
      '  max-height: -o-calc(100vh - 355px);',
      '  max-height: calc(100vh - 355px);',
      '  overflow-y: scroll;',
      '  margin-top: 15px;',
      '  border-top: solid 1px #ddd;',
      '}',
      '',
      '.fa-user-list table {',
      '  width: 100%;',
      '  border-collapse: collapse;',
      '}',
      '',
      'tr.member-user-row {',
      '  display: block;',
      '  margin-bottom: 15px;',
      '  position: relative;',
      '}',
      '',
      'tr.member-user-row:last-child {',
      '  margin-bottom: 0px;',
      '}',
      '',
      'tr.member-user-row td img.fa-userlist-avatar {',
      '  width: 25px;',
      '  margin-right: 3px;',
      '  height: 25px;',
      '  border: solid 1px #989898;',
      '  border-radius: 5px;',
      '  box-shadow: 0 0 1px black;',
      '}',
      '',
      'td.fa-userlist-pmwrapper {',
      '  position: absolute;',
      '  top: 50%;',
      '  right: 2px;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      'td.fa-userlist-pmwrapper i {',
      '  color: #39c;',
      '  font-size: 15px;',
      '}',
      '',
      'td.fa-userlist-pmwrapper i:hover {',
      '  color: #444;',
      '}',
      '',
      'input#fa-field-find-user:focus + div.fa-members-find,',
      'div.fa-members-find:hover {',
      '  display: block!important;',
      '}',
      '',
      'span#close-find-wrapper {',
      '  position: absolute;',
      '  right: 15px;',
      '  top: 50%;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '  cursor: pointer;',
      '}',
      '',
      'span#close-find-wrapper:hover {',
      '  color: #39c;',
      '}'
    ].join('\n');

    $('<style>', {
      type: 'text/css',
      text: members.style
    }).appendTo('head');
  });
}(jQuery));

Placement: In all pages.
Title: As you wish.

Result (gif): https://i.imgur.com/rfuqUqR.gif

o/
Luiz~
Luiz~
New Member

Male Posts : 17
Reputation : 9
Language : PT
Location : Brazil

http://ajuda.forumeiros.com/

Back to top Go down

List of members at the bottom of the page Empty Re: List of members at the bottom of the page

Post by SLGray June 30th 2017, 8:22 pm

On my ModernBB forum, The box image does not have the white image.


List of members at the bottom of the page Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51515
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

List of members at the bottom of the page Empty Re: List of members at the bottom of the page

Post by Luiz~ July 7th 2017, 10:24 pm

Hi,

@SLGray, that image is a FontAwesome icon. To work, you must install this font package in your forum.

Anyway, I updated the code, because there was a small mistake.
PS: Installing the font is still required!

New code:
Code:
/*globals jQuery, _userdata*/
/**
 *! Simple memberlist in bottom of the page.
 *
 *  @author Luiz
 *  @licence MIT
 *
 *  Copyright (c) Luiz Felipe | All rights reserved.
 */
(function ($) {
  'use strict';

  var members = {

    config: {
      max_per_page: 20,
      only_members: false
    },

    text: {
      title: 'Memberlist',
      search_placeholder: 'Find a user...',
      next_text: 'Next',
      back_text: 'Back'
    },

    ajaxInit: function () {

      members.checkCount();
      members.counter = 0;

      $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          start: 0,
          username: ''
        },

        beforeSend: function () {
          members.template.find('.fa-user-list .append-user-list-zone')
            .html([
              '<span class="loading-status">',
              '  <i class="fa fa-spin fa-refresh"></i>',
              '</span>'
            ].join('\n'))
          ;
        }
      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.loading-status').remove();
          members.template.find('.member-user-row').remove();

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              members.extraValue = '';

              if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
                members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
              }
             
              if (members.template.find('#fa-display-user-type').val() === 'posts') {
                members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
              }

              if (members.template.find('#fa-display-user-type').val() === 'joined') {
                members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
              }
             
              members.create.new(avatar, member, members.extraValue, pmlink, isIn);
            }

          });

          return false;
        })
        .fail(function () {
          members.create.error('Error!');
        })
      ;
    },

    ajaxPrev: function () {

      members.checkCount('minus');

      $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          start: members.counter,
          username: ''
        },

        beforeSend: function () {
          members.template.find('.fa-user-list .append-user-list-zone')
            .html([
              '<span class="loading-status">',
              '  <i class="fa fa-spin fa-refresh"></i>',
              '</span>'
            ].join('\n'))
          ;
        }
      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.loading-status').remove();
          members.template.find('.member-user-row').remove();

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              members.extraValue = '';
             
              if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
                members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
              }
             
              if (members.template.find('#fa-display-user-type').val() === 'posts') {
                members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
              }

              if (members.template.find('#fa-display-user-type').val() === 'joined') {
                members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
              }
             
              members.create.new(avatar, member, members.extraValue, pmlink, isIn);
            }

          });

          return false;
        })
        .fail(function () {
          members.create.error('Error! Try again later.');
        })
      ;
    },

    ajaxNext: function () {

      members.checkCount('plus');

      $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          start: members.counter,
          username: ''
        },

        beforeSend: function () {
          members.template.find('.fa-user-list .append-user-list-zone')
            .html([
              '<span class="loading-status">',
              '  <i class="fa fa-spin fa-refresh"></i>',
              '</span>'
            ].join('\n'))
          ;
        }
      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.loading-status').remove();
          members.template.find('.member-user-row').remove();

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              members.extraValue = '';

              if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
                members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
              }
             
              if (members.template.find('#fa-display-user-type').val() === 'posts') {
                members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
              }

              if (members.template.find('#fa-display-user-type').val() === 'joined') {
                members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
              }
             
              members.create.new(avatar, member, members.extraValue, pmlink, isIn);
            }

          });

          return false;
        })
        .fail(function () {
          members.create.error('Error! Try again later.');
        })
      ;
    },

    ajaxFind: function (username) {

      members.currentFind = $.ajax({
        url: '/memberlist',
        method: 'GET',

        data: {
          mode: members.template.find('#fa-display-user-type').val(),
          order: members.template.find('#fa-order-user-type').val(),
          submit: 'Ok',
          username: username
        },

      })
        .done(function (context) {

          context = context.replace(/src=/gi, 'data-src=');

          var $table = $('#memberlist', context);
          var $row = $table.find('tbody tr');

          members.template.find('.finding-loading-status').remove();
          members.template.find('li.member-user-find').remove();

          if (!members.template.find('#fa-field-find-user').is(':focus')) {
            return false;
          }

          $row.each(function () {

            var $this = $(this);
            var isIn = $this.index();

            if (isIn < 3 && members.template.css('display') === 'block') {
              var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
              var member = $this.find('td').eq(1).html();
              var pmlink = $this.find('td').eq(6).find('a').attr('href');

              if (members.template.find('#fa-field-find-user').val().length < 4) {

                members.template.find('.fa-search-error').remove();
               
                members.create.newFound($('<li>', {
                  class: 'member-user-find error-for-find fa-search-error',
                  html: '<i class="fa fa-ban"></i> You must enter at least 3 characters.'
                }).prop('outerHTML'));
                return;
              }

              if (!member) {
                members.create.newFound($('<li>', {
                  class: 'member-user-find error-for-find',
                  html: '<i class="fa fa-ban"></i> User does not exists!'
                }).prop('outerHTML'));
                return;
              }

              members.create.newFound($('<li>', {
                class: 'member-user-find member-user-find-' + isIn,
                html: [
                  $('<div>', { style: 'background-image: url(' + avatar + ')', 'class': 'fa-user-find-avatar' }).prop('outerHTML'),
                  $('<span>', { 'class': 'fa-username', html: member }).prop('outerHTML'),
                  $('<a>', { href: pmlink, 'class': 'fa-pmlink-find', html: '<i class="fa fa-envelope"></i>' }).prop('outerHTML')
                ].join('\n')
              }).prop('outerHTML'));
            }

          });

          return false;
        })
        .fail(function () {
          members.create.newFound($('<li>', {
            class: 'member-user-find error-for-find',
            html: 'Error! [AJAX ERROR]'
          }).prop('outerHTML'));
        })
      ;
    },

    checkCount: function (number) {
      if (members.counter === 0) {
        members.template.find('#fa-contact-prev-page')
          .addClass('disabled')
        ;
      } else {
        members.template.find('#fa-contact-prev-page')
          .removeClass('disabled')
        ;
      }

      if (number === 'plus') {

        members.template.find('#fa-contact-prev-page')
          .removeClass('disabled')
        ;

        members.counter = members.counter + 20;
        return;
      }

      if (number === 'minus' && members.counter !== 0) {

        if (members.counter === 0) {
          members.template.find('#fa-contact-prev-page')
            .addClass('disabled')
          ;
        }

        members.counter = members.counter - 20;
        return;
      }
    },

    create: {
      new: function (avatar, member, extraValue, pmlink, isIn) {
        members.template.find('.append-user-list-zone')
          .append([
            '<tr class="member-user-row member-user-' + isIn + '">',
            '  <td>',
            $('<img />', { src: avatar, 'class': 'fa-userlist-avatar' }).prop('outerHTML'),
            '  </td>',
            $('<td>', { 'class': 'fa-userlist-username', html: member }).prop('outerHTML'),
            $('<td>', { 'class': 'fa-userlist-extra-value', html: extraValue }).prop('outerHTML'),
            '  <td class="fa-userlist-pmwrapper">',
            $('<a>', { href: pmlink, html: '<i class="fa fa-envelope"></i>' }).prop('outerHTML'),
            '  </td>',
            '</tr>'
          ].join('\n'))
        ;
      },

      newFound: function (member) {
        members.template.find('.fa-members-find ul')
          .append(member)
        ;
      },

      error: function (log) {
        members.template.find('.fa-user-list .append-user-list-zone')
          .html('<span class="log log-error loading-status">' + log + '</span>')
        ;
      }
    },

    counter: 0,

    extraValue: ''

  };

  $(function () {

    if (_userdata["session_logged_in"] === 0 && members.config.only_members) {
      return false;
    }

    members.template = $([
      '<div class="fa-memberlist-wrapper">',
      '  <div class="fa-memberlist-toggler">',
      '    <a href="javascript:void(0)" title="Open the userlist.">',
      '      <i class="fa fa-users"></i>',
      '    </a>',
      '  </div>',
      '  <div class="fa-memberlist-inner">',
      '    <header>',
      '      <h4>' + members.text.title + '</h4>',
      '      <form id="fa-find-user">',
      '        <input id="fa-field-find-user" autocomplete="off" type="search" placeholder="' + members.text.search_placeholder + '" />',
      '        <div class="fa-members-find" style="display: none;">',
      '          <ul>',
      '            <span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a user nickname...</span>',
      '          </ul>',
      '          <span class="fa fa-times" id="close-find-wrapper"></span>',
      '        </div>',
      '        <div class="fa-select-form-group">',
      '          <label for="fa-display-user-type">Display by:</label>',
      '          <select id="fa-display-user-type">',
      '            <option value="lastvisit" selected="selected">Last visit</option>',
      '            <option value="joined">Register date</option>',
      '            <option value="username">Username</option>',
      '            <option value="posts">Messages</option>',
      '          </select>',
      '        </div>',
      '        <div class="fa-select-form-group">',
      '          <label for="fa-order-user-type">Order:</label>',
      '          <select id="fa-order-user-type">',
      '            <option value="">Growing</option>',
      '            <option value="DESC" selected="selected">Decreasing</option>',
      '          </select>',
      '        </div>',
      '      </form>',
      '    </header>',
      '    <div class="fa-user-list">',
      '      <table class="fa-userlist-table">',
      '        <tbody class="append-user-list-zone">',
      '        </tbody>',
      '      </table>',
      '    </div>',
      '    <footer>',
      '      <a id="fa-contact-next-page">' + members.text.next_text + '</a>',
      '      <a id="fa-contact-prev-page" class="disabled">' + members.text.back_text + '</a>',
      '    </footer>',
      '  </div>',
      '</div>'
    ].join('\n'))
      .appendTo('body')
    ;

    members.template.find('.fa-memberlist-toggler')
      .on('click', function () {

        members.counter = 0;
        var $this = $(this);

        $this.toggleClass('next-is-visible');

        if ($this.is('.next-is-visible')) {
          console.log('Rodando ajax primário...');
          members.ajaxInit();
        }

        $this
          .next()
            .toggle()
        ;

        return false;
      })
    ;

    members.template.find('#fa-contact-prev-page')
      .on('click', function () {

        if (members.counter >= 20) {
          console.log('Rodando ajax de página anterior...');
          members.ajaxPrev();
        }

        members.checkCount();

        return false;
      })
    ;

    members.template.find('#fa-contact-next-page')
      .on('click', function () {

        console.log('Rodando ajax de próxima página...');
        members.ajaxNext();

        return false;
      })
    ;

    members.template.find('#fa-field-find-user')
      .on({

        focus: function () {
          members.template.find('.fa-members-find ul li').remove();

          members.template.find('.fa-members-find ul')
            .html('<span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a username...</span>')
          ;
        },

        keyup: function () {

          if (members.currentFind) {
            members.currentFind.abort();
          }

          if (members.template.find('#fa-field-find-user').val().length === 0) {
            members.template.find('.fa-members-find ul')
              .html('<span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a username...</span>')
            ;
          }

          if ($(this).val().length >= 3) {
            members.template.find('.fa-members-find ul')
              .html([
                '<li class="finding-loading-status">',
                '  <i class="fa fa-spin fa-refresh"></i>',
                '  <span class="sr-only">Loading...</span>',
                '</li>'
              ].join('\n'))
            ;

            members.ajaxFind($(this).val());
           
          } else {
            members.template.find('.fa-members-find ul')
              .html('<span class="finding-loading-status fa-search-error"><i class="fa fa-ban"></i> You must enter at least 3 characters.</span>')
            ;

            return false;
          }
        }
      })
    ;

    members.template.find('#close-find-wrapper')
      .on('click', function () {
        members.template.find('.fa-members-find ul').hide();
        members.template.find('.fa-members-find ul li').remove();
        members.template.find('#fa-field-find-user').val('');
      })
    ;

    members.template.find('form')
      .on('submit', function (event) {
        event.preventDefault();
      })
    ;

    members.template.find('#fa-display-user-type, #fa-order-user-type')
      .on('change', function () {
        members.ajaxInit();

        return false;
      })
    ;

    members.template.on('click', function (event) {
      event.stopPropagation();
    });

    $(document).on('click', function () {
      members.template.find('.fa-memberlist-inner')
        .hide()
      ;
    });

    members.style = [
      '.fa-members-find .fa-user-find-avatar {',
      '  display: inline-block;',
      '  width: 30px;',
      '  height: 30px;',
      '  background-size: 20px;',
      '  background-position: center center;',
      '  background-repeat: no-repeat;',
      '  vertical-align: middle;',
      '  border-radius: 100px;',
      '  border: solid 1px #fff;',
      '  background-color: #fff;',
      '  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.39);',
      '}',
      '',
      '.fa-members-find ul li {',
      '  margin-bottom: 5px;',
      '  display: block;',
      '  position: relative;',
      '}',
      '',
      '.fa-members-find .fa-pmlink-find {',
      '  position: absolute;',
      '  top: 50%;',
      '  right: 20px;',
      '  color: #39c;',
      '  font-size: 15px;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      '.fa-members-find .fa-pmlink-find:hover {',
      '  color: #444;',
      '}',
      '',
      '.fa-memberlist-inner a {',
      '  cursor: pointer;',
      '}',
      '',
      '.fa-members-find {',
      '  display: block;',
      '  background-color: #cde6f3;',
      '  position: absolute;',
      '  left: 15px;',
      '  right: 15px;',
      '  padding: 15px;',
      '  color: #555;',
      '  box-shadow: 0 0 4px 0px #c5deea;',
      '  font-size: 11px;',
      '}',
      '',
      '.loading-status {',
      '  font-size: 24px;',
      '  padding: 15px 0px;',
      '  text-align: center;',
      '  display: block;',
      '}',
      '',
      '.fa-userlist-username img,',
      '.member-user-find img {',
      '  display: none;',
      '}',
      '',
      '.fa-memberlist-wrapper {',
      '  position: fixed;',
      '  bottom: 0px;',
      '  left: 0px;',
      '  z-index: 99999;',
      '}',
      '',
      'td.fa-userlist-extra-value {',
      '  position: absolute;',
      '  top: 50%;',
      '  right: 30px;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      '.fa-memberlist-inner {',
      '  position: absolute;',
      '  display: none;',
      '}',
      '',
      '.fa-memberlist-toggler {',
      '  width: 45px;',
      '  height: 45px;',
      '  box-sizing: border-box;',
      '  background-color: #39c;',
      '  position: relative;',
      '  border-radius: 0 5px 0 0;',
      '  transition: all 200ms;',
      '}',
      '',
      '.fa-memberlist-toggler:hover {',
      '  background-color: #2e3133;',
      '}',
      '',
      '.fa-memberlist-toggler i.fa {',
      '  position: absolute;',
      '  font-size: 25px;',
      '  top: 50%;',
      '  left: 47%;',
      '  color: #fff;',
      '  -moz-transform: translate(-50%, -50%);',
      '  -ms-transform: translate(-50%, -50%);',
      '  -webkit-transform: translate(-50%, -50%);',
      '  -o-transform: translate(-50%, -50%);',
      '  transform: translate(-50%, -50%);',
      '}',
      '',
      '.fa-memberlist-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-memberlist-inner {',
      '  position: absolute;',
      '  z-index: 99999999;',
      '  bottom: 45px;',
      '  background-color: #fff;',
      '  width: 350px;',
      '  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);',
      '  border: solid 1px #ddd;',
      '  border-left: solid 0px;',
      '}',
      '',
      '.fa-memberlist-inner header h4 {',
      '  color: #fff;',
      '  background-color: #39c;',
      '  padding: 10px 15px;',
      '  font-family: "Trebuchet MS", Arial, sans-serif;',
      '  text-transform: uppercase;',
      '  border: none;',
      '  margin: 0;',
      '  font-size: 18px;',
      '  font-weight: normal;',
      '}',
      '',
      '.fa-memberlist-inner header form {',
      '  padding: 15px 15px 0 15px;',
      '  position: relative;',
      '  width: 100%;',
      '  display: block;',
      '}',
      '',
      '.fa-memberlist-inner header form input,',
      '.fa-memberlist-inner header form select {',
      '  width: 100%;',
      '  border: solid 1px #cecece;',
      '  padding: 7px;',
      '  font-size: 13px;',
      '  border-radius: 3px;',
      '  display: block;',
      '  padding-left: 31px;',
      '  color: #555;',
      '  background-image: url(https://forumeiros.github.io/assets/src/svg/find.svg);',
      '  background-repeat: no-repeat;',
      '  background-size: 16px;',
      '  background-position: 8px center;',
      '  transition: all 200ms;',
      '}',
      '',
      '.fa-memberlist-inner header form select {',
      '  padding-left: 7px;',
      '  background: none;',
      '}',
      '',
      '.fa-memberlist-inner header form label {',
      '  display: block;',
      '  margin-bottom: 6px;',
      '  margin-top: 13px;',
      '  font-size: 11px;',
      '}',
      '',
      '.fa-memberlist-inner header form input::placeholder {',
      '  color: #555;',
      '}',
      '',
      '.fa-memberlist-inner header form input:focus {',
      '  border-color: #39c;',
      '  outline: none;',
      '  box-shadow: inset 0 0 1px 0px #3399cc, 0 0 1px 1px #3399cc;',
      '}',
      '',
      '.fa-memberlist-inner .fa-user-list {',
      '  padding: 15px;',
      '}',
      '',
      '.fa-memberlist-inner footer {',
      '  background-color: #ddd;',
      '  padding: 10px 15px;',
      '}',
      '',
      '.fa-memberlist-inner footer a {',
      '  font-size: 12px;',
      '  border-bottom: solid 1px transparent;',
      '  color: #39c;',
      '}',
      '',
      '.fa-memberlist-inner footer a:hover {',
      '  border-bottom-color: #39c;',
      '}',
      '',
      'a#fa-contact-next-page {',
      '  float: right;',
      '}',
      '',
      '.disabled {',
      '  opacity: .9;',
      '  filter: blur(.5px);',
      '  cursor: not-allowed !important;',
      '}',
      '',
      '.disabled:hover {',
      '  border-bottom-color: transparent!important;',
      '}',
      '',
      '.fa-user-list {',
      '  max-height: 80vh;',
      '  max-height: -moz-calc(100vh - 355px);',
      '  max-height: -webkit-calc(100vh - 355px);',
      '  max-height: -ms-calc(100vh - 355px);',
      '  max-height: -o-calc(100vh - 355px);',
      '  max-height: calc(100vh - 355px);',
      '  overflow-y: scroll;',
      '  margin-top: 15px;',
      '  border-top: solid 1px #ddd;',
      '}',
      '',
      '.fa-user-list table {',
      '  width: 100%;',
      '  border-collapse: collapse;',
      '}',
      '',
      'tr.member-user-row {',
      '  display: block;',
      '  margin-bottom: 15px;',
      '  position: relative;',
      '}',
      '',
      'tr.member-user-row:last-child {',
      '  margin-bottom: 0px;',
      '}',
      '',
      'tr.member-user-row td img.fa-userlist-avatar {',
      '  width: 25px;',
      '  margin-right: 3px;',
      '  height: 25px;',
      '  border: solid 1px #989898;',
      '  border-radius: 5px;',
      '  box-shadow: 0 0 1px black;',
      '}',
      '',
      'td.fa-userlist-pmwrapper {',
      '  position: absolute;',
      '  top: 50%;',
      '  right: 2px;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '}',
      '',
      'td.fa-userlist-pmwrapper i {',
      '  color: #39c;',
      '  font-size: 15px;',
      '}',
      '',
      'td.fa-userlist-pmwrapper i:hover {',
      '  color: #444;',
      '}',
      '',
      'input#fa-field-find-user:focus + div.fa-members-find,',
      'div.fa-members-find:hover {',
      '  display: block!important;',
      '}',
      '',
      'span#close-find-wrapper {',
      '  position: absolute;',
      '  right: 15px;',
      '  top: 50%;',
      '  -moz-transform: translateY(-50%);',
      '  -ms-transform: translateY(-50%);',
      '  -webkit-transform: translateY(-50%);',
      '  -o-transform: translateY(-50%);',
      '  transform: translateY(-50%);',
      '  cursor: pointer;',
      '}',
      '',
      'span#close-find-wrapper:hover {',
      '  color: #39c;',
      '}'
    ].join('\n');

    $('<style>', {
      type: 'text/css',
      text: members.style
    }).appendTo('head');
  });
}(jQuery));

o/
Luiz~
Luiz~
New Member

Male Posts : 17
Reputation : 9
Language : PT
Location : Brazil

http://ajuda.forumeiros.com/

Back to top Go down

List of members at the bottom of the page Empty Re: List of members at the bottom of the page

Post by SLGray July 7th 2017, 10:46 pm

Ok.  You should have stated that in the first post.


List of members at the bottom of the page Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51515
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

List of members at the bottom of the page Empty Re: List of members at the bottom of the page

Post by Luiz~ July 8th 2017, 3:30 pm

Yes it's true. I forgot that. Embarassed
Luiz~
Luiz~
New Member

Male Posts : 17
Reputation : 9
Language : PT
Location : Brazil

http://ajuda.forumeiros.com/

Back to top Go down

List of members at the bottom of the page Empty Re: List of members at the bottom of the page

Post by Guest July 8th 2017, 3:51 pm

Nice code. I tested it on my forum and it's not showing the users(most likely because my templates are heavily modified). Anyway, good job Smile
avatar
Guest
Guest


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum