FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» 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

Recent Tutorials
Top posting users this month

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

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

MentionTag Colors

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 13:30

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:

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)
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 13:43

And oh yeah, if you're like Ange ew and don't like Javascript modifying the styles of elements, then use this script instead:

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');
                    }
                });

                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 + '; ' + (bold ? 'font-weight: bold; ' : '') + '}');
            }

        } else {
            console.log('localStorage is not supported.');
        }
    });

});


Last edited by Ace 1 on Thu 10 Nov 2016, 11:16; edited 4 times in total (Reason for editing : localStorage and repeated CSS styles removed + other stuff <3)
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 03 Nov 2016, 13:48

@Ace 1 Nice ! This might make a good tutorial for the user tutorials section. Mind if I move it there ? Smile

btw I use this method on FM Design for staff :
https://fmdesign.forumotion.com/t794-implemented-add-group-color-to-the-mentioning#15884

The script you wrote would be good for forums with a lot of staff or groups though. Thumb right Since you're using ajax you might want to cache the results to localStorage. ( when there's a lot of mentions it might get heavy -- caching locally helps reduce redundant requests ) If you want, you can use the caching methods in these scripts :
https://fmdesign.forumotion.com/t399-display-the-user-avatar-before-mentions
https://fmdesign.forumotion.com/t883-nicknames-for-mentions

Basically it goes over each tag one at a time. Once the request is completed it loads the next tag. Depending on if the data is cached it'll send a request OR load from storage. This is actually something similar to how I'd loop over the links :
Code:
function iterate(array, fn) {
  var next = function() {
    that = array[++i];

    if (that) {
      fn(that, next);
    }
  },

  i = -1,
  that;

  next();
};


// example usage
iterate(document.getElementsByTagName('A'), function(that, next) {
  $.get(that.href, function(d) {
    next(); // get next element when the request is complete
  });
});
It's a little helper I wrote to refresh my memory in case I need to do this again. Razz
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 14:05

Yeah I've always been a tad bit confused as to how localStorage works. I remember you giving me some script to add the Points value to the homepage message and it contained something with it.

I'm also a bit confuzzled as to what that iterate function is doing. I might need some comments <3

And sure, you can move it to the Tutorials section.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 03 Nov 2016, 14:33

At first it is a tad confusing. Best to start with the basics. Anyway to set and save an item locally to the browser all you need to do is this :
Code:
localStorage.myNewItem = document.getElementById('logout').innerHTML;
Calling the above in the console will yield the following results.
MentionTag Colors Captur10

You can also manage localStorage items via the application tab in the chrome devtools.
MentionTag Colors Captur11
localStorage items will persist even when you change the page or close the browser, which makes it ideal for AJAX heavy applications. ( closing browser depends on your cache settings ) The thing I do with my cached localStorage items is that I also cache a date. This way I can tell when the item was cached and update it if a certain amount of time has passed. I used to do something like this :
Code:
if (localStorage.myNewItem && localStorage.myNewItem_exp > +new Date - 10*1000) {
  console.log('Getting from cache...');
} else {
  console.log('Getting from page...');
  localStorage.myNewItem = document.getElementById('logout').innerHTML;
  localStorage.myNewItem_exp = +new Date;
}
Run the above script in the console a couple of times to see the different results. If the cached item is not yet 10 seconds old, then the data is retrieved from the cache, otherwise we get it from the page. We're not actually getting anything from the cache, but we are updating these storage items every 10 seconds. Wink


The iterate function is pretty much like a "for loop" but let's you choose when the next iteration begins, for example after an AJAX request is completed. Here's an example you can run in the console on a page with mentions :
Code:
function iterate(array, fn) {
  // function to call the next iteration
  var next = function() {
    that = array[++i]; // the next element
 
    if (that) {
      fn(that, next); // call the specified function if the next element is NOT null
    }
  },
 
  i = -1, // element index
  that; // element
 
  next(); // call the first iteration
};
 
 
// example usage
iterate($('.mentiontag'), function(that, next) {
  $.get(that.href, function(d) {
    var title = $('h1.page-title', d).text();
    console.log(title);

    next(); // call the next iteration
  });
});

Aye ! Salute
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 14:42

