Logic Machine Forum
javascript to check css element - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Scripting (https://forum.logicmachine.net/forumdisplay.php?fid=8)
+--- Thread: javascript to check css element (/showthread.php?tid=3460)

javascript to check css element - benanderson_475 - 05.07.2021

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);
});


RE: javascript to check css element - Erwin van der Zwart - 05.07.2021

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

RE: javascript to check css element - admin - 05.07.2021

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);
});


RE: javascript to check css element - benanderson_475 - 05.07.2021

(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

RE: javascript to check css element - admin - 05.07.2021

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);
});


RE: javascript to check css element - benanderson_475 - 08.07.2021

(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')
   
 });


RE: javascript to check css element - admin - 08.07.2021

Do you really need to call read here? grp.listen executes the callback function with the current object value once the callback is registered.

RE: javascript to check css element - benanderson_475 - 08.07.2021

(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