Latest topics
» How To Install the Code Snippet Button
by SLGray Today at 20:56

» Select Button
by SLGray Today at 20:25

» FM Themes
by SLGray Today at 16:48

» User - Made Creations
by SLGray Today at 16:48

» The Football Forums
by Mati Today at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Today at 12:33

» Search Bar Options
by Samantha NL Today at 11:38

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

Recent Tutorials
Who is online?
In total there are 2 users online :: 0 Registered, 0 Hidden and 2 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Alphabetical Search Bar for the Memberlist

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 14 Apr 2016, 13:26

This plugin installs a bar above the memberlist with a list of preset letters, so you can easily search members by the first letter in their name.


Click to view demo

Features
Usability ! Clicking any preset will get all members that begin with the specified letter*
Editability ! You can change the position of the bar from top, right, bottom, or left, AND you can completely customize the list of presets to include what YOU want.
No Refresh ! The memberlist is retrieved via AJAX so you don't have to worry about the page refreshing when clicking a preset !


* There's a bug in Forumotion that displays a random member if there are no members that begin with the specified letter.


Installation


To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Memberlist Alphabet Bar
Placement : In all the pages
Code:
if (/\/memberlist/.test(window.location.href)) {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t479-alphabet-search-bar-for-the-memberlist#5995';

  $(function() {
    window.fa_alphabar = {
      // position of the bar ; 'top', 'left', 'bottom', or 'right'
      position : 'top',

      presets : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],

      bar : $('<div id="memberlist_alphabar" />')[0], // creates the preset bar

      list : $('form[action="/memberlist"]')[0].nextSibling, // memberlist

      // sort the memberlist by the letter that was chosen
      change : function(that) {
        if (that.id != 'alphabar_actif') {
          var actif = document.getElementById('alphabar_actif');
          if (actif) actif.id = '';
          that.id = 'alphabar_actif';

          $.get(that.href, function(d) {
            fa_alphabar.list.parentNode.innerHTML = $('form[action="/memberlist"]', d).parent().html();
            fa_alphabar.list = $('form[action="/memberlist"]')[0].nextSibling;

            if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
            fa_alphabar.insertBar();
          });
        }
      },

      // inserts the preset bar
      insertBar : function() {
        fa_alphabar.bar.className = 'alphabar_' + fa_alphabar.position;
        fa_alphabar.list.className += ' alphalist_' + fa_alphabar.position;
        fa_alphabar.list.parentNode.insertBefore(fa_alphabar.bar, fa_alphabar.position.toLowerCase() == 'bottom' ? fa_alphabar.list.nextSibling : fa_alphabar.list);

        /left|right/i.test(fa_alphabar.position) && fa_alphabar.list.insertAdjacentHTML('afterend', '<div class="clear"></div>');  // clear floats for left and right positions
      }

    };

    if (fa_alphabar.list) {
      // put together the alphabar
      for (var i = 0, j = fa_alphabar.presets.length, newRow = /left|right/i.test(fa_alphabar.position), htmlStr = '<table><tbody>' + (newRow ? '' : '<tr>'); i < j; i++) {
        htmlStr += (newRow ? '<tr>' : '') + '<td><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + fa_alphabar.presets[i] + '" ' + ( new RegExp('username=' + fa_alphabar.presets[i].replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(?:$|&)').test(window.location.search) ? 'id="alphabar_actif"' : '' ) + ' onclick="fa_alphabar.change(this); return false;">' + fa_alphabar.presets[i] + '</a></td>' + (newRow ? '</tr>' : '');
      }

      fa_alphabar.bar.innerHTML = htmlStr + (newRow ? '' : '</tr>') + '</tbody></table>';

      if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
      fa_alphabar.insertBar();
    }
  });

  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');
}

Save the script and the Alphabet bar will be installed ! You'll be able to see it and search members via their first letter by visiting the memberlist page on your forum. Wink

If you want to make modifications to this plugin please see the section below ! Super hero


Modifications


Here's a list of the modifications that you can make to this plugin.


1. Postion
Near the top of the script you'll see a variable like this :
Code:
position : 'top',
. This controls the position of the alphabet bar. Currently it displays at the top of the memberlist. If you want it to display on the right, left, or bottom of the memberlist all you need to do is change the texts 'top' to the specified position. Left for example :
Code:
position : 'left',


