Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

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
0
Mike Eghtebas
Asked:
Mike Eghtebas
  • 2
2 Solutions
 
käµfm³d 👽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
 
leakim971PluritechnicianCommented:
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now