All posts by Thiyagu

Jquery

.prepend() method in Jquery

Leave a comment

Description:

The jQuery prepend() method is used to insert the content in the beginning of the selected elements.It will append the content as the first child of the selected element. It will app It just inverse of append() method.

Syntax

  • $(selector).prepend(content)
  • $(selector).prepend(content, function(index, html))
Content It specifies the content which need to append.
Function(index,html) It specifies the function that returns(HTML string, DOM element(s)) the content to insert.

Index: Returns the index position of the element.

HTML: Returns the current HTML of the selected element.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").prepend('<div style="color:#ff0000"> This is Newly added text');
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

Jquery

.appendTo() method in Jquery

Leave a comment

Description:

The Jquery appendTo() method is used to add additional content at the end of the selected elements. It is same like as append() method, it will add content at the end of the selected elements. The main difference is their syntax-specifically, in the placement of the target and content location.

Syntax

  • $(content).appendTo(selector)

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text <div/>').appendTo("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

Jquery

.append() method in Jquery

Leave a comment

Description:

The jQuery append() method is used to insert specified content to the end of the set of matched elements.

Syntax

  • $(selector).append(content)
  • $(selector).append(content, function(index, html))
Content It specifies the content which need to append.
Function (index,html) It specifies the function that returns(HTML string, DOM element(s)) the content to insert.

Index: Returns the index position of the element.

HTML: Returns the current HTML of the selected element.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block;
 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").append('<div style="color:#ff0000"> This is Newly added text', function (index, html) { alert("hi") });
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

Jquery

.position() method in Jquery

Leave a comment

Description:

The jquery .position() method Get the current coordinates of the first element for the matched elements, relative to the offset parent. This method does not accept any arguments.

Syntax

  • $(selector).position()

When to use?

The .position() method allows us to retrieve the current position of an element relative to the offset parent. It will be more useful if we need to place a new element near another one within the same container . It returns an object containing the top and left properties as shown below

.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 50px;
 height: 50px;
 background-color: red;
 display:inline-block;
 }
 
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 var divBoxDetail = $("#divBoxDetails");
 var position = divBoxDetail.position();
 divBoxDetail.text("left: " + Math.round(position.left) + ", top: " + Math.round(position.top));
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">GEt Position</button><br/>
 <div id="divbox1" class="defaultClass">
 </div>
 <br /><br />
 <div id="divBoxDetails"></div>
</body>
</html>

Output: 

 

Jquery

.offset() method in Jquery

Leave a comment

Description:

The offset method will Get the current coordinates of the element for the matched elements, relative to the document. It provides two methods which will set/Get the offset co-ordinates for the selected elements.

Get offset: It will returns the offset co-ordinates of the matched element.

Set offset: It will sets the offset co-ordinates of matched elements.

Syntax

  • GET : $(selector).offset()
  • SET :$(selector).offset({top:value,left:value}) , $(selector).offset(function(index, currentcoordinates))
top:value,left:value It specifies the top and left co-ordinates in pixels for SET.
Function (index,Currentcoordinates) It specifies a function that returns an object containing the top and left coordinates.

Index: It Get the index position for the selected element.

Currentcoordinates: It returns the current coordinates of the selected element.The function should return an object with the new top and left properties.

Difference between postion() and offset():

The .position() method allows us to retrieve the current position of an element relative to the parent. But the .offset() method allows us to retrieve the current position of an element relative to the document.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 80px;
 height: 80px;
 background-color: #1a80b6;
 display: inline-block;
 }
 
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 var divBoxDetail = $("#divBoxDetails");
 var offsetPosition = divBoxDetail.offset();
 divBoxDetail.text("offset left: " + Math.round(offsetPosition.left) + ", offset top: " + Math.round(offsetPosition.top));

 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">GEt Offset Position</button><br/><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <br /><br />
 <div id="divBoxDetails"></div>
</body>
</html>

Output: 

 

Jquery

.outerWidth() method in Jquery

Leave a comment

Description:

The jQuery outerWidth () method is used to GET/SET the outer width for the matched element. This will includes left and right padding but not border/margin.

  • GET outer Width: It will return the outerWidth  for the selected/matched element
  • SET outer Width: It will set the outerWidth  for the selected/matched element

Syntax

  • $(selector).outerWidth()
  • $(selector).outerWidth(value,function(Integer index, Number Width))
Margin It specify the Boolean value to include the element’s margin in the calculation.
  • False:It specifies noot to include the margin. It is a default value.
  • True:It specifies to Include the margin.
