IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month

Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 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
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3211
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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

Gender : Unspecified
Posts : 83
Points : 836
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile

PostMAX on Mon 30 Jan 2017, 16:15

avatar
Ace 1
Valued Member
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3211
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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
Gender : Unspecified
Age : 23
Posts : 16
Points : 513
Reputation : 3
Location : india
Language : english
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
View user profile http://nimbuzzmasters.forumotions.in/

Postred on Sat 29 Apr 2017, 12:13

Thank you @Ace 1


--------

REAL LOVER HERE
avatar
dannig

Gender : Female
Age : 30
Posts : 36
Points : 554
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
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
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3211
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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.
Sponsored content

PostSponsored content

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