Move follow links

[Chris]

 

This script moves the "follow" links to the top of the page and make them more noticeable. Try them. Post screenshots of them in use. Give me feedback and tell me about bugs, and follow this blog for updates. The latest version will always be in this description.

 

 

Set your options in the script where indicated.

Add this script code to your "custom code" as the LAST thing.

 

<script type="text/javascript">
/* chris's "move the follow link" code v0.9.2 *//*all options*/
/* latest version http://creators.ning.com/profiles/blogs/move-follow-links */
/* choose your options here */

/* Include extra text? Choices: "yes", "no" */
var c_xtra_txt="yes";

/* If it's too long to fit do what? Choices: "down", "shrink" */
var c_too_long="shrink";

/* If it's forced down, align it left or right? Choices: "left", "right" */
var c_align="right"; 

if (typeof(x$)!="undefined") {function c_move_follow_link() {var c_follow_link= x$('.xg_sprite.xg_sprite-follow-add, .xg_sprite.xg_sprite-follow-remove');if (c_follow_link.length){if (x$(c_follow_link[0]).attr('_removeurl').indexOf('stopFollowingMembership') > -1) {var c_new_follow_link=c_follow_link[1];} else {var c_new_follow_link=c_follow_link[0];}var c_follow_span=x$(c_new_follow_link).parent().children()[1];if (c_xtra_txt=="no") {var c_span_style="display:none;"; } else { var c_span_style="font-size:0.8em;font-weight:400;";}var c_new_follow_li='<li id="newFollowLi" title="'+ c_follow_span.innerHTML+'" class="right xg_lightborder navbutton" style="list-style:none;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" onmouseover="this.title=x$(\'#followSpan\').text();"><span id="followSpan" style="'+c_span_style+'"></span></li>';if(x$('.navigation.easyclear').length){x$(c_new_follow_li).appendTo('.navigation.easyclear');var cnfli_in_place = x$('#newFollowLi');var e_top=cnfli_in_place.offset().top;var c_prev_height=cnfli_in_place.prev().height();x$('#followSpan').html(c_follow_span.innerHTML);cnfli_in_place.prepend(c_new_follow_link);if (cnfli_in_place.prev().hasClass('right') && (cnfli_in_place.height() > c_prev_height || cnfli_in_place.offset().top != e_top)) {if (c_too_long=="down") {cnfli_in_place.height(c_prev_height);cnfli_in_place.css({'white-space':'nowrap'});cnfli_in_place.width('auto');if (c_align=="left") {cnfli_in_place.before('<p><br /></p>');cnfli_in_place.removeClass('right');cnfli_in_place.addClass('left');} else {cnfli_in_place.before('<p>&nbsp;</p><p>&nbsp;</p>');}} else {cnfli_in_place.height(c_prev_height);var safetyctr=0;while (safetyctr < 15 && cnfli_in_place.offset().top > e_top) {safetyctr++;cnfli_in_place.width(cnfli_in_place.width()-30);}}} }else{x$(c_new_follow_li).appendTo('.xg_module.module_searchbar');var cnfli_in_place = x$('#newFollowLi');cnfli_in_place.prepend(c_new_follow_link);if (c_align=="left") {cnfli_in_place.removeClass('right');cnfli_in_place.addClass('left');cnfli_in_place.css({'margin': '5px 0px !important'});}}x$(c_follow_span).html('(follow at <a href="#">top</a>)');}}x$().ready(function() {setTimeout('c_move_follow_link();', 500);} );}</script>

 

 

 

If you use this script, do the right thing...

 

 

This will not create "follow" links where there aren't any (blogs, notes etc.). All options *should* now work in Firefox, Safari, Chrome and IE8, but I haven't tested thoroughly - that's your job!

 

Known issues:

