This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

javascript to check css element
#1
I have some simple JavaScript to hide/show images based on group address, 
how can i check css element before making next change like the below.
Many Thanks

Code:
$(function(){
  grp.listen('1/1/1', function(object, state) {
     if (state == 'value' && object.value == true) {
     //Check if css element .hidebyknx is shown then continue    
     $(".hidebyknx").addClass("hide");
     } else if (state == 'value' && object.value == false) {
         $(".hidebyknx").removeClass("hide");
     }
  }, true);
});
Reply
#2
Why is that important? If it's already hidden it has no infuence at all to remove the class again in the DOM ..

You could check with hasClass() method
Reply
#3
The whole script can be written much shorter, but for this to work the object value must be binary (true/false).
Code:
$(function(){
   grp.listen('1/1/1', function(object, state) {
      $(".hidebyknx").toggleClass("hide", object.value);
   }, true);
});
Reply
#4
(05.07.2021, 08:09)Erwin van der Zwart Wrote: Why is that important? If it's already hidden it has no infuence at all to remove the class again in the DOM ..

You could check with hasClass() method

I have another object i am listening to (same code as above different obj) also show/hide the same vis element and I want to check if it’s hidden or not before changing etc, I will have a look at the hasClass() function thanks
Reply
#5
If you want to do a kind of AND/OR gate then you need this. Change group addresses as needed and you can change && (AND) to || (OR).
Code:
$(function(){
   var v1 = false, v2 = false;

   function set() {
      $(".hidebyknx").toggleClass("hide", v1 && v2);
   }

   grp.listen('1/1/1', function(object, state) {
      v1 = object.value;
      set();
   }, true);

   grp.listen('1/1/2', function(object, state) {
      v2 = object.value;
      set();
   }, true);
});
Reply
#6
(05.07.2021, 09:27)admin Wrote: If you want to do a kind of AND/OR gate then you need this. Change group addresses as needed and you can change && (AND) to || (OR).
Code:
$(function(){
   var v1 = false, v2 = false;

   function set() {
      $(".hidebyknx").toggleClass("hide", v1 && v2);
   }

   grp.listen('1/1/1', function(object, state) {
      v1 = object.value;
      set();
   }, true);

   grp.listen('1/1/2', function(object, state) {
      v2 = object.value;
      set();
   }, true);
});
Yes this is what i am after, works well many thanks, 

Also how can i request the value for both obj on page load? something like the below? grp.write() works for me but not grp.read() also is there a list of functions that are available in the custom js to interact with objects from the vis etc.
Code:
  $(document).ready(function() {
    grp.read('1/1/1')
    grp.read('1/1/2')
   
 });
Reply
#7
Do you really need to call read here? grp.listen executes the callback function with the current object value once the callback is registered.
Reply
#8
(08.07.2021, 06:29)admin Wrote: Do you really need to call read here? grp.listen executes the callback function with the current object value once the callback is registered.

Not really, although if I reload the page from browser I need to wait until the next callback event until the vis element is hidden again etc
Reply


Forum Jump: