watch css attribute property input select - Free Download Watch For CSS/Attribute/Property/Input/Select Changes - jQuery selectWatch

Free Download Watch For CSS/Attribute/Property/Input/Select Changes – jQuery selectWatch

Posted on

This time I will share jQuery Plugin and tutorial about Watch For CSS/Attribute/Property/Input/Select Changes – jQuery selectWatch, hope it will help you in programming stack.

watch css attribute property input select - Free Download Watch For CSS/Attribute/Property/Input/Select Changes - jQuery selectWatch
File Size: 16.7 KB
Views Total: 325
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

selectWatch is a jQuery plugin for developers that watches for CSS styles, attributes, properties, and input/select values of a DOM element.

Also provides a callback function which can be used to output the old/new values when triggered.

How to use it:

1. Load the minified version of the jQuery selectWatch plugin after loading jQuery JavaScript library.

1 <script src="/path/to/jquery.slim.min.js"></script>
2 <script src="/path/to/selectWatch.min.js"></script>

2. Select the type you want to watch for. Available types:

  • element
  • attr
  • prop
  • input
  • select
01 var settings = {
02     watchType: "element"
03 };
04  
05 var settings = {
06     watchType: "attr",
07     attr: "MyAttribute"
08 };
09  
10 var settings = {
11     watchType: "prop",
12     prop: "color"
13 };
14  
15 var settings = {
16     watchType: "input",
17     timeOut: 1000
18 };
19  
20 var settings = {
21     watchType: "select",
22     timeOut: 0
23 };

3. Define the callback function.

1 function callBack(oldValue, newValue) {
2   alert("Old: " + oldValue + " New: " + newValue);
3 }

4. Attach the function to the desired element and done.

1 $("#myElement").selectWatch(callBack, settings);

Changelog:

2021-03-29