Open In App

jQWidgets jqxColorPicker height Property

Last Updated : 30 Jul, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker.

The height property is used to set or return the height of the color picker. It accepts the number or string type value and its default value is null.

Syntax:

Set the height property.

$("selector").jqxColorPicker({height: 300});

 

Return the height property.

var height= $("selector").jqxColorPicker('height');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />

<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcolorpicker.js”></script>

Example: The below example illustrates the jqxColorPicker height property in jQWidgets.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
        "jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxcolorpicker.js"></script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>
            jQWidgets jqxColorPicker height Property
        </h3>
  
        <div id='jqxCP'></div>
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxCP").jqxColorPicker({ 
                width: 350, 
                height: 300
            });
        });
    </script>
</body>
  
</html>


Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcolorpicker/jquery-colorpicker-api.htm



Similar Reads

jQWidgets jqxColorPicker disabled Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The disabled property is used to enable or disable the color picker. It accept
1 min read
jQWidgets jqxColorPicker showTransparent Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The showTransparent property is used to set or return the showTransparent p
1 min read
jQWidgets jqxColorPicker width Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The width property is used to set or return the width of the color picker.
1 min read
jQWidgets jqxColorPicker colorMode Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The colorMode property is used to set or return the color mode. It accepts str
1 min read
jQWidgets jqxColorPicker getColor() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The getColor() method is used to return the color in hex or rgb format. It
2 min read
jQWidgets jqxColorPicker setColor() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The setColor() method is used to set the color in hex or rgb format. It acc
2 min read
jQWidgets jqxColorPicker Complete Reference
The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The created color picker can be used to select the color from this widget in RGB or Hexadecimal format. Property: jQWidgets jqxColorPicker colorMode PropertyjQWidgets jqxColorPicker disabled PropertyjQWidgets jqxColorPicker height PropertyjQWidgets jqxColorPicker
1 min read
jQWidgets jqxColorPicker colorchange Event
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxColorPicker widget is a jQuery UI widget that is used to create a color picker. The colorchange event is used to trigger when a new color is picked from th
2 min read
HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
How to force child div to be 100% of parent div's height without specifying parent's height?
When designing a website, you may want to create a layout where a child div element fills up the height of its parent div element. However, you may not know the exact height of the parent div element and you don't want to specify it. In this article, we will explore different approaches to force a child div element to be 100% of its parent div elem
4 min read