2. Presets
Near the top you'll also see a variable named "presets" and an array of letters. By default, this array contains the english alphabet, but what if you want to add different letters and symbols ? Simple ! All you need to do is edit the array and add in more letters like this for example :
Code:
presets : ['*', '1', '2', '3', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
As you can see, I added *, 1, 2, and 3 to the preset list.


3. The theme
By default the theme is white, so if you want to change the theme colors, find and edit the stylesheet at the bottom of the script :
Code:
  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');

If you want a quick dark theme, replace the above stylesheet with this one :
Code:
  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#333;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#111}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');


That's all the modifications to note ! If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy ! Coffee


Notice
Tutorial written by Ange Tuteur.
Special thanks to the Beta Testers for testing this plugin.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Tue 19 Apr 2016, 17:51; edited 4 times in total
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 13:40

If you add more characters to the preset, will the bar include a scroll?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 14 Apr 2016, 13:48

@SLGray wrote:If you add more characters to the preset, will the bar include a scroll?
It should automatically resize to fit the forum, but if it doesn't let me know. Salute
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 13:51

@Ange Tuteur wrote:
@SLGray wrote:If you add more characters to the preset, will the bar include a scroll?
It should automatically resize to fit the forum, but if it doesn't let me know. Salute
I will later and reply the results.
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 14:00

It is not appearing on FM Themes.  I added 0-9 to the preset.  The bar itself is not appearing.

Code:
if (/\/memberlist/.test(window.location.href)) {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t479-alphabet-search-bar-for-the-memberlist#5995';
       
          $(function() {
            window.fa_alphabar = {
              // position of the bar ; 'top', 'left', 'bottom', or 'right'
              position : 'top',
       
              presets : ['0'. '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
       
              bar : $('<div id="memberlist_alphabar" />')[0], // creates the preset bar
       
              list : $('form[action="/memberlist"]')[0].nextSibling, // memberlist
       
              // sort the memberlist by the letter that was chosen
              change : function(that) {
                if (that.id != 'alphabar_actif') {
                  var actif = document.getElementById('alphabar_actif');
                  if (actif) actif.id = '';
                  that.id = 'alphabar_actif';
       
                  $.get(that.href, function(d) {
                    fa_alphabar.list.parentNode.innerHTML = $('form[action="/memberlist"]', d).parent().html();
                    fa_alphabar.list = $('form[action="/memberlist"]')[0].nextSibling;
       
                    if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
                    fa_alphabar.insertBar();
                  });
                }
              },
       
              // inserts the preset bar
              insertBar : function() {
                fa_alphabar.bar.className = 'alphabar_' + fa_alphabar.position;
                fa_alphabar.list.className += ' alphalist_' + fa_alphabar.position;
                fa_alphabar.list.parentNode.insertBefore(fa_alphabar.bar, fa_alphabar.position.toLowerCase() == 'bottom' ? fa_alphabar.list.nextSibling : fa_alphabar.list);
       
                /left|right/i.test(fa_alphabar.position) && fa_alphabar.list.insertAdjacentHTML('afterend', '<div class="clear"></div>');  // clear floats for left and right positions
              }
       
            };
       
            if (fa_alphabar.list) {
              // put together the alphabar
              for (var i = 0, j = fa_alphabar.presets.length, newRow = /left|right/i.test(fa_alphabar.position), htmlStr = '<table><tbody>' + (newRow ? '' : '<tr>'); i < j; i++) {
                htmlStr += (newRow ? '<tr>' : '') + '<td><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + fa_alphabar.presets[i] + '" ' + ( new RegExp('username=' + fa_alphabar.presets[i] + '(?:$|&)').test(window.location.search) ? 'id="alphabar_actif"' : '' ) + ' onclick="fa_alphabar.change(this); return false;">' + fa_alphabar.presets[i] + '</a></td>' + (newRow ? '</tr>' : '');
              }
       
              fa_alphabar.bar.innerHTML = htmlStr + (newRow ? '' : '</tr>') + '</tbody></table>';
       
              if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
              fa_alphabar.insertBar();
            }
          });
       
          document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');
        }
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 14:05

Nevermind!  I notice my mistake.

@Ange Tuteur  how do you add these characters:

Code:
( ) { } [ ] 0
?
Andrei34

Gender : Male
Posts : 137
Points : 690
Reputation : 38
Language : Romanian and English
Browser : Browser : Opera Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostAndrei34 on Thu 14 Apr 2016, 14:48

@SLGray, you should add them as any other character
'{'
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 15:58

@Andrei34 wrote:@SLGray, you should add them as any other character
'{'
If I do that, the bar disappears.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 14 Apr 2016, 16:10

Try replacing your presets with the ones below to see if it works.
Code:
presets : ['(', ')', '{', '}', '[', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 16:14

@Ange Tuteur wrote:Try replacing your presets with the ones below to see if it works.
Code:
presets : ['(', ')', '{', '}', '[', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
No bar.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 14 Apr 2016, 16:23

I made a small update to the code. Try replacing your script with this one :
Code:
if (/\/memberlist/.test(window.location.href)) {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t479-alphabet-search-bar-for-the-memberlist#5995';
 
  $(function() {
    window.fa_alphabar = {
      // position of the bar ; 'top', 'left', 'bottom', or 'right'
      position : 'top',
 
      presets : ['(', ')', '{', '}', '[', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
 
      bar : $('<div id="memberlist_alphabar" />')[0], // creates the preset bar
 
      list : $('form[action="/memberlist"]')[0].nextSibling, // memberlist
 
      // sort the memberlist by the letter that was chosen
      change : function(that) {
        if (that.id != 'alphabar_actif') {
          var actif = document.getElementById('alphabar_actif');
          if (actif) actif.id = '';
          that.id = 'alphabar_actif';
 
          $.get(that.href, function(d) {
            fa_alphabar.list.parentNode.innerHTML = $('form[action="/memberlist"]', d).parent().html();
            fa_alphabar.list = $('form[action="/memberlist"]')[0].nextSibling;
 
            if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
            fa_alphabar.insertBar();
          });
        }
      },
 
      // inserts the preset bar
      insertBar : function() {
        fa_alphabar.bar.className = 'alphabar_' + fa_alphabar.position;
        fa_alphabar.list.className += ' alphalist_' + fa_alphabar.position;
        fa_alphabar.list.parentNode.insertBefore(fa_alphabar.bar, fa_alphabar.position.toLowerCase() == 'bottom' ? fa_alphabar.list.nextSibling : fa_alphabar.list);
 
        /left|right/i.test(fa_alphabar.position) && fa_alphabar.list.insertAdjacentHTML('afterend', '<div class="clear"></div>');  // clear floats for left and right positions
      }
 
    };
 
    if (fa_alphabar.list) {
      // put together the alphabar
      for (var i = 0, j = fa_alphabar.presets.length, newRow = /left|right/i.test(fa_alphabar.position), htmlStr = '<table><tbody>' + (newRow ? '' : '<tr>'); i < j; i++) {
        htmlStr += (newRow ? '<tr>' : '') + '<td><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + fa_alphabar.presets[i] + '" ' + ( new RegExp('username=' + fa_alphabar.presets[i].replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(?:$|&)').test(window.location.search) ? 'id="alphabar_actif"' : '' ) + ' onclick="fa_alphabar.change(this); return false;">' + fa_alphabar.presets[i] + '</a></td>' + (newRow ? '</tr>' : '');
      }
 
      fa_alphabar.bar.innerHTML = htmlStr + (newRow ? '' : '</tr>') + '</tbody></table>';
 
      if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
      fa_alphabar.insertBar();
    }
  });
 
  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');
}
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 16:25

@Ange Tuteur wrote:I made a small update to the code. Try replacing your script with this one :
Code:
if (/\/memberlist/.test(window.location.href)) {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t479-alphabet-search-bar-for-the-memberlist#5995';
 
  $(function() {
    window.fa_alphabar = {
      // position of the bar ; 'top', 'left', 'bottom', or 'right'
      position : 'top',
 
      presets : ['(', ')', '{', '}', '[', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
 
      bar : $('<div id="memberlist_alphabar" />')[0], // creates the preset bar
 
      list : $('form[action="/memberlist"]')[0].nextSibling, // memberlist
 
      // sort the memberlist by the letter that was chosen
      change : function(that) {
        if (that.id != 'alphabar_actif') {
          var actif = document.getElementById('alphabar_actif');
          if (actif) actif.id = '';
          that.id = 'alphabar_actif';
 
          $.get(that.href, function(d) {
            fa_alphabar.list.parentNode.innerHTML = $('form[action="/memberlist"]', d).parent().html();
            fa_alphabar.list = $('form[action="/memberlist"]')[0].nextSibling;
 
            if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
            fa_alphabar.insertBar();
          });
        }
      },
 
      // inserts the preset bar
      insertBar : function() {
        fa_alphabar.bar.className = 'alphabar_' + fa_alphabar.position;
        fa_alphabar.list.className += ' alphalist_' + fa_alphabar.position;
        fa_alphabar.list.parentNode.insertBefore(fa_alphabar.bar, fa_alphabar.position.toLowerCase() == 'bottom' ? fa_alphabar.list.nextSibling : fa_alphabar.list);
 
        /left|right/i.test(fa_alphabar.position) && fa_alphabar.list.insertAdjacentHTML('afterend', '<div class="clear"></div>');  // clear floats for left and right positions
      }
 
    };
 
    if (fa_alphabar.list) {
      // put together the alphabar
      for (var i = 0, j = fa_alphabar.presets.length, newRow = /left|right/i.test(fa_alphabar.position), htmlStr = '<table><tbody>' + (newRow ? '' : '<tr>'); i < j; i++) {
        htmlStr += (newRow ? '<tr>' : '') + '<td><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + fa_alphabar.presets[i] + '" ' + ( new RegExp('username=' + fa_alphabar.presets[i].replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(?:$|&)').test(window.location.search) ? 'id="alphabar_actif"' : '' ) + ' onclick="fa_alphabar.change(this); return false;">' + fa_alphabar.presets[i] + '</a></td>' + (newRow ? '</tr>' : '');
      }
 
      fa_alphabar.bar.innerHTML = htmlStr + (newRow ? '' : '</tr>') + '</tbody></table>';
 
      if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
      fa_alphabar.insertBar();
    }
  });
 
  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');
}
Thanks.  It is working perfect now.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 14 Apr 2016, 16:29

No problem ! Wink
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 16:40

More Characters:  \  /  '

I decided to just use the letters and the asterisk.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 14 Apr 2016, 20:11

@SLGray wrote:More Characters:  \  /  '

I decided to just use the letters and the asterisk.
Ooooh the first and last characters need to be escaped like this :
Code:
['\\', '\'']

I don't think the middle character should have a problem. Think
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2176
Points : 4077
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 14 Apr 2016, 21:18

Thanks.
skouliki

Title :
Gender : Female
Posts : 274
Points : 783
Reputation : 107
Language : english,greek
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://iconskouliki.forumgreek.com https://www.facebook.com/iconskouliki https://twitter.com/iconskouliki

Postskouliki on Mon 18 Apr 2016, 11:51

add it in invision with all greek and english letters everything worked fine thanks

--------

Samantha NL

Title :
CSS Admirer & Gamma Chi
Gender : Female
Age : 28
Posts : 172
Points : 401
Reputation : 19
Location : Hoofddorp, The Netherlands & Greater La La Land
Language : Dutch, US English, a bit of German and UAL (Universal Alien Language)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.friendcodes.nl

PostSamantha NL on Sat 03 Dec 2016, 08:15

Perfect. Installed and works fine on Edge!

I've got a question / request though. I've added a preset 'All' (all members) to it and I want it to light up (selected) and default to that when entering the memberlist. Also, I want the 'All' preset to work. I'm not that advanced writing JS yet, so I was wonering if you, @Ange Tuteur, could create us an updated script for that. Ofc, that 'd be a translatable setting for anyone who has their board language set differently than the standard English most of us are using.



Thanks in advance!

--------


Lovely




Satisfy




World
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 05 Dec 2016, 11:46

@Samantha NL give the following script a try.
Code:
if (/\/memberlist/.test(window.location.href)) {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t479-alphabet-search-bar-for-the-memberlist#5995';
 
  $(function() {
    window.fa_alphabar = {
      // position of the bar ; 'top', 'left', 'bottom', or 'right'
      position : 'top',
 
      presets : ['ALL', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
 
      bar : $('<div id="memberlist_alphabar" />')[0], // creates the preset bar
 
      list : $('form[action="/memberlist"]')[0].nextSibling, // memberlist
 
      // sort the memberlist by the letter that was chosen
      change : function(that) {
        if (that.id != 'alphabar_actif') {
          var actif = document.getElementById('alphabar_actif');
          if (actif) actif.id = '';
          that.id = 'alphabar_actif';
 
          $.get(that.href, function(d) {
            fa_alphabar.list.parentNode.innerHTML = $('form[action="/memberlist"]', d).parent().html();
            fa_alphabar.list = $('form[action="/memberlist"]')[0].nextSibling;
 
            if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
            fa_alphabar.insertBar();
          });
        }
      },
 
      // inserts the preset bar
      insertBar : function() {
        fa_alphabar.bar.className = 'alphabar_' + fa_alphabar.position;
        fa_alphabar.list.className += ' alphalist_' + fa_alphabar.position;
        fa_alphabar.list.parentNode.insertBefore(fa_alphabar.bar, fa_alphabar.position.toLowerCase() == 'bottom' ? fa_alphabar.list.nextSibling : fa_alphabar.list);
 
        /left|right/i.test(fa_alphabar.position) && fa_alphabar.list.insertAdjacentHTML('afterend', '<div class="clear"></div>');  // clear floats for left and right positions
      }
 
    };
 
    if (fa_alphabar.list) {
      // put together the alphabar
      for (var i = 0, j = fa_alphabar.presets.length, newRow = /left|right/i.test(fa_alphabar.position), htmlStr = '<table><tbody>' + (newRow ? '' : '<tr>'); i < j; i++) {
        htmlStr += (newRow ? '<tr>' : '') + '<td><a href="/memberlist' + (i == 0 ? '" id="alphabar_actif' : '?mode=lastvisit&order=DESC&submit=Ok&username=' + fa_alphabar.presets[i]) + '" ' + ( new RegExp('username=' + fa_alphabar.presets[i].replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(?:$|&)').test(window.location.search) ? 'id="alphabar_actif"' : '' ) + ' onclick="fa_alphabar.change(this); return false;">' + fa_alphabar.presets[i] + '</a></td>' + (newRow ? '</tr>' : '');
      }
 
      fa_alphabar.bar.innerHTML = htmlStr + (newRow ? '' : '</tr>') + '</tbody></table>';
 
      if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
      fa_alphabar.insertBar();
    }
  });
 
  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');
}

I added "ALL" to the presets, but gave the first preset some special properties so that it displays all results and is automatically active by default.
Samantha NL

Title :
CSS Admirer & Gamma Chi
Gender : Female
Age : 28
Posts : 172
Points : 401
Reputation : 19
Location : Hoofddorp, The Netherlands & Greater La La Land
Language : Dutch, US English, a bit of German and UAL (Universal Alien Language)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.friendcodes.nl

PostSamantha NL on Tue 06 Dec 2016, 02:22

@Ange Tuteur wrote:@Samantha NL give the following script a try.
Code:
if (/\/memberlist/.test(window.location.href)) {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t479-alphabet-search-bar-for-the-memberlist#5995';
 
  $(function() {
    window.fa_alphabar = {
      // position of the bar ; 'top', 'left', 'bottom', or 'right'
      position : 'top',
 
      presets : ['ALL', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
 
      bar : $('<div id="memberlist_alphabar" />')[0], // creates the preset bar
 
      list : $('form[action="/memberlist"]')[0].nextSibling, // memberlist
 
      // sort the memberlist by the letter that was chosen
      change : function(that) {
        if (that.id != 'alphabar_actif') {
          var actif = document.getElementById('alphabar_actif');
          if (actif) actif.id = '';
          that.id = 'alphabar_actif';
 
          $.get(that.href, function(d) {
            fa_alphabar.list.parentNode.innerHTML = $('form[action="/memberlist"]', d).parent().html();
            fa_alphabar.list = $('form[action="/memberlist"]')[0].nextSibling;
 
            if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
            fa_alphabar.insertBar();
          });
        }
      },
 
      // inserts the preset bar
      insertBar : function() {
        fa_alphabar.bar.className = 'alphabar_' + fa_alphabar.position;
        fa_alphabar.list.className += ' alphalist_' + fa_alphabar.position;
        fa_alphabar.list.parentNode.insertBefore(fa_alphabar.bar, fa_alphabar.position.toLowerCase() == 'bottom' ? fa_alphabar.list.nextSibling : fa_alphabar.list);
 
        /left|right/i.test(fa_alphabar.position) && fa_alphabar.list.insertAdjacentHTML('afterend', '<div class="clear"></div>');  // clear floats for left and right positions
      }
 
    };
 
    if (fa_alphabar.list) {
      // put together the alphabar
      for (var i = 0, j = fa_alphabar.presets.length, newRow = /left|right/i.test(fa_alphabar.position), htmlStr = '<table><tbody>' + (newRow ? '' : '<tr>'); i < j; i++) {
        htmlStr += (newRow ? '<tr>' : '') + '<td><a href="/memberlist' + (i == 0 ? '" id="alphabar_actif' : '?mode=lastvisit&order=DESC&submit=Ok&username=' + fa_alphabar.presets[i]) + '" ' + ( new RegExp('username=' + fa_alphabar.presets[i].replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(?:$|&)').test(window.location.search) ? 'id="alphabar_actif"' : '' ) + ' onclick="fa_alphabar.change(this); return false;">' + fa_alphabar.presets[i] + '</a></td>' + (newRow ? '</tr>' : '');
      }
 
      fa_alphabar.bar.innerHTML = htmlStr + (newRow ? '' : '</tr>') + '</tbody></table>';
 
      if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
      fa_alphabar.insertBar();
    }
  });
 
  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');
}

I added "ALL" to the presets, but gave the first preset some special properties so that it displays all results and is automatically active by default.

Working great now. Thank you! Smile

--------


Lovely




Satisfy




World

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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