jQuery Cycle Font Size Plugin Demo

HTML coding

Add an element to the page that will be used to change the font size.

<a class="changeFont" title="Increase font size" href="">increase font size</a>

Include the plugin file

Add the following underneath the jQuery script tag


<script type="text/javascript" src="jquery.cyclefontsize.js"></script>

Initiate the plugin

Initialize code



$('.changeFont').cycleFontSize({increaseEle: "#main-content p"});

Available Options

maxFontSize: (value to be supplied as string: "15px")
increaseEle: Element to apply font size change to

Demonstration

Increase Font Size of paragraphs below

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor porttitor lacus eget pretium. Quisque aliquam risus at ligula lobortis ultricies. Curabitur eu magna leo, quis ullamcorper est. Proin placerat pulvinar sem, at euismod elit vulputate scelerisque. In viverra ligula quis diam dictum convallis. Donec vitae felis mi, eget ultricies dui. Nunc bibendum neque erat, vel pharetra est. Pellentesque aliquet arcu tellus. Etiam ullamcorper nisi ante, eget aliquam nisl. Praesent a mauris in magna auctor porttitor pellentesque quis leo. Cras lacus libero, facilisis in bibendum in, lacinia eget purus. Cras eu magna augue, nec iaculis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras suscipit leo posuere orci iaculis ut lobortis enim interdum. Etiam eu velit eros, ut suscipit ligula. Ut adipiscing lacinia nisi et mattis. Etiam lacus sem, malesuada sit amet malesuada eu, congue vitae erat. Cras eleifend euismod nunc, sit amet venenatis urna ornare et. Fusce ac tellus ullamcorper nisl molestie mollis in in nisl. Quisque ultricies ligula a lorem interdum sodales.