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.

decorating-anchor-tag

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>
<html>
<head>
<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);
}
});
</script>
</head>
<body>
<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>
</div>
</body>
</html>