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

[Jen]

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

[solo]

thanks Jen

[Woody13]

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

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

[Jen]

Good deal!

[Armani Rouse]

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

[Jen]

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

[Armani Rouse]

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!

[Jen]

I need to see the live code. Link?

=)

[Armani Rouse]

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 ;)

[Jen]

@Armani, Looks very nice.

=)

[irfan khan]

Good work jen

[Jen]

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

[Armani Rouse]

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 :)