Latest topics
» [HELP] About Profile Cover Code
by MaHwOs Yesterday at 18:54

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» Auto-suggest @mentions as You Type
by skouliki Wed 15 Nov 2017, 14:56

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Hello everyone this is Adam from France
by Adam Mon 13 Nov 2017, 13:32

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

» Post a message automatically when locking a topic
by ThunderTB Sun 12 Nov 2017, 13:51

» Control pannel issue
by Ange Tuteur Sun 12 Nov 2017, 09:49

» BUG... forum members birthday's
by Ape Sat 11 Nov 2017, 11:44

» Display a Preview of Groups on Hover
by ThunderTB Fri 10 Nov 2017, 21:56

» Search box only visible on hover
by Ange Tuteur Mon 06 Nov 2017, 09:57

» [GAME] Animal Game
by SLGray Sun 05 Nov 2017, 15:04

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

None

[ View the whole list ]


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

MentionTag Colors

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 13:30

First topic message reminder :

I don't know if this should be posted in the Tutorials section but it was something I noticed when looking at @Ange Tuteur's tagged name. This is a script that allows member's mention tags to be color-coded to their group color.

Code:
$(function() {
  'Mentiontag Colors';
  '- - - Ace 1 - - -';
 
  var bold = false,
      storage = window.localStorage,
      cacheTime = 30,
      dataId, c;
  $('meta[name="title"]').after('<style type="text/css" id="mentions-css"/>');
  $('.mentiontag, blockquote a[href^="/u"][rel]').each(function() {
    dataId = this.href.replace(/.*\/u(\d+)/, '$1');
    if (storage) {
      var o = storage.mentionColors ? JSON.parse(storage.mentionColors) : {};
      if (o[dataId] && o[dataId].exp > new Date().getTime() - 60 * 1000 * cacheTime) {
        c = o[dataId].color
      } else {
        $.ajax({
          url: this.href,
          type: 'get',
          async: false,
          success: function(data) {
            c = $('.page-title span', data).css('color')
          }
        });
        o[dataId] = {
          color: c,
          exp: new Date().getTime()
        }
      }
      storage.mentionColors = JSON.stringify(o);
      if ($('#mentions-css').text().indexOf('.mentiontag[data-id="' + dataId + '"]') == -1) {
        $('#mentions-css').append('.mentiontag[data-id="' + dataId + '"], a[href="/u' + dataId + '"][rel] { color: ' + c + '; ' + (bold ? 'font-weight: bold; ' : '') + '}')
      }
    } else {
      console.log('localStorage is not supported.')
    }
  })
});

old code:
Code:
$(function() {
    var bold = false,
        storage = window.localStorage,
        user,
        c;

    $('.mentiontag').each(function() {
         user = this.textContent.replace('@', '').replace(/\s/, '_');
     
        if (storage && storage.getItem('userColor_' + user) && storage.getItem('userColor_' + user + '_exp') > new Date().getTime() - 60 * 60 * 1000) {
            c = storage.getItem('userColor_' + user);
        } else {

            $.ajax({
                url: this.href,
                type: 'get',
                async: false,
                success: function(data) {
                    c = $('.page-title span', data).css('color');
                }
            });

            storage.setItem('userColor_' + user, c);
            storage.setItem('userColor_' + user + '_exp', new Date().getTime());
        }

        bold ? $(this).css({ 'color': c, 'font-weight': 'bold' }) : $(this).css('color', c);
    });

});

And if you notice

Code:
    var bold = false;

That determines if the tags should be bolded or not. Just change
Code:
false
to
Code:
true
if you want to enable it.

Hope you guys like it

Rose


Last edited by Ace 1 on Mon 02 Oct 2017, 13:42; edited 7 times in total (Reason for editing : localStorage, minor screw up)

avatar
MAX

Title :
Gender : Unspecified
Posts : 83
Points : 591
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostMAX on Mon 30 Jan 2017, 16:15

avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 31 Jan 2017, 17:04

@Mr.Alam You have this rule declared in your CSS Stylesheet:

Code:
a[href*="/u"] {
    color: #000!important;
}

which is overriding the styles set by the mentiontag colors code. You can either remove that styling and use the original JS or you can use this JS alone:

Code:
$(function() {
    var bold = false,
        storage = window.localStorage,
        dataId,
        c;
 
    $('head').append('<style type="text/css" id="mentions"/>');
 
    $('.mentiontag').each(function() {
        dataId = this.href.replace(/.*\/u(\d+)/, '$1');
 
        if (storage) {
            if (storage['userColor_' + dataId] && storage['userColor_' + dataId + '_exp'] > new Date().getTime() - 60 * 60 * 1000) {
                c = storage['userColor_' + dataId];
            } else {
 
                $.ajax({
                    url: this.href,
                    type: 'get',
                    async: false,
                    success: function(data) {
                        c = $('.page-title span', data).css('color');
                  console.log('got the colah');
                    }
                });
 
                storage['userColor_' + dataId] = c;
                storage['userColor_' + dataId + '_exp'] = new Date().getTime();
            }
 
            if ($('#mentions').text().indexOf('.mentiontag[data-id="' + dataId + '"]') == -1) {
                $('#mentions').append('.mentiontag[data-id="' + dataId + '"] { color: ' + c + ' !important; ' + (bold ? 'font-weight: bold; ' : '') + '}');
            }
 
        } else {
            console.log('localStorage is not supported.');
        }
    });
 
});

This JS overrides your
Code:
!important
rule.
avatar
red
Member
Title :
Im Afraid To Be Alone
Gender : Unspecified
Age : 22
Posts : 16
Points : 268
Reputation : 3
Location : india
Language : english
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://nimbuzzmasters.forumotions.in/

Postred on Sat 29 Apr 2017, 12:13

Thank you @Ace 1


--------

REAL LOVER HERE
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 30
Posts : 36
Points : 309
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Sun 30 Apr 2017, 09:39

Worked like a charm, thanks!
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Sun 20 Aug 2017, 18:54

Just made a few tweaks as to how the colors are stored.

Enjoy.

Page 2 of 2 Previous  1, 2

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