jQuery Sexy Tools Textarea
So I love beutiful forms that look and act identically, regardless of which browser you are on. in an effort to bring sanity to the forms world I have started to construct "Sexy Tools." The basic concept below is to have a jQuery based liquid textarea that uses background CSS images to make a basic textarea look good.
HTML Code Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sexy Tools Textarea jQuery</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/textarea-file.js"></script>
</head>
<body>
<textarea class="default" style="width:580px;height:180px;"></textarea>
</body>
</html>
JQUERY Code Example:
$(function(){
$('textarea.default').each(function(index) {
// HTML Structure
/*
<div class='textarea-container'>
<div class='textarea-top'><div class='top-left'></div><div class='top-center'></div><div class='top-right'></div></div>
<div class='textarea-center'>
<div class='center-left'></div>
<div class='center-center'>
<textarea class='default' style='width:580px;height:180px;'></textarea>
</div>
<div class='center-right'></div>
</div>
<div class='textarea-bottom'><div class='bottom-left'></div><div class='bottom-center'></div><div class='bottom-right'></div></div>
</div>
/*
// Wrap The Textarea
$("textarea.default").wrap("<div class='textarea-container'>").after("</div>");
$("textarea.default").wrap("<div class='textarea-center'>").after("</div>");
$("textarea.default").wrap("<div class='center-center'>").after("</div>");
$(".center-center").before("<div class='center-left'></div>").after("<div class='center-right'></div>");
$(".textarea-center").before("<div class='textarea-top'><div class='top-left'></div><div class='top-center'></div><div class='top-right'></div></div>");
$(".textarea-center").after("<div class='textarea-bottom'><div class='bottom-left'></div><div class='bottom-center'></div><div class='bottom-right'></div></div>");
// Adjust widths based on textarea width
$(this).each(function(index) {
var textareaWidth = $(this).width();
$(this).closest(".textarea-container").css({ "width": textareaWidth + 36 });
$(this).closest(".textarea-container").children().children(".top-center, .bottom-center, .center-center").css({ "width": textareaWidth + 20 });
$(this).closest(".textarea-container").children(".textarea-container, .textarea-top, .textarea-bottom, .textarea-bottom").css({ "width": textareaWidth + 36 });
});
// Adjust heights based on textarea height
$(this).each(function(index) {
var textareaHeight = $(this).height();
$(this).closest(".textarea-container").children().children(".center-left, .center-center, .center-right").css({ "height": textareaHeight +20 });
});
// Add the class focus
$(this).focus(function () {
$(this).addClass("focus");
$(this).closest(".textarea-container").addClass("focus");
});
// Remove the class focus on blur
$(this).blur(function () {
$(this).removeClass("focus");
$(this).closest(".textarea-container").removeClass("focus");
});
});
Explanation:
To begin, I am assuming that if you are reading this you have some decent understanding of CSS and Javascript, if you don’t you are welcome to contact me.
To start off, what is going to happen is we are going to use jQuery to wrap HTML around every textarea with the class of "default." Next we are going to use CSS to place background images into the wrapping Divs that will automatically adjust the height and width based on the height and width set for that individual textarea. For this instant I have attached a style to this textarea for the purpose of an example("<textarea class='default' style='width:580px;height:180px;'></textarea>" ). What I would recommend is to set the height and width in the CSS.
Note: jQuery 1.5 variants have a wrap bug for IE9. If you are stuck in 1.5 I would recommend not using the wrap function and just put the HTML structure in the HTML markup. It has more HTML noise and is negative for SEO, but that is compromise.
Inside of the js file I have placed a comment called "// HTML Structure" that shows you the markup structure of how this works. And the section "// Wrap The Textarea" shows you the jQuery wrap that is done to produce that HTML structure. In a nut shell I have a parent container called "textarea-container" inside of that I place "textarea-top" to place the top corners and the top-center, of which "top-center" expands the width of the textarea to repeat-x. Next I have used "textarea-center" to place the repeating vertical images that repeat-y with the height. Lastly I place "textarea-bottom" on the bottom that does the same thing as textarea-top but on the bottom.
If you look at the beginning of the function you will see "$('textarea.default').each(function(index) {." This says each time I see a textarea with the class of default, do the following function for every one I see when the document is ready.
Lets now go to the comment "// Adjust widths based on textarea width." What is going on here is that we are making a variable to look at textarea.default’s width and store it as "textareaWidth" ("var textareaWidth = $(this).width();"). Once we do that we call "textareaWidth" in the following three lines to change the CSS width of each container plus a specified number of 20 or 36 to deal with spacing issues.
The next section "// Adjust heights based on textarea height" does the same concept as "// Adjust widths based on textarea width", but for the height.
The next section "// Add the class focus" adds a class of "focus" which switches the background images in the CSS that makes the textarea to appear to glow.
The last section "// Remove the class focus on blurs" removes the class of "focus" which switches the background images in the CSS back to the normal images.