jQuery Web Page Design Tutorials

jQuery Textarea HTML Text Tutorial

This tutorial help newbies in getting started with jQuery. It shows how easy to use jQuery codes to select web page elements and work on them. In brief, the process of jQuery codes can be illustrated in the diagrams below.

jQuery Video Tutorial

Goal of jQuery Textarea Tutorial

jQuery textarea html

This jQuery example shows how to layout a HTML Textarea Field. The Menu items information will display on the Textarea in two seperate lines when mouse pointer hove over them. Finally the jQuery codes will test on both Firefox and IE.

Preliminary Ideas:

The first thought comes to mind is to layout a Textarea field on the webpage and then display the Menu Item information on it.

<textarea id="output" rows="5" cols="60"></textarea>

This jQuery tutorial firstly try to use text(0 and html() to display text on the Textarea field but only either working on Firefox or IE6. Then the final solution works on both Firfox and IE6.

The following jQuery Textarea examples are used in the video tutorial. The codes are explained very details in the video tutorial.

jQuery Textarea Text

jQuery Codes Works on Firefox But not IE

// Works on Firefox but not IE
$("#output").css( {"color": "#090"} ).
text("Left position of Menu is: " + left + "\n" + "Width of Menu is: " + width);

Test on Firefox (Success):

The Menu Items information are displayed in two lines successfully on Firefox browser as shown in the diagram below:

jQuery textarea text

Test on IE6 (Fail):

The Menu Items information are displayed in a single line on IE6 browser as shown in the diagram below:

jQuery textarea text

jQuery Textarea HTML

Then we try to use html() instead of text(), and use "<br />" instead of "\n".

jQuery Codes Works on IE But not Firefox

// Works on IE but not Firefox
$("#output").css( {"color": "#090"} ).
html("Left position of Menu is: " + left + "<br />" + "Width of Menu is: " + width);

Test on Firefox (Fail):

This time, the Menu Items information are displayed in a single line on Firefox browser as shown in the diagram below:

jQuery textarea html

Test on IE6 (Success):

Wonderfully enough! The Menu Items information are displayed in two lines successfully on IE browser as shown in the diagram below:

jQuery textarea html

jQuery Codes Works on both Firefox and IE

The final jQuery codes working on both Firefox and IE6:

1. Layout a Div layer on the webpage.

<div id="output"></div>

2. Write the jQuery codes to display the Textarea field and the Menu Item information on the Div layer.

// Works on both Firefox and IE

// Get Menu Item Information
var menuInfo = "<textarea rows=6 cols=50>" + "Left position of Menu is: " + left + "\n" +
"Width of Menu is: " + width + "</textarea>";

// Display TextArea field information on #output Div Layer
$("#output").html(menuInfo);

This is the end of jQuery Textarea HTML Text Tutorial.