Custom JavaScript examples

[tecnorte]

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

If you have a background on your layout, you should add a few lines in order to fade the layout background too.
The code should be like this:

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.1);
      $(".plan").css("transition", "opacity 0.5s ease-in-out");
      $(".plan").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".plan").css("webkit-transition", "opacity 0.5s ease-in-out");
      $(".plan-background").css("opacity", 0.1);
      $(".plan-background").css("transition", "opacity 0.5s ease-in-out");
      $(".plan-background").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".plan-background").css("webkit-transition", "opacity 0.5s ease-in-out");
      $(".layout").css("opacity", 0.1);
      $(".layout").css("transition", "opacity 0.5s ease-in-out");
      $(".layout").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".layout").css("webkit-transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("opacity", 0.1);
      $(".layout-background").css("transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("webkit-transition", "opacity 0.5s ease-in-out");
    } else {
      $(".plan").css("opacity", 1);
      $(".plan-background").css("opacity", 1);
      $(".layout").css("opacity", 1);
      $(".layout-background").css("opacity", 1);
    }
  }, 500);     
});

Notice added lines:

Right at the end before the 500);
$(".layout-background").css("opacity", 1);

Before the ELSE statement
      $(".layout-background").css("opacity", 0.1);
      $(".layout-background").css("transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("-moz-transition", "opacity 0.5s ease-in-out");
      $(".layout-background").css("webkit-transition", "opacity 0.5s ease-in-out");