Add Floating Home Button - Easy Access to Home Page When Menu Navigation Not Visible

Floating Home Button: This is a simple little tip. =) In the past I had a home button installed in a bottom menu bar (JenBar) that was always visible, even when the Menu Navigation wasn't. The bar wasn't good for the new JenSocial Design, so I lost the button. When I'm working on my own site, it bugs me when I have to scroll up page to access the Home Page. I decided to add a floating "home" button with link to the home page.

 

Installation Instructions:

  • If you would like to do the same, copy and paste the following code into your Custom Code Box via: My Network/Tools/Custom Code.
  • The script will remove the button from the actual home page.
  • Oops! You will need to copy code from the following text file. I forgot the platform strips position:fixed, and changes to xg-p:fixed.
  • homebutton.txt

 Code Below for Overview - - use homebutton.txt for your copy/paste.

<div class="jenhome"><a href="/" title="Home"><img src="http://api.ning.com:80/files/YpAEDK09C4*ID8ykSF2GmoAS4g0br3tbqLvDzA1NY3RcZzrv9HxsnBE1whmnfQMUkyzEMSGlTktXd0hS-K5f1w8xyv4layRL/jenhome.png" alt="Home" style="z-index:999;xg-p:fixed;top:208px;right:0px;"></a></div>
<script type="text/javascript" language="javascript">
x$(document).ready(function() {
if (x$("div.xg_widget_main_index_index").length > 0) {
x$('div.jenhome').css('display','none');
}
});
</script>

 

For more Ning Tips & Tricks, check out JenSocial. You'll find a ton of great tips under archived Ning Tips, too.

Enjoy,

Jen

Tags: button, floating, floating button, floating home, home, home button, jensocial, ning

Views: 774

Reply to This

Replies to This Discussion

thanks Jen

thanx modified it just watching you write code learning experience always... !

like adding style="border-radius: " to images box-shadow etc... DANG !!!

Good deal!

Nice script! Its showing up at the bottom of the page although the code says its "fixed, top" any ideas?

Armani,

Did you make sure you used text file for the code? Make sure the xg-p:fixed; uses "position:fixed;", without the quotes.

Best,

Jen

A bit confused now LOL I added position but it still shows up at the bottom of the page, I copied the code from the light green area above and simply added the actual word "position" but no luck!

I need to see the live code. Link?

=)

Got it! Very nice and I modified the script so that it fits evenly under my floating share buttons! It looks really cool..so cool in fact I took a screenshot for you to see LOL thanks again! I actually went to jensocial and used the code provided there as it had the link with the correct code to add to the custom code box ;)

@Armani, Looks very nice.

=)

Good work jen

Happy you like it - - an easy breezy one. =)

How much would you charge for a custom job of at least 4 more of these floating buttons and for them to operate just as the home one does? I have an idea I want to implement now using this method, Inbox me and let me know what you'd charge for 4 more of these floating icons :)

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Kevin Kelly replied to Chris Purington's discussion 'Paid Memberships & Recurring Payments in Ning 3.0'
"That would be a great feature to add.  There's bound to be lots of small membership…"
1 hour ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"sure message me"
3 hours ago
Just Asking replied to SweetPotato's discussion 'Tip: Insert Adverts in Content after the First Paragraph'
"I just added this.  Works BEAUTIFULLY! Thanks so much for the tip!"
3 hours ago
Just Asking replied to Just Asking's discussion 'Need help defeating image crawler...'
"I will do that for the last couple.  The member is somehow still finding ones I hide on…"
4 hours ago
Just Asking replied to Just Asking's discussion 'Anybody know of virtual world or virtual pet widgets with custom private channels?'
"I actually have a couple different ones like that installed already I'm *supposed to* be…"
4 hours ago
Kos replied to Enrrico Torres's discussion 'how to reduce the http request'
"Agreed."
6 hours ago
George H. Compton IV replied to Enrrico Torres's discussion 'Please help to create a slider'
"Replace just the CSS stylesheet with this one. I think I have it all worked out for…"
7 hours ago
Elshara Silverheart replied to Shruti Shah's discussion 'Sign up problem'
"I seen that somewhere two on another site, not sure what it means."
7 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service