jQuery use...

I am reading: http://css-tricks.com/textarea-tricks/

In part one:
"1. Image as textarea background, disappears when text is entered."
The code in this part 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 am trying to apply this jquery to my html code given below. But I have not been able to make it work. Upon focus on the textarea, the image has to disappear. The same should happen when user types some text into the textarea.

Question: How I can modify this code to mmake it work?

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;
}

table {
  margin-left: auto;
  margin-right: auto
}

</style>

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> -->
<script src="jquery-1.9.0.js"></script>

</head>
<body>

<script>
  $('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

 /*   $( document ).ready(function() {
 
      $("a").click(function( event ) {
 
        alert("The link will no longer take you to jquery.com");
 
        event.preventDefault();
 
      });
 
    });*/
 </script>

<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
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
 
käµfm³d 👽Connect With a Mentor Commented:
You've got a few problems. First, you're missing a couple of semi-colons; Second, your script is placed above the actual element that it is targeting. This means that a browser could (and most likely does) attempt to run the script before the input is even rendered. If there is no input available (i.e. it hasn't been rendered yet), then your script is meaningless. You can try to move the script below the target input,. or you can use the "$(document).ready" syntax to make the code wait until the document has fully loaded before it runs. Next, you are trying to use value, but for jQuery I believe you need to use the method val(). Lastly, since you put line breaks between the opening and closing <textarea> tags, this actually make the <textarea> have value. This means your if condition isn't going to work the way you think it will. Remove the line breaks and any extra space between the opening <textarea> and its closing </textarea>.

The following seems to work for me:

<!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;
}

table {
  margin-left: auto;
  margin-right: auto
}

</style>

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> -->
<script src="jquery-1.9.0.js"></script>

</head>
<body>

<script>
  $(document).ready(function() {
      $('textarea')
        .focus(function() {
            $(this).css("background", "none");
        })
        .blur(function() {
            if ($(this)[0].val() == '') {
                $(this).css("background", "url(images/benice.png) center center no-repeat");
            }
        });

     /*   $( document ).ready(function() {

          $("a").click(function( event ) {

            alert("The link will no longer take you to jquery.com");

            event.preventDefault();

          });

        });*/
    });
 </script>

<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

0
 
leakim971Connect With a Mentor PluritechnicianCommented:
Test page : http://jsfiddle.net/dQUDh/
Using :
	$('textarea').focus(function() { 
        $(this).css({
            "background-image":"none", 
            backgroundPosition:"initial initial", 
            "background-repeat":"initial initial"
        });
	}).blur(function() {
        if ($.trim($(this).val()) == '') {
            $(this).css({
                "background-image":"url(http://blog.experts-exchange.com/wp-content/uploads/2012/09/ee_logo.png) ", 
                backgroundPosition:"center center", 
                "background-repeat":"no-repeat"
            });
  		}
    });

Open in new window

0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you all. Specially to kaufmed with great explanations.

Mike
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Feedback to kaufmed,

1. missing a couple of semi-colons;
I wasn't sure which ;s are missing. But it worked without changing any ;

2. Second, your script is placed above the actual element that it is targeting...
Good point. This is what I needed.

3. trying to use value, but for jQuery I believe you need to use the method val().
.value == '' works also.

4. you put line breaks between the opening and closing <textarea> tags, this actually make...
The breaks didn't make any difference. Of course, it enters all blank spaces and line returns to the textarea upon focus which forces the user to clear them before typing. So it is a good idea to avoid breaks.

Thanks,

Mike
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.