Jquery function to Generate Random font Size & Color Anchor Tags

Jquery function to Generate Random font Size & Color Anchor Tags

While displaying many links together to make them more attractive we want to add text effects like random font size & colors to the anchor tags. Mannually it can be done by using Style sheet but it is more programmer friendly if we use programming technique to decorate the links.


In the below example I have many links inside a div with id links. Using Jquery in document.ready() method I am locating all the links inside the div & applying random font size & color to each anchor tags. randomNumberGenerator() function generates random number for font size in between the min & max values. To apply style over anchor tags I am using css() method from Jquery. Look at the example below.

To run this example Copy the code to a Notepad file & Save it as a html file. Here to refer Jquery library I used Jquery CDN link. While running this app be sure you are with Internet Connectivity.

Example to Generate Random font Size & Color

<!Doctype html>
<title>Tag like Anchor Tags using Random Font Size & Color</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {

/*Colors you need to add for your anchor tags*/
var colors = ['red', 'green', 'blue', 'orange', 'gray'];

/*Minimum & Maximum font Size*/
var minFontSize = 10;
var maxFontSize = 40;

/*Finding all the links inside a Div*/
$('#links').find('a').each(function(e) {
/*Applying font size*/
$(this).css("fontSize", randomNumberGenerator(minFontSize, maxFontSize));
/*Applying font color*/
$(this).css("color", colors[Math.floor(Math.random() * colors.length)]);

/*Random Number Generator function*/
function randomNumberGenerator(min,max)
return Math.floor(Math.random()*(max-min+1)+min);
<div id="links">
<a href="http://jharaphula.com/category/health-tips">Health Tips</a>, <a href="http://jharaphula.com/category/beauty-tips">Beauty Tips</a>, <a href="http://jharaphula.com/category/celebrity">Celebrity</a>, <a href="http://jharaphula.com/category/kids">Kids</a>, <a href="http://jharaphula.com/category/recipes">Recipes</a>, <a href="http://jharaphula.com/tag/effective-tips">Effective Tips</a>, <a href="http://jharaphula.com/category/blog">Our Blog</a>, <a href="http://jharaphula.com/category/women">Women</a>, <a href="http://jharaphula.com/tag/how-to" style="">How to</a>, <a href="http://jharaphula.com/tag/skin-care-tips">Skin Care Tips</a>, <a href="http://jharaphula.com/category/business">Business</a>, <a href="http://jharaphula.com/category/career">Career</a>, <a href="http://jharaphula.com/tag/breast-care">Breast Care</a>, <a href="http://jharaphula.com/category/real-estate">Real Estate</a>, <a href="http://jharaphula.com/category/romance">Romance</a>, <a href="http://jharaphula.com/category/seo-tips">SEO Tips</a>, <a href="http://jharaphula.com/tag/loan">Loan</a>, <a href="http://jharaphula.com/tag/makeup-tips">Makeup Tips</a>, <a href="http://jharaphula.com/tag/couples-guide">Couples Guide</a>, <a href="http://jharaphula.com/tag/high-pr-backlinks">High PR Backlinks</a>, <a href="http://jharaphula.com/tag/home-remedy">Home Remedy</a>,<br /><a href="http://jharaphula.com/tag/hosting">Hosting</a>, <a href="http://jharaphula.com/tag/insurance">Insurance</a>, <a href="http://jharaphula.com/tag/interview-questions">Interview Questions</a>, <a href="http://jharaphula.com/category/stories">Stories</a>, <a href="http://jharaphula.com/category/programming">Programming</a>, <a href="http://jharaphula.com/tag/marketing">Marketing</a>, <a href="http://jharaphula.com/tag/personal-computer">Personal Computer</a>, <a href="http://jharaphula.com/tag/pregnancy">Pregnancy</a>