Value  It specify the number of pixels or a number along with an optional unit.
function(Integer index,width A function returning the outer width to set. Get the index position of the element in the set and the old outer width as parameter


If includeMargin set to false then the padding and border are included in the calculation; if true then the margin is also included.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 90px;
 height: 50px;
 background-color: red;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCurrentWidth').text(" Box width (no padding) : " + $('#divbox1').width());
 $('#divOuterWidth').text(" Box Outer Width (with top & bottom padding) : " + $('#divbox2').outerWidth(false));
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET OuterWidth() CSS property</button><br /><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentWidth"></div>
 <div id="divOuterWidth"></div>
</body>
</html>

Output: 

Here, width of the box is 90. So width() method will return the same width mentioned the property but innerWidth() method will add the left(10px) , right(10px) padding  and include border as well ( 5+5 = 10). S0 it return 120 as its outerWidth.

Jquery

.outerHeight() method in Jquery

Leave a comment

Description:

The jQuery outerHeight () method is used to GET/SET the inner width for the matched element. This will includes the top and bottom padding and border are always included in the .outerHeight() calculation. If the include Margin argument is set to true, the margin (top and bottom) is also included.

  • GET Outer height: It will return the outerHeight for the selected/matched element
  • SET Outer height: It will set the outerHeight for the selected/matched element

Syntax

  • $(selector).outerHeight()
  • $(selector).outerHeight( includeMargin  )
  • $(selector).outerHeight(value)
  • $(selector).outerHeight(value,function(Integer index, Number Width))
includeMargin It specify the Boolean value to include the element’s margin in the calculation.
  • False:It specifies noot to include the margin. It is a default value.
  • True:It specifies to Include the margin.
Value  It specify the number of pixels or a number along with an optional unit.
function(Integer index,height A function returning the outer height to set. Get the index position of the element in the set and the old outer height as parameter

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 90px;
 height: 50px;
 margin:10px;
 background-color: red;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCurrentHeight').text(" Box Height (no padding) : " + $('#divbox1').height());
 $('#divOuterHeight').text(" Box Outer Height (with top & bottom padding) : " + $('#divbox2').outerHeight());
 $('#divOuterHeightWithMargin').text(" Box Outer Height (Including Margin) : " + $('#divbox2').outerHeight(true));
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET OuterHeight() CSS property</button><br /><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentHeight"></div>
 <div id="divOuterHeight"></div>
 <div id="divOuterHeightWithMargin"></div>
</body>
</html>

Output: 

Here, height of the box is 50. So height() method will return the same as height mentioned as property but outerWidth() method will add the left(10px) , right(10px) padding and border 10(5+5) and return 80 as its outer height.

Jquery

.InnerWidth() method in Jquery

Leave a comment

Description:

The jQuery innerWidth () method is used to GET/SET the inner width for the matched element. This will includes left and right padding but not border/margin.

  • GET Inner Width: It will return the InnerWidth  for the selected/matched element
  • SET Inner Width: It will set the InnerWidth  for the selected/matched element

Syntax

  • $(selector).InnerWidth()
  • $(selector).InnerWidth(value)
  • $(selector).InnerWidth(value,function(Integer index, Number Width))
Value  It specify the number of pixels or a number along with an optional unit.
function(Integer index,Number height A function returning the inner height (including padding but not border) to set. The index will return the position of the element for the matched element and the Previous inner Width as arguments.



When calling .innerWidth(“value”), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 90px;
 height: 50px;
 background-color: red;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCurrentWidth').text(" Div width (no padding) : " + $('#divbox1').width());
 $('#divInnerWidth').text(" Div Inner Width (with top & bottom padding) : " + $('#divbox2').innerWidth());
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET width() CSS property</button><br /><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentWidth"></div>
 <div id="divInnerWidth"></div>
</body>
</html>

Output: 

Here, width of the box is 90. So width() method will return the same width mentioned the property but innerWidth() method will add the left(10px) & right(10px) padding  and return 110 as its innerWidth.

 

Jquery

.InnerHeight() method in Jquery

Leave a comment

Description:

The jQuery innerHeight () method is used to GET/SET the inner height for the matched element. This will includes top and bottom padding but not border/margin.

  • GET height: It will return the InneHheight for the selected/matched element
  • SET height: It will set the Innerheight for the selected/matched element

Syntax

  • $(selector).InnerHeight()
  • $(selector).InnerHeight(value)
  • $(selector).InnerHeight(value,function(Integer index, Number height ))
Value  It specify the number of pixels or a number along with an optional unit.
function(Integer index,Number height A function returning the inner height (including padding but not border) to set. The index will return the position of the element for the matched element and the Previous inner height as arguments.

When calling .innerHeight(“value”), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 90px;
 height: 50px;
 background-color: red;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCurrentHeight').text(" Div heigh (no padding) : " + $('#divbox1').height());
 $('#divInnerHeight').text(" Div Inner height (with top & bottom padding) : " + $('#divbox2').innerHeight());
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET width() CSS property</button><br /><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentHeight"></div>
 <div id="divInnerHeight"></div>
</body>
</html>

Output: 

Here, height of the box is 50. So height() method return the height mentioned in the property(that is 50) but innerHeight() method will add the top(10px) & bottom(10px) with height and return 70 as its innerheight.

 

Jquery

.width() method in Jquery

Leave a comment

Description:

The jQuery width() method is used to GET/SET the width for the selected element. In simple, width () method can be split in to two purposes

  • GET width : It will return the width for the selected/matched element
  • SET width : It will set the width for the selected/matched element

Syntax

  • $(selector).width ()
  • $(selector).width (value)
  • $(selector).width (function(index,currentwidth ))
Value   It specifies the width in px, pt, em, etc. In default it treat as px.
function(index,currentclass) A function that returns one or more class names to remove
index : Returns the index position of the matched element
currentclass : Returns the current class name of the matched element

Difference between .css(“width”) & .width():

.css( “width” ) : It will returns with unit value (for example, 200px)
.width() : It return with units less (for example, 200).

When to use?

If we need to perform some mathematical calculation based on the element’s width then we can use .width() method.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 50px;
 height: 50px;
 background-color: red;
 display:inline-block;
 }
 
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('.defaultClass').width(80).css({ backgroundColor: '#4cff00' })
 $('#divCurrentHeight').text(" Current Div height is: "+ $('.defaultClass').width());
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET width() CSS property</button><br/><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentHeight"></div>
</body>
</html>

Output: 

Clicking on button, the .width (80) method will  execute and set 80 for the selected element and .width () method will GET the width of the selected div as shown below .