Ight. I think I'm getting how it works.

Also, what's the difference between using window.localStorage and my_setcookie?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 03 Nov 2016, 14:48

Play with it and read up on the API, it's really useful once you get the hang of it. Wink

This might be a good read :
http://stackoverflow.com/questions/3220660/local-storage-vs-cookies ( more detailed than what I can say xD )
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 14:52

I can imagine lol.

Asynchronous calls take forever smh.
universecat
universecat

Gender : Female
Age : 23
Posts : 578
Points : 3411
Reputation : 3
Location : Everywhere and nowhere
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2

Postuniversecat Thu 03 Nov 2016, 16:49

Nice tutorial. I am putting this on my forums. I hope I put it in the right place. I put it in Javascript and clicked on 'all pages'.
Good tutorial. I love it. Thank you for sharing.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 17:12

@universecat There was a small bug in the first one; it's fixed now.

And I won't be on Discord today.
universecat
universecat

Gender : Female
Age : 23
Posts : 578
Points : 3411
Reputation : 3
Location : Everywhere and nowhere
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2

Postuniversecat Thu 03 Nov 2016, 17:14

Okay good. I will have to organize my 'mention' buttons and the options to mention someone and then maybe try it out.
Also, that is fine. I probably won't be either.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 18:14

@Ange Tuteur I've updated the code. Let me know what you think Wink
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 03 Nov 2016, 18:20

From what I can tell it's lookin' good, but it said "dataId is not defined" - line 8, when I executed it via console. Suspect
Code:
        if (storage && storage.getItem('userColor_' + dataId) && storage.getItem('userColor_' + dataId + '_exp') > new Date().getTime() - 60 * 60 * 1000) {

P.S.
I grabbed the code in the first post.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 03 Nov 2016, 18:26

Yeah I was hot swapping the codes in each. I forgot that I declared dataId in the second one and not the first.

It's good now, I made a new variable.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 04 Nov 2016, 11:01

@Ace 1 I understand, I've done that before lol. I gave it a test and it works nicely ! It submits an ajax request on non-cached mentions and gets the color from localStorage for cached mentions. It's a good improvement for performance ! Nice job Thumb left
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Fri 04 Nov 2016, 11:15

Oh word. Even gods make mistakes, huh?

But yeah, I also added something to the first code (Line 8) to remove the spaces and replace them with underscores.

Does that matter? Or can I revert it?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 04 Nov 2016, 11:23

You would be surprised how many errors my drafts have sometimes, helps improve my debugging skills though LOL.

Nah spaces don't matter. It's sorta similar to object names ; You can use dot notation or bracket notation. (good read) You'll want to use brackets for keys that have spaces, like the snippet below for example.
Code:
localStorage['this has spaces'] = 'Tons of spaces !';
localStorage['this has spaces'];
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Fri 04 Nov 2016, 11:28

Oh damn I was using the setItem() and getItem() functions lol

That looks so much easier T-T

And I also found something called sessionStorage and apparently it expires when the browser is closed.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 04 Nov 2016, 11:33

OH bracket notation is a lot easier since it's less to write. Razz

Yeah sessionStorage is good if you want something to only last for the current browser session. It's almost similar to non-sticky cookies -- cookies that expire when the browser is closed.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 10 Nov 2016, 11:19

Update:

The second code is actually better. I've updated it a little bit Rose
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Mon 30 Jan 2017, 14:20

@Mr.Alam Yeah the code from the second post is better in my opinion.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Mon 30 Jan 2017, 14:40

Can you link me to a topic in which you tagged a member?
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 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.
red
red
Member
Gender : Unspecified
Age : 29
Posts : 16
Points : 2588
Reputation : 3
Location : india
Language : english
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
http://nimbuzzmasters.forumotions.in/

Postred Sat 29 Apr 2017, 12:13

Thank you @Ace 1
MentionTag Colors 1f60d
MentionTag Colors Capture
dannig
dannig

Gender : Female
Age : 36
Posts : 36
Points : 2629
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
http://www.novabrasilis.forumeiros.com https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig Sun 30 Apr 2017, 09:39

Worked like a charm, thanks!
Sponsored content

PostSponsored content

Page 1 of 2 1, 2  Next

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