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

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

Latest Activity

Paul Corona replied to Suzie Nielsen's discussion 'Watching Cultivating videos- have questions!'
"So many folks were asking the same questions that I thought actually showing them the basics of the…"
1 hour ago
Chris replied to JFarrow's discussion 'Ning Emails Going to Spam?'
"Nope, had all the answers: "it's not a bug", "it is a bug and has been…"
2 hours ago
Larry Matthews replied to Larry Matthews's discussion 'Photos'
"www.dismyhood.com I need to enlarge images on mouseover, on the activity feeds. There is a feed for…"
2 hours ago
Fabio replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'
"F A N T A S T I C !!!!! well done guys"
2 hours ago

NC for Hire
Jen replied to Jen's discussion 'Jen's Running List - Updated 4/6/2013' in the group The Sandbox
"Hi Allison, I have a Client who needs the Search feature. Any updates? I don't see any Search…"
3 hours ago

NC for Hire
SweetPotato replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'
"not consistently for all browsers, think SE tried it with mixed results. SP"
3 hours ago
Riccardo Rossini replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'
"Sp, can I style also the scroll bar of the browser?"
3 hours ago
Dustin Craig replied to John Bizley's discussion 'Show Your Ning 3.0 Sites'
"Appreciate the tip! I probably won't add this to my current site, but it might be a nice touch…"
4 hours ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service