Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Jquery to change text between normal and vertical

Jquery to change text between normal and vertical

Problem

I am creating a custom graduation stole configurator. In this configurator a customer can enter a line of text like "Class of 2004". I need to have a button that changes the text between two formats...

  1. Standard Orientation which would just be: Class of 2004

  2. Vertical Orientation which would be:

C

l

a

s

s

o

f

2

0

0

4

What would be the best way to do this where I can swap back and forth between the two orientations? My idea was to save the original orientation somewhere in a hidden div so I could recall it at any time and then when they click the vertical text button, convert spaces to "

" and then add a single
between every character. It sounds like a kind of hacky way to do it so I'm trying to figure out how other people would do it. Need it to work with IE8+ too.

Problem courtesy of: Daniel White

Solution

One approach would be with the Jquery plugin lettering.js. This plugin wraps each letter (or word) in a span, and allows you to manipulate text by individual words or letters...

So, you can do this, and just use jquery to toggle clear:both, or some such thing on each letter.

Here's a jsfiddle example

Solution courtesy of: Zach Lysobey

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Jquery to change text between normal and vertical

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×