• When there's no "follow" link on the page to start with, this script will not create one. It's not possible. I've noticed that sometimes pages that should have them load without them. Nothing I can do about that, except file a ticket with Ning. If you think you should see a link at the top but don't, check to see if there's one at the bottom. If there is, then this script has failed to move it. If there are no follow links anywhere on the page then it's nothing to do with this script. It moves follow links. It doesn't create or delete them.
  
  
• There are no "follow" links to be moved on Notes, Blog lists pages, The All Blogs page, or on Group Discussion pages if you're not a member of that group. This script will not create them. Try removing this code. Do you see a follow link? If not, then this script won't do anything on that page. There has to already be a "follow" link there to be moved.
  
  
• Firefox doesn't support the css ellipsis ("...") as in "email me whe..." so the text runs right to the edge of the button if you're using "shrink". This does work in safari, chrome and also in IE8, oddly.
  
  
• If a button is clicked and it grows, it may move on the page. Being worked on.

 

 

Changelog:

16 jul 11: v0.9.2 fixed for firefox.

15 Jul 11: v:0.9 multiple options in one script. added align left option. fixed group bug.

10 jul 11: v0.7 "Title" now updates. In navigationeasyclear by default now. Created two versions.

[CocteauBoy]

I like this! Is there a way to adjust it so it is aligned-left?

[Chris]

@Troy, there probably is, I'll see if I can put something together for you.

[Chris]

Good point luc, here's a version that puts a "follow at top" link in it's place to let people know it's moved. I haven't figured out how to copy the follow link and still have it work as it's "activated" during page load by javascript. Moving the activated link is fine, it stays "activated" but a copy is not activated and therefore useless.

 

Many people don't see the follow link at the bottom of the page, and if you're starting a new network then no-one knows where it is yet. Plus, when there are two links on a page this only moves one of them.

 

<script type="text/javascript">if (typeof(x$)!="undefined") {/* chris's "move the follow link" code v0.7.m.2 *//*moves down if too wide*/function c_move_follow_link() {var c_follow_link= x$('.xg_sprite.xg_sprite-follow-add').length ? x$('.xg_sprite.xg_sprite-follow-add:first') : x$('.xg_sprite.xg_sprite-follow-remove:first');if (c_follow_link.length){var c_new_follow_link=c_follow_link;var c_follow_span=c_follow_link.parent().children()[1];var c_new_follow_li='<li id="newFollowLi" title="'+ c_follow_span.innerHTML+'" class="right xg_lightborder navbutton" style="list-style:none;" onmouseover="this.title=x$(\'#followSpan\').text();"><span id="followSpan" style="font-size:0.8em;font-weight:400;">'+c_follow_span.innerHTML+'</span></li>';if(x$('.navigation.easyclear').length){x$(c_new_follow_li).appendTo('.navigation.easyclear',function(){x$('#newFollowLi').prepend(c_new_follow_link);var c_prev_height=x$('#newFollowLi').prev().height();if(x$('#newFollowLi').height() > c_prev_height){x$('#newFollowLi').before('<br /><br />');x$('#newFollowLi').height(c_prev_height);x$('#newFollowLi').css('white-space','nowrap');x$('#newFollowLi').width('auto');};});}else{x$(c_new_follow_li).appendTo('.xg_module.module_searchbar');x$('#newFollowLi').prepend(c_new_follow_link);}x$(c_follow_span).html('(follow at <a href="#">top</a>)');}}x$().ready(function() {setTimeout('c_move_follow_link();', 500);});}</script>

 

[Chris]

hahaha! Let me know if you try it and how it works for you...

[Chris]

@luc - this comment shows how few people notice it at the bottom of the page.

[Atheist Universe]

Great script.

Some feedback:

- As an admin, the stop following button (specially in discussion categories lists) is too long and scrambles the layout for the top of the page. For members it displays OK.

- To be certain the Follow button appears on:

• Individual Forum Discussions pages
• Forum Categories pages
• The All Forum Discussions page
• Individual Blog pages

It does not appear on

• Group discussion pages
• Blog lists pages
• The All Blogs page

-Here are some screen grabs:

 

 

[Atheist Universe]

In Admin mode, it doesn't seem to resize in the same fashion on Individual discussion pages as on discussion categories page.

[Atheist Universe]

Is there a way to do away with the extra text and just keep the Follow/Unfollow button?

[Atheist Universe]

Edit:

The code for the Follow button also works on:

• Photos
• Videos
• Photo Albums
• Pages

And does not work on

• Notes

 

[Chris]

Great feedback. I'll post some new versions later. Thanks!