Latest topics
» Topic'It
by SLGray Yesterday at 15:52

» FM Themes
by SLGray Yesterday at 15:51

» User - Made Creations
by SLGray Yesterday at 15:50

» Topic'It
by SLGray Yesterday at 15:46

» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

» [GAME] Count to 30 - Ange Edition
by SLGray Mon 11 Sep 2017, 14:23

» Rank CSS
by Mr_Grande Fri 08 Sep 2017, 09:24

» make the topic a color
by Ultimas Wed 06 Sep 2017, 19:44

» Chit Chat Thread
by Valoish Sun 03 Sep 2017, 23:20

» The like/thumbs up or down feature
by Dr.kran Sun 03 Sep 2017, 19:21

» My text boxes are glitched, can you help with this type of problem?
by Wolfuryo Sun 03 Sep 2017, 17:08

» i need to add css improvement
by Wolfuryo Sat 02 Sep 2017, 12:12

Recent Tutorials
Top posting users this month
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests

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

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9729
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9729
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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.
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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>');
        }
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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
?
avatar
Wolfuryo

Gender : Male
Posts : 249
Points : 1179
Reputation : 79
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostWolfuryo on Thu 14 Apr 2016, 14:48

@SLGray, you should add them as any other character
'{'
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9729
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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'],
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9729
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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>');
}
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9729
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9729
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2429
Points : 4681
Reputation : 284
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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.
avatar
skouliki

Title :
Gender : Female
Posts : 360
Points : 1268
Reputation : 168
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

--------

avatar
Guest
Guest
View all awards

PostGuest 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!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4684
Points : 9729
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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.
avatar
Guest
Guest
View all awards

PostGuest 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
avatar
DeathLess
New Member
Title :
Gender : Unspecified
Posts : 6
Points : 120
Reputation : 1
Language : English & Hungarian
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostDeathLess on Mon 26 Jun 2017, 10:36

It works fine!!
Thanks for the code!!

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