jQWidgets jqxNotification hoverOpacity 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. jqxNotification represents a jQuery widget that can be used to display some notification content to the user. jqxNotification widget content can be modified according to user needs.
The hoverOpacity property is used to set or return the hoverOpacity property. i.e. this property is used to set or return the opacity of the notification while hovering. It accepts number type value and its default value is 1.
Syntax:
Set the hoverOpacity property.
$('Selector').jqxNotification({ hoverOpacity : number});
Return the hoverOpacity property.
var hoverOpacity =
$('Selector').jqxNotification('hoverOpacity');Linked Files: Download https://www.jqwidgets.com/download/ 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/jqxnotification.js”></script>
Example: The below example illustrates the jqxNotification hoverOpacity 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/jqxnotification.js"></script></head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <h3> jQWidgets jqxNotification hoverOpacity property </h3> <div id="not"> Notification </div> <script type="text/javascript"> $(document).ready(function () { $("#not").jqxNotification({ position: "top-left", opacity: 0.9, autoOpen: true, autoClose: false, hoverOpacity: 0.4, template: "info", position: 'center' }); }); </script></body> </html> |
Output:
Please Login to comment...