Update: April 18, 2012

ALERT!!!!!!!!

As of approximately 1 week ago, it was brought to my attention that some of the input/submit buttons on JenSocial were not working in IE9. For example, the SEND button in private messages would not work. After a week of nightmare troubleshooting, it appears that something that has changed recently on the Ning platform is conflicting with this code.

If you are using this code, please check your site in IE9, send a private message and see if the SEND button works. If not, remove code from your site.

My sincere apologies this has happened. It's rare, but occasionally these things happen.

Best Regards,

Jen

Add a Text Sizer Feature For Site Users - A+ Larger Font | A- Smaller Font

Credits: The script originated here: Document Text Sizer- Copyright 2003 - Taewook Kang. All rights reserved. Coded by: Taewook Kang of http://www.txkang.com. And formatted for Ning by http://JenSocial.com.

This is a sweet little tip that should add a Text Sizer feature to enable your site members and visitors to change the text font size on your website pages. This is especially nice for users who cannot read small text, or those late nights when our eyes get tired. =)

It's nothing elaborate, no cookies and has to be clicked each time you change pages. But, it should be a welcome feature by your site users, and for those who do not want to change font-size via their browsers.

Instructions:

• I don't want to load more into Custom Code Box, and this will load faster if we add to a text box that is displayed on all pages.
• Add a new Text Box to your Site via: My Network/Settings/Features Layout.
• Drag/drop new Text Box from far left column, to narrow column that will show on all pages. Be sure you drag to top of grid to display on all pages.
• Go to home page, and click on Edit button for your New Text Box.
• Click on HTML Button.
• Copy/paste following code - use code from text file, please.
• Save, and your Done.

Code:

<style>
<!-- In first line of code below, I have added a space after the letter p in the word position, because the Ning platform strips this attribute (for Security Reasons). This is why it's best to use the code in text file below. -->

.textsizer {p osition:fixed;top:30px;right:10px;}

.textsizer a {font-weight:bold;text-decoration:none!important;font-size:26px;}

</style>

<script type="text/javascript" src="http://api.ning.com/files/1nllk9brBTvEBdFxgFbVjIL3v14wOEWAZfYblrh*BUnY4ZFIbveBbGI*gHg08ZzhYFG9B6d6xpQU5SLL0lUXWdXgAXhEGKZ2/textsizer.js">

</script>

<div class="textsizer"><a href="javascript:ts('body',1)">A+</a><a href="javascript:ts('body',-1)">/a-</a></div>

TextSizer.txt - Please use code from Text File.

Tips:

• The reason I went with a simple A+/a- to indicate this feature, it to save on room for lower resolutions. This way, I don't have to be concerned with the indicators covering an Ad or Logo on lower resolution screens. You can change the link text for A+ and a- to anything you want. I suggest going with something similar as the example code.
• On lower resolutions, keep in mind the A+/a- will move to left. Either allow for this space, or remove .textsizer { p osition:fixed;top:30px;right:10px; }, and just add the feature directly to your text box.

Enjoy!

UPDATE: Dreadlockssite experienced the A+/a- being hidden behind modules. If you experience the same, add z-index:9; to

.textsizer {z-index:9!important;