Solved

jQuery use...

Posted on 2013-01-21
4
234 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 74

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 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

11 Experts available now in Live!

Get 1:1 Help Now