Add Member Account Box Links/Notifications to NingBar (Collaborative Efforts: Jen and Elson)

[Jen]

Add Member Account Box Links/Notifications to NingBar, and Hide Account Box - - Saving Space Above Fold (Collaborative Efforts: Jen and Elson)

There are now 3 versions of this code.

Notes: #1 taking the least amount of space in Custom Code Box, and #3 taking the most space (but offers the most features):

1. Without icons, without Notifications - - just links: Inbox, Alerts, Friends, Invite, Settings.
2. With icons, without Notifications - - just icons and links.
3. With icons, with Notifications - -icons, links, and Notifications (everything! thanks to Elson).

What Will This Code Do For Your Network?

1. This tip will show you how to add your Account Box Links for: Inbox, Alerts, Friends, Invite and Settings to your NingBar.
2. Hide your Account Box, saving space above fold.
3. 
4. The links will only be visible to signed-in Members.
5. Version #1 - No icons, no notifications, just links.
6. Version #2 - No Notifications, just icons and links.
7. Version #3 - Everything (Icons, Links, and Notifications)
8. Note: you may experience issues with formatting if you already have custom links in your NingBar.

 

 

Instructions:

Version #1, No Icons, No Notifications (Just Links):

• If you do not want to hide the Account Box, remove the CSS:
  .account-links {display:none!important;}
• Otherwise, add all code below to your Custom Code Box via: My Network/Tools/Custom Code
• The safest method of copying code below - - copy/paste from this text file: AddMemberAccountLinks_NingBar.txt
  

<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
</style>

<script type="text/javascript">
if (ning.CurrentProfile != null ) {
var NingBarLinks = '<li class="ningbarlink"><a href="/profiles/message/listInbox">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};
</script>
<!-- End NingBar Navigation Links -->

 

 

---

Version #2 No Notifications (Icons and Links):

The safest method of copying code below - - copy/paste from this text file: AddMemberAccountLinks_NingBarIcons.txt

 

<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
.ningbarlink img { padding-top:3px; }
</style>

<script type="text/javascript">
if (ning.CurrentProfile != null ) {
var NingBarLinks = '<li class="ningbarlink"><a href="/profiles/message/listInbox"><img alt="Inbox" src="https://storage.ning.com/topology/rest/1.0/file/get/11386184?profile=original">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="https://storage.ning.com/topology/rest/1.0/file/get/11386196?profile=original">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="https://storage.ning.com/topology/rest/1.0/file/get/11386179?profile=original" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386189?profile=original" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386217?profile=original" width="16">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};
</script>

<!-- End NingBar Navigation Links -->

 

Version #3, Everything (Courtesy of Elson) Icons, Links, and Notifications:

The safest method of copying code below - - copy/paste from this text file: AddMemberAccountLinks_NingBarIcons_ElsonsNotifications.txt

 

<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
.ningbarlink img { margin-top:7px!important; }
</style>

<script type="text/javascript">
var getinbox;
var getalert;
var getrequest;

if (ning.CurrentProfile != null ) {
getinbox = x$('.xj_messages_present .xj_count_unreadMessages').html();
getalert = x$('.xj_alerts_present .xj_count_unreadAlerts').html();
getrequest = x$('.xj_count_friendRequestsReceived .xj_multiple_friend_requests a').html();


var NingBarLinks = '<li id="ninbox" class="ningbarlink"><a href="/profiles/message/listInbox"><img alt="Inbox" src="https://storage.ning.com/topology/rest/1.0/file/get/11386184?profile=original">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nalert" class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="https://storage.ning.com/topology/rest/1.0/file/get/11386196?profile=original">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nfriends" class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="https://storage.ning.com/topology/rest/1.0/file/get/11386179?profile=original" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386189?profile=original" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386217?profile=original" width="16">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};

var ninboxa = x$('#ninbox a').html();
var nalerta = x$('#nalert a').html();
var nfriendsa = x$('#nfriends a').html();

if(getinbox > '0') x$('#ninbox a').html(ninboxa + ' ( ' + getinbox + ' ) ');
if(getalert > '0') x$('#nalert a').html(nalerta + ' ( ' + getalert + ' ) ');
if(getrequest.indexOf( 'xj_count') <= 0) x$('#nfriends a').html(nfriendsa + ' ' + getrequest);
</script>
<!-- End NingBar Navigation Links -->

 

NOTE:The Inbox Notification doesn't show up until a refresh or going to new page.

 

It took some careful thought to create this tip, like would it affect any other code, etc...Please let me know if this causes any issues.

A special thanks to Elson for adding the code for notifications, and thank you Elliott for helping out with the icons.

I hope you all enjoy this tip! See it live on JenSocial.com.

Jen

[George H. Compton IV]

Hello Zachary and Luke. :-)
This was an awesome tip for Ning 2.0. No it will not work in 3.0 but it's already integrated in the system. Your messages and friend request already show up there. I'm sure when Ning is complete there will be more buttons there, like notifications.

[Luke Jones]

Thanks George for replying :) 
Ah right, that sucks :/ , 
But how long till their complete,? thats the thing aha 

the thing I dont understand, I dont know if someone can help me on this, But On Ning's roadmap, it says their working on visual notifications for forum's, surely if they've got visual notifications for forums, they can implement visual notifications for the members ? but Nope, apparently that's too difficult for them aha , its just, Ning dont make sense on times aha, 

[Just Asking]

I know this is an ancient thread, but I've been using the code for... years? I don't remember when I installed. I never realized mine wasn't displaying a count with the friend requests. I get a count with the inbox, and it looks like it should show pending friend requests, but it doesn't.

Does anyone else have this issue or did anyone come up with a fix for that?

[Michael Goebel]

Hi Jen,

I have installed the Version 3 code above to the Custom Code box, but nothing has changed - all that shows is the standard Sign Out link. (on a Ning 2.0 network)

Could you tell me what I am doing wrong please ?

[Jen]

Michael,
Sorry to hear that. This code is pretty dated, so not sure why it's not working on 2.0 site. It def won't work properly on 3.0. Elson wrote the main code, and haven't seen him in some years.
Wish I had more to offer,
Jen

[Michael Goebel]

Thank you for replying Jen. I found the problem. It's working fine now! :-)

[Matthew Aukai Wright]

Hey Michael. Would you mind sharing the code since you said it works now please :)