The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Avatar on FM toolbar in a fastest way!

View previous topic View next topic Go down

Avatar on FM toolbar in a fastest way!

Post by JScript on July 2nd 2015, 4:20 pm

* Description: This application displays the member avatar in Forumotion toolbar in a fastest way!

In your ACP: Modules -> HTML&JAVASCRIPT -> JavaScript codes management -> [Create a new JavaScript]
Title *: <- Whatever you want
Placement : <- In all the pages
Javascript Code * : <- Select, copy and paste the code below in this field:
Code:

/*
* Application: Toolbar with member avatar
* Description: This application displays the member avatar in Forumotion toolbar in a fastest way!
* Version: 1.08032014-jq1.9.1 - Keb (Horus)
* Made and Optimizations by JScript - 2014/03/08
* Copyright (c) 2014 JScript <jscriptbrasil at live dot com>
* This work is free. You can redistribute it and/or modify it
* under the terms of the WTFPL, Version 2
*/
jQuery(function() {
    JS_faIsRead();

    function JS_faIsRead() {
        if (jQuery('#fa_welcome').length) {
            jQuery('#fa_welcome').prepend(_userdata.avatar).children('img').css( {
                'border-radius' : '3px 3px 3px 3px',
                'height' : '25px',
                'margin-bottom' : '-10px',
                'margin-right' : '5px',
                'position' : 'relative',
                'top' : '-3px',
                'width' : '25px'
            });
        } else {
            setTimeout(JS_faIsRead, 100);
        }
    }
});

Try it!

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by APE on July 4th 2015, 1:33 am

Nice Work but i have a problem with it it comes up 2 times
https://i18.servimg.com/u/f18/12/23/10/57/captur36.png





APE
Manager
Manager

Male Posts : 8636
Reputation : 757
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by JScript on July 4th 2015, 2:29 am

@APE
Well, I tested now on the console and only appeared once, in my forum is functioning normally, but I need you to install the code in your forum so that I can verify what is going ok?

I did signed up there,

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by APE on July 4th 2015, 2:33 am

ok it has come back up as one but its moved my bar at the top down a bit Sad





APE
Manager
Manager

Male Posts : 8636
Reputation : 757
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by JScript on July 4th 2015, 3:20 am

@APE
You can show me the before and after installing the code?

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by Ange Tuteur on July 4th 2015, 11:21 am

I think the two things you can do two improve this would be :

1. Check the login state before polling for fa_welcome. This way it wont be polling for fa_welcome while the user is logged out.

Example :
Code:
if (_userdata.session_logged_in) JS_faIsRead();

2. If possible, native getElementById() is normally a lot faster for getting elements by their ID. You could also just stick with jQuery, but cache it to a variable so it doesn't have to search for fa_welcome when the condition is triggered. Normally like you do with native after writing that loooong document.getElementById lol!

Example :
Code:
        var welcome = document.getElementById('fa_welcome');
        if (welcome) {
            jQuery(welcome)


This is also another example I wrote :
Code:
$(function() {
  if (_userdata.session_logged_in) {
    var avatar = document.createElement('SPAN'), right; // start up variables
    avatar.innerHTML = _userdata.avatar.replace(/<img (src=".*)/,'<img style="height:25px;width:25px;vertical-align:middle;margin-bottom:1px;" $1'); // add avatar to the container
    avatar.id = 'fa_avatar'; // apply id for user modifications
 
    $(function() { // toolbar should be ready
      right = document.getElementById('fa_right'); // get the right side of the toolbar
      right && right.insertBefore(avatar, right.firstChild); // insert the avatar as the first node
    });
  }
});

I usually like polling for modifications before the document is ready. The toolbar, sceditor.. can normally be accessed on a second doc ready event, mostly because they're launched with one.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by JScript on July 4th 2015, 12:27 pm

@Ange Tuteur
Perfect! Just as assembler is faster than C ++, your code is much faster than mine !!!

However, replacing the second "$ (function () {" to "setTimeout (JS_faIsRead, 100);" is much faster.
Code:

jQuery(function() {
   if (_userdata.session_logged_in) {
      var avatar = document.createElement('SPAN'),
         right; // start up variables
      avatar.innerHTML = _userdata.avatar.replace(/<img (src=".*)/, '<img style="height:25px;width:25px;vertical-align:middle;margin-bottom:1px;" $1'); // add avatar to the container
      avatar.id = 'fa_avatar'; // apply id for user modifications

      function JS_faIsRead() {
         var welcome = document.getElementById('fa_welcome');
         if (welcome) {
            right = document.getElementById('fa_right'); // get the right side of the toolbar
            right && right.insertBefore(avatar, right.firstChild); // insert the avatar as the first node
         } else {
            setTimeout(JS_faIsRead, 100);
         }
      }
      JS_faIsRead();
   }
});


So far the best mod: http://help.forumotion.com/t141661-avatar-on-fm-toolbar-in-a-fastest-way#965096

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by Paulostge on July 4th 2015, 12:49 pm

I run this code on my page...

Code:
$(function() {
    setTimeout(function() {
        var av = $('#fa_usermenu img').attr('src');
        $('#fa_welcome').prepend('<img src="' + av + '" class="toolbar_avatar" />');
    });
});

Paulostge
Forumember

Male Posts : 86
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

Re: Avatar on FM toolbar in a fastest way!

Post by APE on July 4th 2015, 2:16 pm

ok my problem is now fixed i just made the avatar smaller in the toolbar and that fixed it Wink
Thank you JS thumleft





APE
Manager
Manager

Male Posts : 8636
Reputation : 757
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum