Run-of-the-mill js behaviors some folks find entertaining.

View source to see what's going on under the hood.



This is a paragraph with little content.

Holy crap! Did that sentence just vanish?!


$(document).ready(function () {
	$("p#cb1").css("display", "none")
	$("button.callback1").click(function () {
		$("p.cb1").hide("slow", function () {
			var myTimer = window.setTimeout(function () {
				$("#cb1").slideDown(250);
			}, 600);
			/*alert("The paragraph is now hidden");*/
		});
	});
});
						



$(document).ready(function() {
    $("button.callback2").click(function() {
        document.getElementById('output').innerHTML += ('going ...');
        var myTimer1 = window.setTimeout(function() {
            document.getElementById('output').innerHTML += (
                'going ...');
        }, 700);
        var myTimer2 = window.setTimeout(function() {
            document.getElementById('output').innerHTML += (
                'gone, to the gentleman in the plaid jacket!');
        }, 1400);
    });
});
							

Load the appropriate number array.

Here's the array: var list = [5, 8, 9, 2, 7, 6, 3, 1, 4];

$(document).ready(function () {
    var list = [
        5,
        8,
        9,
        2,
        7,
        6,
        3,
        1,
        4
    ];

    $("#btn2").click(function () {
        // items greater than 5
        function callback2(list) {
            var newList = [];
            for (var i = 0; i < list.length; i++) {
                if (list[i] > 5)
                newList.push(list[i]);
                }
            return newList;
            }

        function filter2(list, callback2) {
            return callback2(list);
            }

            var filtered2 = filter2(list, callback2);
            //console.log(filtered2);
            $("p.two").append(filtered2);
        });
    });
                            


Star Wars or Star Trek?

$(document).ready(function() {
    $("#btn1").click(function() {
        $("p.append").append("
Star Trek, of course.
"); }); });



Hi, this is a string of text.


$(document).ready(function() {
    var colors = [
        '#3498db',
        '#e67e22',
        '#16a085',
        '#f39c12'
        ];
    var color = 0;
        $("button.clickarray").click(function() {
            {
                color = (color == colors.length - 1) ?
                    0 :
                    color;
                    x = document.getElementById("clickarray"); // Find the element
                    x.style.color = colors[++color];
            }
    });
});
							



 $(document).ready(function() {
    $("button.closure1").click(function() {
        function pizzaParty(numSlices) {
            var topping = "spinache";
            /* Local variable */
            innerFunction = function() {
                var topping = "gorgonzola";
                document.getElementById('output6').innerHTML += (
                    " .....But put " + topping + " on " + numSlices +
                    " slices");
            };
            document.getElementById('output7').innerHTML += (
                "This pizza is all about the " + topping);
                /*console.log("This pizza is all about the " + topping);*/
                innerFunction();
            }
                pizzaParty(3);
        });
});
							



function test() {
    // Assumes: a string is entered into the "palin" text box Results: tests if the string is a palindrome and returns the conclusion to outputDiv
    var word,
        copy,
        i;
        word = document.getElementById("palin").value.toLowerCase();
            copy = "";
            i = 0;
            while (i < word.length) {
                copy = word.charAt(i) + copy;
                    i = i + 1;
            }
            console.log(copy);
            if (word === copy) {
                document.getElementById("outputDiv").innerHTML = document.getElementById("palin")
                    .value + " is a palindrome!";
            } else {
                document.getElementById('outputDiv').innerHTML = document.getElementById('palin')
                    .value + " is not a palindrome!";
            }
        }