Solved

jQuery use...

Posted on 2013-01-21
4
235 Views
Last Modified: 2013-01-23
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
Comment
Question by:Mike Eghtebas
  • 2
4 Comments
 
LVL 75

Accepted Solution

by:
käµfm³d   👽 earned 350 total points
ID: 38804197
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 150 total points
ID: 38805158
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
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 38806970
Thank you all. Specially to kaufmed with great explanations.

Mike
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 38811109
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

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

948 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

20 Experts available now in Live!

Get 1:1 Help Now