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://storage.ning.com/topology/rest/1.0/file/get/963872548?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;

Views: 1095

Replies to This Discussion

Cool I like it Thanks Jen

How's your week For me we are in Spring now back in Winter again gees... I don't know when to put the winter blankets away as soon as I do, I pull them out again LOL

{{{HUGS}}}

Deb

Happy you like it.

Technically Fall is here, still a little warm in Southern US States. Right now it is perfect, and one of the best times of year for walking and biking. =)

Have a great week,

Jen

So useful!! Thanks Jen. And you let me get another tip idea.

Great! Thanks Alex.

=)

My text resizer (on ieue.org) currently only appears within a module box. How do I get it like yours—or at least centered?

Hi IEUE RC,

If you want to make it look like the textsizer on JenSocial, you'll need to add the style to Custom Code box as in the tip instructions. If you've done this and it's just not working, make sure you remove the space after the "p" in the word "position". In the code I make this note:

<!-- 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. -->

 

If you want to keep it displayed within Text Box, and just want to center it, look at your code in text box by editing and clicking on HTML button. Add align=center to your DIV.

 

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

Best Regards,
Jen

ALERT!!!!!!!!

As of approximately 1 week ago, it was brought to my attention that JenSocial buttons 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

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips