Javascript recursion example

Everyone loves(or should i say ‘gets intimidated by’?) Recursion. But it can be confusing to begin with. So here’s an example of recursion ( in javascript ) to show how recursion can be used to solve real problems in real projects 😉 . The code below is an altered code from one of my projects. Although its in javascript, the basic principle is same and can be easily reproduced in any other language of your choice.

Hope it helps..

textbox watermark text effect

What is it

click on the textboxes below:



Add watermark text effect to your textbox and textarea controls. Texboxes will show default text to begin with. When the textbox gains focus, the default text goes off, user types in his own text and that persists. If user doesn’t type in anything and moves on to other parts of your web page, your textbox again show the default text.

How to achieve that

I’ve written this small javascript which renders the said effect to textboxes and textareas. To set things up all you need to do is:

  1. give the textboxes/textareas an additional class of ‘js_watermark’. eg:
  2. Add the following javascript somewhere
    $(document).ready(function(){
    /*---watermark functions ------------*/
    		$(".js_watermark").each(function(){
    			$(this).after("");
    		});
    		$(".js_watermark").focus(function(){
    			var wm_text = $(this).next('.js_watermar_text').html();
    
    			if($(this).val()==wm_text){$(this).val('');}
    		});
    		$(".js_watermark").blur(function(){
    			var wm_text = $(this).next('.js_watermar_text').html();
    			if($.trim($(this).val())==""){$(this).val(wm_text);}
    		});
    		/*--------------------------------------*/
    });

The approach is simple:
once the html is loaded the javscript adds a hidden <span> tag next to each textboxes/textareas which have the class js_watermark and ‘stores’ the default values of textboxes in those spans. When you click on any textbox (gain focus event) its text is deleted. When textbox loses focus the script check if its text is blank (after trimming blank spaces), if yes it fetches the default value from the hidden span next to the textbox and sets the textboxes value with the default value again.

Hope you find it useful.

text effects – giving random size and color

link for the demo is available at the end of the artile

Text effects – random size and color

What is it

This little demo show how to give random size and colors to the words . Lets say i have a <div> or <p> tag and i want all the words inside it to acquire random size and color. At the same time i also want a choice among those colors so that it suits my websites background and all. Check the demo page (link provided at the end of the article)

The setup

Give any <div> or <p> tag a class of js_typografy

<p class='js_typografy'>

Next Add the following javascript to your page

function typografy() {
            var minSize = 15;
            var maxSize = 80;
            var colorise = true;
            var colorArray = ['#369', '#000', '#aaa'];
            $(".js_typografy").each(function () {
                var retHTML = "";
                //get the text
                var allText = $(this).text().trim().split(' ');

                //now add each word one by one
                for (i = 0; i < allText.length - 1; i++) {
                    var size = getRandomInt(minSize, maxSize);
                    size = Math.ceil(size / 10) * 10;
                    if (colorise == true) {
                        var j = getRandomInt(0, colorArray.length - 1);
                        if (j < 0) { j = 0; }
                        retHTML += " " + allText[i] + "";
                    }
                    else
                    { retHTML += " " + allText[i] + ""; }
                }
                $(this).text('');
                $(this).html(retHTML);
                
            });
        }
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        $(document).ready(function () {
            typografy();
        });

you need to change the following according to your needs

var minSize = 15;//the minimum size of font - in pixels
var maxSize = 80;//the maximum size of font - in pixels
var colorise = true;//whether you want to give random colors or not
var colorArray = ['#369', '#000', '#aaa'];//the set of colors to choose from

What it does

Basically it finds all the elements with the class ‘js_typografy’, captures there text, wraps around each word in a span tag with style attribute having randomly generated size and color.

check the demo and refresh the demo page to see the random behaviour…