Custom JavaScript examples

[khalil]

Hi,

Sorry, i tested with only 1 widget and then it works, but when having more then 1 widget i does not work (:

Here is a updated version for multiple widgets:

Code:

$(function(){
   setInterval(function() {
    var WidgetVisible = false;
    $('.layer-widget').each(function( index, element ) {
      if ( $(this).is(':visible') == true) {
        WidgetVisible = true;
      }
    });
    if (WidgetVisible == true){     
      $(".plan").css("opacity", 0.4);
      $(".plan").css("transition", "opacity 1s ease-in-out");
      $(".plan").css("-moz-transition", "opacity 1s ease-in-out");
      $(".plan").css("webkit-transition", "opacity 1s ease-in-out");
      $(".plan-background").css("opacity", 0.4);
      $(".plan-background").css("transition", "opacity 1s ease-in-out");
      $(".plan-background").css("-moz-transition", "opacity 1s ease-in-out");
      $(".plan-background").css("webkit-transition", "opacity 1s ease-in-out");
      $(".layout").css("opacity", 0.4);
      $(".layout").css("transition", "opacity 1s ease-in-out");
      $(".layout").css("-moz-transition", "opacity 1s ease-in-out");
      $(".layout").css("webkit-transition", "opacity 1s ease-in-out");
    } else {
      $(".plan").css("opacity", 1);
      $(".plan-background").css("opacity", 1);
      $(".layout").css("opacity", 1);
    }
  }, 500);     
});

The 500 refers to the interval, every 0.5 seconds the browser non stop checks for any open widgets.

BR,

Erwin

thanks for this good JS
how to make the background read-only, means if I click outside the widget -where there are lights, shutters,....- the widget will close and nothing will be changed in the background
Please see the attached Built-in 251.600 6 byte DALI RGBW object widget

any idea @ admin