Category Archives: Jquery

.outerHeight() method in Jquery

November 12, 2016 Thiyagu 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

November 12, 2016 Thiyagu 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

November 12, 2016 Thiyagu 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

November 3, 2016 Thiyagu 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

November 3, 2016 Thiyagu 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

November 3, 2016 Thiyagu 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
state	It 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

October 26, 2016 Thiyagu 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.

Jquery

.hasClass() method in Jquery

October 19, 2016 Thiyagu Leave a comment

Description:

The Jquery hasClass() method validate whethere selected elements having a specified class name or not. If selected elements has matched class name then it will return “true” else it will return “false”.

Syntax

.hasClass( className )

className

It specify the class name to search whether its present or not

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("#divAdd").click(function () {

 if ($("#divBox1").hasClass("sqBoxOdd")) {
 $("#divBox1").addClass("selected");
 }
 if ($("#divBox2").hasClass("sqBoxOdd")) {
 $("#divBox2").addClass("selected");
 }
 if ($("#divBox3").hasClass("sqBoxOdd")) {
 $("#divBox3").addClass("selected");
 }
 if ($("#divBox4").hasClass("sqBoxOdd")) {
 $("#divBox4").addClass("selected");
 }
 });
 });

 </script>
 <style type="text/css">
 .selected {
 background-color: #ff6a00 !important;
 }

 .sqBoxOdd {
 display: inline-block;
 margin: 20px;
 width: 80px;
 height: 80px;
 left: 10px;
 top: 10px;
 background-color: #4CAF50;
 }

 .sqBoxEven {
 display: inline-block;
 margin: 20px;
 width: 80px;
 height: 80px;
 left: 10px;
 top: 10px;
 background-color: #4CAF50;
 }
 </style>

</head>
<body>
 <button style="margin: 20px;" id="divAdd">Add CSS Class</button><br />
 <div id="divBox1" class="sqBoxOdd"></div>
 <div id="divBox2" class="sqBoxEven"></div>
 <div id="divBox3" class="sqBoxOdd"></div>
 <div id="divBox4" class="sqBoxEven"></div>
</body>
</html>

Output:

On clicking “Add CSS Class” button then the “if” condition will execute and append the “selected” class to the matched div. The CSS class will append only if it receive true from the .hasClass() method.

Jquery

addClass() method in Jquery

October 18, 2016 Thiyagu Leave a comment

Description:

The Jquery addClass() method add the specified class(s) for the matched/selected elements. If we need to add more than one class then we need to use Space as the separate between the class names. It does not remove existing class attributes in the element, it only adds one or more class names to them.

Syntax

.addClass( className )
.addClass( function )

className	It specify the class name to add for the selected element. More than one class will be included by using the space as separator.
function	A function returning one or more space-separated class names to be added to the existing class name. The function accept two arguments as parameter, one is the index position of the element and second is the existing class name.

Note :

To set multiple class(s)

.addClass({“className1 className2”});

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("#divAdd").click(function () {
 $("#divBox").css("background-color", "");
 $("#divBox").addClass("selected");
 });
 });

 </script>
 <style type="text/css">
 .selected {
 background-color: #ff6a00;
 }
 </style>

</head>
<body>
 <button style="margin: 20px;" id="divAdd">Add CSS Class</button>
 <div id="divBox" style="margin: 20px;width: 80px;height: 80px;left: 10px;top: 10px; background-color:#4CAF50"></div>
</body>
</html>

Output:

Before clicking the button “Add CSS Class” button

After clicking the “Add CSS Class” button, the “selected” class has appended to the div and back-ground color has updated from the new class as shown below.

Note:

Here is the sample code for using Function as parameter.

$( “div” ).addClass(function( index, currentClass ) {// perform action based on the index/current Class name});

Jquery

css() method in Jquery

October 15, 2016 Thiyagu Leave a comment

Description:

Jquery .css() method Get/set the css property for the matched elements.

Syntax

GET Property: .css( propertyName )
SET Property: .css( propertyName, value )

propertyName	A css property name
value	A value to set for the property

Note :

To set multiple value, the syntax will be

.css({“propertyname”:”value”,”propertyname”:”value”,…});

GET CSS Property value :

It will return the value for specified CSS property value for the matched element

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("button").click(function () {
 alert("Background color = " + $("#divBlogName").css("background-color"));
 });
 });

 </script>

</head>
<body>
 <h2>Jquery .css() Method </h2></br>
 <div id="divBlogName" style="background-color:#00ff21">This is dotnet-helpers.com</div></br>
 <button>Display the background color</button>
</body>
</html>

Output:

SET CSS Property :

It will set CSS property for the matched element.

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("button").click(function () {
 $("#divBlogName").css("background-color","#00ff21");
 });
 });

 </script>

</head>
<body>
 <h2>Jquery .css() Method </h2></br>
 <div id="divBlogName">This is dotnet-helpers.com</div></br>
 <button>Display the background color</button>
</body>
</html>

Output:

Clicking the button, the background-color porperty will set to the div(divBlogName) as shown below.

Description:

Syntax

Output:

Description:

Syntax

Example:

Output:

Description:

Syntax

Example:

Output:

Description:

Syntax

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

When to use?

Example:

Output:

Description:

Syntax

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

When to use?

Example:

Output:

Description:

Syntax

Example:

Output:

Description:

Syntax

Example:

Output:

Description:

Syntax

Example:

Output:

Description:

Syntax

Note :

Example:

Output:

Note:

Description:

Syntax

Note :

GET CSS Property value :

Example:

Output:

SET CSS Property :

Output:

Learn Powershell, AKS , Devops, jquery