Solved

text area tips and tricks...

Posted on 2013-01-21
1
444 Views
Last Modified: 2013-01-21
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:
$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

Open in new window


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>

Open in new window

benice.png
0
Comment
Question by:Mike Eghtebas
1 Comment
 
LVL 14

Accepted Solution

by:
brendanmeyer earned 500 total points
ID: 38803057
$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

Open in new window


is jQuery Code not css

you will need to add the jQuery library and move the code to a <script> tag

have a look at this page
http://learn.jquery.com/about-jquery/how-jquery-works/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DHow_jQuery_Works%26redirect%3Dno
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now