Mike Eghtebas
asked on
text area tips and tricks...
I am reading: http://css-tricks.com/textarea-tricks/
In part one:
"1. Image as textarea background, disappears when text is entered." the second screen code is:
I have placed this in css section in the code below but it doesn't work. It doesn't work because after I enter some text to the textarea control and exit it, the image "Be nice!" still is seen?
Question: What do I need to do for the image disappear once I enter some text into the text area?
I know with html5 place holder is the best for this purpose. But I want to handle the image and make sure I am correct in placing this code in css section.
Thank you.
-----------
In part one:
"1. Image as textarea background, disappears when text is entered." the second screen code is:
$('textarea')
.focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });
I have placed this in css section in the code below but it doesn't work. It doesn't work because after I enter some text to the textarea control and exit it, the image "Be nice!" still is seen?
Question: What do I need to do for the image disappear once I enter some text into the text area?
I know with html5 place holder is the best for this purpose. But I want to handle the image and make sure I am correct in placing this code in css section.
Thank you.
-----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Border Maker</title>
<style type = "text/css">
h1, h2, h3 {
text-align:center;
}
textarea, button {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
background: url(images/benice.png) center center no-repeat; /*This ruins default border */
border: 1px solid #888;
$('textarea')
.focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });
}
table {
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<h1>Border Maker</h1>
<h3>Demonstrates how to read HTML form elements</h3>
<form method = "post"
action = "borderMaker.php">
<div id = "input">
<h3>Text to modify</h3>
<textarea name = "basicText"
rows = "10"
cols = "40">
</textarea>
</div>
<table border = "2">
<tr>
<td><h3>Border style</h3></td>
<td colspan = "2"><h3>Border Size</h3></td>
</tr>
<tr>
<td>
<select name = "borderStyle">
<option value = "ridge">ridge</option>
<option value = "groove">groove</option>
<option value = "double">double</option>
<option value = "inset">inset</option>
<option value = "outset">outset</option>
</select>
</td>
<td>
<select size = "5"
name = "borderSize">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "5">5</option>
<option value = "10">10</option>
</select>
</td>
<td>
<input type = "radio"
name = "sizeType"
value = "px"
checked = "checked" />pixels<br />
<input type = "radio"
name = "sizeType"
value = "pt" />points<br />
<input type = "radio"
name = "sizeType"
value = "cm" />centimeters<br />
<input type = "radio"
name = "sizeType"
value = "in" />inches<br />
</td>
</tr>
</table>
<div>
<button type = "submit">
show me
</button>
</div>
</form>
</body>
</html>
benice.png
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.