To make text in TextArea selectable onclick of mouse

I am very sure most know about this and is a very simple thing. But as I have found sometimes that small things are the one which are missed.

So wanted a quick note on – How to make the text inside a textarea selectable on mouse click.

Well, we use the Javascript event system
[def: An event in Javascript is something that happens with or on the web page ].

Specifically we use the onclick Event to achieve the above stated goal. onClick applies to buttons (submit, reset, and button), checkboxes, radio buttons, and form upload buttons.

This is how we do it:

<textarea rows="3" cols="43" name="none" onclick="this.select();">This is the text which when clicked on will get selected</textarea>

The main syntactic sugar here is the “onclick=”this.select();”

Here the “this” helps us to access the textarea object and then we fire the DOM event “select()”
dynamically on it, which in turns selects the text inside the textarea.
ciao until next time 🙂

How to use “position:relative” in CSS

First the definition of CSS position Property:

“The position property places an element in a static, relative, absolute or fixed position.”

“We can also say that the CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element’s content is too big to fit in a specified area.”

CSS properties can also be dynamically changed with a JavaScript. The syntax is as follows:

object.style.position="absolute"

Example:

h1
{
position:absolute;
left:100px;
top:150px;
}

Possible Values for the “position” property:

static:
This is Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations).
Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#div-1 {
position:static;
}

relative:
An element with position: relative moves an element relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position.
Let’s move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {
position:relative;
top:20px;
left:-40px;
}

absolute:
An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.
Let’s move div-1a to the top right of the page:

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

fixed:
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

An excellent online resource to further understand it is here

Another thing related to CSS positioning is : float
We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we can use it for more complex layout tasks.

#div-1a {
float:left;
width:200px;
}