All posts by Thiyagu

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

dotnet-helpers-jquery-position-method-thiyagu-jquery-helpers.

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:valueIt 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))
MarginIt 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,widthA 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))
includeMarginIt 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,heightA 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 .

 

Jquery

.height() method in Jquery

Leave a comment

Description:

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

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

Syntax

  • $(selector).height()
  • $(selector).height(value)
  • $(selector).height(function(index,currentheight))
Value  It specifies the height 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(“height”) & .height():

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

When to use?

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

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').height(20).css({ backgroundColor: '#4cff00' })
 $('#divCurrentHeight').text(" Current Div height is: "+ $('.defaultClass').height());
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET height() 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 .height(20) method will set height as 20 for the selected element and .height() method will GET the height of the selected div .

 

Jquery

.toggleClass() method in Jquery

Leave a comment

Description:

The jQuery toggleCLass() method is used to add or remove one or more classes from the selected elements.  In simple, the toggleClass() method checks each element for the specified class names.  If the class name is already presented for the selected element then it will remove else it will add the class.

Syntax

$(selector).toggleClass(classname,function(index,currentclass),state)

className It specify One or more class names to add/remove from the selected set. More than one class name will be separated by the empty space
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
stateIt specity the boolean value for the class should be added or removed.
add: true ,  remove: false

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .CustomClass {
 border:2px soli<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: 400px;
 height: 100px;
 background-color: #eed5b7;
 }
 .CustomClass {
 border: 5px solid #4cff00;
 font-size: 25px;
 background-color: #4cff00 !important;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCssBoard').toggleClass("CustomClass");
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Toggle CSS Class</button><br/><br />
 <div id=divCssBoard class="defaultClass">
 Welcome to dotnet-helpers.com
 </div>
</body>
</html>

Output: 

As per code,  on clicking of “Toggle CSS Class” button, the toggleClass method will verify the selected div with the “CustomClass”, if its not present then it will add the class else it will remove the class as shown below.

 

Jquery

.removeClass() method in Jquery

Leave a comment

Description:

The Jquery removeClass() method remove the css class for the matched element. It will remove single/multiple classes for each element in the set of matched elements.

Note: The removeClass method will remove all css class names from the selected elements if no parameter is specified.

Syntax

$(selector).removeClass(classname,function(index,currentclass))

className Specifies one or more class name to remove for the selected element. More than one class will be give by “space” as separator.
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

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .CustomClass {
 border:2px solid #808080;
 font-size: 30px;
 background-color: #4cff00 !important;
 }
 .defaultClass {
 border: 2px solid #808080;
 width: 400px;
 height: 100px;
 background-color: #eed5b7;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 if (this.id == "addMethod") {
 $('#divCssBoard').addClass("CustomClass", "fast")
 } else {
 $('#divCssBoard').removeClass("CustomClass", "fast")
 }
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Add Class</button>
 <button class="btnClass" id="removeMethod">Remove Class</button><br /><br />
 <div id=divCssBoard class="defaultClass">
 Welcome to dotnet-helpers.com
 </div>
</body>
</html>

Output: 

As per our code,  on clicking of “Add CSS Class” button, it will add the “CustomClass” class to the div & if we click “Remove CSS Class” button, then it will remove “CustomClass” from the div  using removeClass() method as shown below.