MyBB Community Forums

Description
This jQuery mod will convert all of the links in your site page pointing to any member profile to an option dropdown with the actions you can perform with another user account.

Background:
As per request of the user AwesomePol over PM at community I've coded this script.

Dependency:
jQuery library is required to implement this as the script is written in jQuery. So if you have already not included jQuery library include now first. [How]

Method:
A[1]. First, include the following script to your 'headerinclude' template, at the end.

 /*  
 /  "User Link Quick Options Dropdown"
 /  - a jQuery script for MyBB to convert all user profile links in page to quick option dropdown list
 /  Author: effone
 /  Website: http://demonate.com
 /  Licence: Demonate standard licence for free products applied
 /  © 2014, Demonate
*/


jQuery.noConflict();
jQuery(document).ready(function(jQ){
    jQ("a[href*='member.php?action=profile&uid=']").addClass("user_link");

    jQ(".user_link").click(function(){
        
        var name = jQ(this).text();
        var uid = jQ(this).attr('href').substr(jQ(this).attr('href').lastIndexOf("=") + 1);
        jQ( this ).before( "<ul class='user_opt'><li><a href='member.php?action=profile&uid="+uid+"'>Profile</a></li><li><a href='member.php?action=emailuser&uid="+uid+"'>E-Mail</a></li><li><a href='private.php?action=send&uid="+uid+"'>Message</a></li><li><a href='search.php?action=finduser&uid="+uid+"'>Posts</a></li><li><a href='search.php?action=finduserthreads&uid="+uid+"'>Threads</a></li><li><a href='javascript:MyBB.reputation("+uid+");'>Rep User</a></li><li><a href='usercp.php?action=do_editlists&add_username="+name+"&my_post_key="+my_post_key+"'>Make Buddy</a></li><li><a href='usercp.php?action=do_editlists&manage=ignored&add_username="+name+"&my_post_key="+my_post_key+"'>Ignore User</a></li></ul>" );
        
        var pos = jQ(this).position();
        var top = jQ(this).outerHeight();
        var setleft = jQ(this).outerWidth()/2 - jQ(".user_opt").outerWidth()/2;
        
        jQ(".user_opt").css({
        position: absolute,
        top: (pos.top + top) + "px",
        left: (pos.left + setleft) + "px"
        }).show();
        
        return false;
    });
        
    jQ(document).mouseup(function (e){       
        var container = jQ('.user_opt');
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.remove();
        }
    });
});

A[2]. You can optionally keep the script external as well. For that, skip the previous step and start from here:

1. Upload the attached file 'user_options.js' in your 'jscripts' folder.
2. Open your 'headerinclude' template and find this:

{$stylesheets}

... and add the following line just before this:

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/user_options.js"></script>

I've also uploaded to the script to Demoante CDN. you can even call that from there if you have trust on Demonate.

<script type="text/javascript" src="http://demonate.com/jscripts/cdn/user_options.js"></script>

or.

<script type="text/javascript" src="http://goo.gl/5rBwtZ"></script>

B. Now designing the option dropdown list. Its is required to make the unordered list to a menu. So, open your global.css and add at the end:

.user_opt {
    position: absolute;
    padding: 0;
    margin: 0;
    background: #FFF;
    border: 1px solid #0F5C8E;
    z-index: 999;
    text-align: left;
    font-weight: 300;
}
.user_opt li {
    list-style: none;
}
.user_opt li a {
    color: #0F5C8E;
    font-weight: 700;
    font-size: 11px!important;
    text-decoration: none;
    padding: 3px 15px;
    display: block;
    border-top: 1px solid #0F5C8E;
}

.user_opt li:first-child a { border-top: none; }
.user_opt li a:hover {
    color: #000;
	background: #ADCBE7;
}

You are done. Result (applied to my premium theme Sytrax):



Change the CSS properties to suit your requirement further.

Happy coding.

Thanks a lot. It will save a lot of space in postbit and other locations on the forum.

I don't think this handles Google SEO, does it?

(2014-02-22, 09:42 PM)Omar G. Wrote: [ -> ]I don't think this handles Google SEO, does it?

How its related to any SEO thing by the way?
Its just a handy shortcuts combination menu, nothing else, for the users comfort - not search engine's.

In the javascript it affects links like: "member.php?action=profile&uid="
Google SEO, changes these links to something like(But I'm not sure what it is actually like): http://URL.com/user-effone.html

To allow compatibility for Google SEO you would have to use a modified code. I would modify it for you guys, but I don't know the URL markup for the Google SEO plugin.

Okay I got it. And its not a big deal.

We can modify the first few lines of the script, this:

    jQ("a[href*='member.php?action=profile&uid=']").addClass("user_link");

    jQ(".user_link").click(function(){
        
        var name = jQ(this).text();
        var uid = jQ(this).attr('href').substr(jQ(this).attr('href').lastIndexOf("=") + 1);

to this:

    jQ("a[href*='user-'], a[href*='member.php?action=profile&uid=']").addClass("user_link");

    jQ(".user_link").click(function(){
        
        var name = jQ(this).text();
        var uid = parseInt(jQ(this).attr('href').match(/\d+/));

... the script will work for all the sites regardless of Google SEO enabled or not as Google SEO enabled sites still accepts standard php get urls.

If it's based on JS, it can never be fully reliable. The code above still won't work if <a> links to http://forum.com/user-username.html page. Look at the HTML source code of Google SEO profile links - href attribute isn't default, so it's impossible to get UID from that attribute. It is like that because Google SEO modifies build_profile_link() and other functions that are used to build URLs. You can check it for example here: http://forum.pcformat.pl/

<a href="http://forum.pcformat.pl/dawidsab-u">dawidsab</a>

As you can see it also has modified format in settings instead of user- prefix.

Moreover, what if someone adds a link in post, for instance? Like this. Or if it wraps avatar <img>. Then it will show a dropdown too, with invalid name.

So, it's a good idea, but I think PHP is much better suited for it.

I think the most reliable way to do this is to modify the build_profile_link() function.

Nonetheless it is a good try without core edits Effone, I wasn't trying to boicot your tutorial, sorry if it seemed that way.

Great job again buddy, simply awesome
I was making something like this, but made core edits. this one is just jQuery lol.
regards

Thanks effone, nice tuto.
I'm using #6 because I have activated Engine friendly URLs

I have one question. How can I make that when user click User_profile dissapear the options (as happens when clicking outside)

Thanks mate!