JQuery clone elements

TASK:
Clone DOM elements.

SOLUTION:
Use .clone() and .appendTo().

EXPLANATION:

In the following example we copy DOM element ".from_to_copy" to ".where_to_copy" without typed data and without javascript's bindings.

JQuery

$(".from_to_copy").clone().appendTo(".where_to_copy");

In this example we copy DOM element with data typed and javascript's bindigs.

JQuery

$(".from_to_copy").clone(true).appendTo(".where_to_copy");

Just change default ".clone()" to ".clone(true)".

JQuery detection of browser

TASK: 
Fix something or do special instructions according to browser type.
SOLUTION: 
Use the flags of $.browser:

• $.browser.webkit
• $.browser.safari (deprecated) 
• $.browser.opera
• $.browser.msie
• $.browser.mozilla

Also, we can detect version of browser using $.browser.version

Jquery.browser and $.browser are synonymous.

EXAMPLE: 

JQuery

if ($.browser.mozilla)
{
alert("The browser is mozilla");
}

JQuery

if ($.browser.msie)
{
alert("The browser is Internet Explorer, version:" + $.browser.version);
}

JQuery select element at index n

TASK:
Select the element at index n within the matched set.


SOLUTION:
$(".example:eq("+index+")").css("color", "red");

EXAMPLE:
Select element at index 1 and set css property "color" to "red":

JQuery

var index=1;
$(".example:eq("+index+")").css("color", "red");

HTML

<div class="example">div index 0</div>
<div class="example">div index 1</div>
<div class="example">div index 2</div>

JQuery index of element

TASK:
Recognize index of element in group on which we clicked.
SOLUTION: 
$("#parent child").index(this);
EXAMPLE:

JQuery

$(document).ready(function() {

    $("#example div").click(function() {
        var index = $("#example div").index(this);
        $("#example_index").html("Index " + index + " was clicked");
    });

});

HTML

<div id="example">
    <div>div index 0</div>
    <div>div index 1</div>
    <div>div index 2</div>
    <div>div index 3</div>
    <div>div index 4</div>
</div>
<div id="example_index">Click one of the above divs</div>

HTML IE conditional comments

TASK: 
Tell special instructions for IE.

SOLUTION: 

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

EXPLANATION: 

1. Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
2. Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
3. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

The syntax I use is:

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->


<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->


<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->


<!--[if gte IE 6]>
According to the conditional comment this is Internet Explorer 6 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->


<!--[if lte IE 6]>
According to the conditional comment this is Internet Explorer lower or equal to 6<br />
<![endif]-->


<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

Note the special syntax:

• gt: greater than
• gte:greater than or equal to
• lt:less than
• lte: less than or equal to

CSS underline

Task: 
Change space between word and bottom line in link element (<a></a>).

Solution: 
a {
padding-bottom: 10px; //space between word and line
color: #555;
text-decoration: none;
border-bottom: 1px solid #555;
}