Solved

jQuery use...

Posted on 2013-01-21
4
241 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 34

Author Comment

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

Mike
0
 
LVL 34

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

691 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