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
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
Top Achievers
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 Guests :: 1 Bot
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
EmotiUser - Become your own personal emoticon !
Page 1 of 1 • Share
With this plugin you can become your very own emoticon by using your avatar ! Not only that, you can choose from dozens of EmotiUser's by changing the id to that of the desired user.
![EmotiUser - Become your own personal emoticon ! Captur16](https://i.servimg.com/u/f84/18/45/41/65/captur16.png)
Since I'm "u1" it'll parse the text as my beautiful avatar.
You can also change the id to use other member's avatars as emoticons !
Note : Avatars are dynamically retrieved, so if the user changes their avatar it'll also change in older posts.
To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.
Title : EmotiUser
Placement : In all the pages
Paste the following script and submit :
Once you submit the script you should be good and ready to use EmotiUser ! Go to post a new message and click your avatar which should be displayed in the editor toolbar to start inserting some EmotiUser icons !![Good](/users/2516/46/95/34/smiles/1039681782.gif)
If you want to make modifications to the script please read on.![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif)
These are the three settings that are available for modifications in the script :
default_icon : This contains the image URL of the default avatar to be used if the specified user is not available. You can change this to the default icon you want displayed. By default it is : https://2img.net/i/fa/invision/pp-blank-thumb-38px.png
cacheTime : When parsed the avatar of the user is retrieved via AJAX, so in an attempt to speed up load times the avatar is cached for 1 hour. ( 1*60*60*1000 ) Modify this value if you want the cache time to be longer or shorter.
tagType : Takes a number that specifies the type of tag to be used for the EmotiUser icons. By default it's set to 0 which means it's using a BBCode table. If you want to use HTML change this value to 1.
If you have any questions or comments feel free to leave them below. Have fun being an emoticon !
![EmotiUser - Become your own personal emoticon ! Captur16](https://i.servimg.com/u/f84/18/45/41/65/captur16.png)
Click to view demo |
Since I'm "u1" it'll parse the text as my beautiful avatar.
![Cool](https://2img.net/i/fa/i/smiles/icon_cool.gif)
Note : Avatars are dynamically retrieved, so if the user changes their avatar it'll also change in older posts.
Installation
To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.
Title : EmotiUser
Placement : In all the pages
Paste the following script and submit :
- Code:
(function() {
window.EmotiUser = {
default_icon : 'http://2img.net/i/fa/invision/pp-blank-thumb-38px.png', // default avatar
cacheTime : 1*60*60*1000, // amount of time the avatar is cached ( 1 hour )
// tagType influences the type of tags used
// 0 = BBCode
// 1 = HTML
tagType : 0,
// markup format
tag : [
'[table class="emotiuser"][tr][td]:u{UID}:[/td][/tr][/table]',
'<span class="emotiuser">:u{UID}:</span>'
],
parse : function() {
if (!EmotiUser.tags) {
EmotiUser.tags = $('.emotiuser');
EmotiUser.index = -1;
}
var tag = EmotiUser.tags[++EmotiUser.index];
if (tag) {
var txt = $(tag).text(),
tag_id = txt.replace(/:u(\d+):/, '$1'),
storage = window.localStorage;
if (storage && storage['emotiuser_' + tag_id] && storage['emotiuser_' + tag_id + '_exp'] > +new Date - EmotiUser.cacheTime) {
var icon = document.createElement('IMG'),
data = JSON.parse(storage['emotiuser_' + tag_id]);
icon.className = 'emotiuser_icon';
icon.src = data.src;
icon.alt = data.alt;
icon.title = data.title;
tag.parentNode.insertBefore(icon, tag);
tag.parentNode.removeChild(tag);
EmotiUser.parse();
} else {
$.get('/ajax/index.php?f=m&user_id=' + tag_id, function(d) {
var icon = $('.tooltip-content > img', d)[0],
name = $('.tooltip-title', d).text() || d;
if (!icon) {
icon = document.createElement('IMG');
icon.src = EmotiUser.default_icon;
}
icon.className = 'emotiuser_icon';
icon.title = name;
icon.alt = txt;
if (storage && window.JSON) {
storage['emotiuser_' + tag_id] = JSON.stringify({
src : icon.src,
alt : icon.alt,
title : icon.title
});
storage['emotiuser_' + tag_id + '_exp'] = +new Date;
}
tag.parentNode.insertBefore(icon, tag);
tag.parentNode.removeChild(tag);
EmotiUser.parse();
});
}
} else {
delete EmotiUser.tags;
delete EmotiUser.index;
}
}
};
document.write('<style type="text/css">.emotiuser, .emotiuser * { display:inline-block; } .emotiuser_icon { height:30px; vertical-align:middle; margin:3px; } .sceditor-button-emotiuser div { background:none !important; }</style>');
$(function(){
EmotiUser.parse();
if ($.sceditor && toolbar) {
$.sceditor.command.set('emotiuser', {
dropDown : function(editor, caller, callback) {
var content = document.createElement('DIV'),
input = document.createElement('INPUT'),
submit = document.createElement('INPUT');
input.type = 'text';
input.value = _userdata.user_id;
input.id = 'emotiuser_number';
submit.type = 'button';
submit.className = 'button';
submit.value = 'Insert';
submit.onclick = function() {
var id = +$('#emotiuser_number', this.parentNode)[0].value;
if (typeof id === 'number' && id > 0) {
callback(id);
editor.closeDropDown(true);
} else {
alert('Please insert a valid user id');
}
};
content.innerHTML = '<div><label for="emotiuser_number">User Id</label></div>';
content.firstChild.appendChild(input);
content.appendChild(submit);
editor.createDropDown(caller, 'emotiuser', content);
},
exec : function(c) {
var e = this;
$.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
});
},
txtExec : function(c) {
var e = this;
$.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
});
},
tooltip : 'EmotiUser'
});
toolbar = toolbar.replace(/date/, 'emotiuser,date');
$(function() {
var button = $('.sceditor-button-emotiuser div')[0];
if (button) {
$(button).append(_userdata.avatar.replace(/<img/, '<img style="height:16px;width:16px;"'));
button.style.textIndent = '0px';
}
});
}
});
}());
Once you submit the script you should be good and ready to use EmotiUser ! Go to post a new message and click your avatar which should be displayed in the editor toolbar to start inserting some EmotiUser icons !
![Good](/users/2516/46/95/34/smiles/1039681782.gif)
Modifications
If you want to make modifications to the script please read on.
![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif)
These are the three settings that are available for modifications in the script :
default_icon : This contains the image URL of the default avatar to be used if the specified user is not available. You can change this to the default icon you want displayed. By default it is : https://2img.net/i/fa/invision/pp-blank-thumb-38px.png
cacheTime : When parsed the avatar of the user is retrieved via AJAX, so in an attempt to speed up load times the avatar is cached for 1 hour. ( 1*60*60*1000 ) Modify this value if you want the cache time to be longer or shorter.
tagType : Takes a number that specifies the type of tag to be used for the EmotiUser icons. By default it's set to 0 which means it's using a BBCode table. If you want to use HTML change this value to 1.
If you have any questions or comments feel free to leave them below. Have fun being an emoticon !
![Toothless](/users/2516/46/95/34/smiles/3417141818.gif)
Notice |
Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author. |
Last edited by Ange Tuteur on Tue 19 Apr 2016, 18:02; edited 1 time in total
It this how it should work, the avatar does not appear until the page finishes loading?
Also I notice when you change your avatar, the avatars in posts are not changing and not showing the avatars.
Also I notice when you change your avatar, the avatars in posts are not changing and not showing the avatars.
It may take a few seconds for the avatars to load since it has to send a request for each user. However, once a user has been loaded their avatar will be cached for 1 hour, so it should load faster once the avatar is cached.SLGray wrote:It this how it should work, the avatar does not appear until the page finishes loading?
The avatar may not be changing due to it being cached. You can clear the cache or set the cacheTime variable to 1000 to manually purge the cache. The avatars are not appearing at all, though ?SLGray wrote:Also I notice when you change your avatar, the avatars in posts are not changing and not showing the avatars.
I changed my avatar to test it, but now the avatar is not appearing at all.
I removed the code.
http://fmthemes.forumotion.com/
Do you want me to re-install it?
I removed the code.
http://fmthemes.forumotion.com/
Do you want me to re-install it?
It appeared to be running okay on my end. The only thing I can assume is that it may have been a caching error. I'm not 100%, so I'll do some more testing on my test forum. Thanks for testing it though. ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
Yeah, it's a neat little plugin. I can see people creating new accounts just for a new emotiuser.brandon_g wrote:I admit that is a pretty cool feature.
I sometimes cant help but wonder, where you get these awesome ideas for features from.
![tongue](https://2img.net/i/fa/i/smiles/icon_tongue.png)
I pull them out of my magic hat.
![Shifty](/users/2516/46/95/34/smiles/3720256567.gif)
- Sponsored content
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|