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

[Jen]

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.

 

I haven't been able to add a good tip to Creators in quite some time, due to busy schedule. So hoping you all really enjoy this one. 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="https://storage.ning.com/topology/rest/1.0/file/get/11385213?profile=original">
</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;

[Bernard Lama]

Nice add on...This will help those people who have weak eye sights...

[Caribso]

What would Ning be without someone like you Jen on the same breath Tj.... Very good idea Jen.

Thanks for sharing

[Jen]

Glad you Guys like it. Agree. TJ is awesome!

[Agosthina]

great tip!

[Jen]

Happy you liked it.

=)

[John]

I found that sometimes a z-index of 9 is not enough to keep an element above all others.

.textsizer {z-index:9999!important;   should do the trick

 

[Jen]

Yep, 9999 is safer. I couldn't find a case where z-index was needed, just added that statement due to a member stating he needed it.

=)

[Klaus]

Hi

I experience the same as Dreadlockssite.But am not sure where to put the  z-index:9;   I do not understand to put it here   .textsizer {z-index:9!important;

 

Maybe you can show the code when it is done, thanks.

 

best regards

 

 

[Klaus]

Do not think about it...I found out :-)

[J.Pedro Henriques]

Thank you Jen

 

J.Pedro