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 whether you accept or reject these cookies being set.

Custom JavaScript examples
Hi,

I need to hide some buttons depending on active user. I've seen examples where to use "hide" property on object change so, can I get user logged some way?

Thank you
Reply
Hi,

Erwin wrote a really nice JS as follows: "Another nice custom Javascript feature: Back to startpage after x seconds when there is no user input" earlier in this thread.

I would like to accomplish something similar, but have it close any popups (widgets) that are open on the startpage. In other words, if the current page IS the Startpage, but a widget is open (covering a large section of the Startpage), I would like that widget to closeout after x seconds. Can we do that? It could be as part of the script referred to above, or perhaps a separate script that closes widgets after n seconds.

Also, really sweet, would be the ability to fade the underlying screen when a widget pops up, to give extra prominence to the widget (i.e. to direct the user obviously to the widget). Can that be done?

Thanks for the great help on this forum by all. I will turn into a contributor soon as I get more competence!

Thanks!
Reply
Hi,

I think you are looking for this: https://forum.logicmachine.net/showthrea...1#pid10711

For the fading on active widget you can try this:

Code:
$(function(){
   setInterval(function() {
    $('.layer-widget').each(function( index, element ) {
      if ( $(this).is(':visible') == 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"); 
      } else {
        $(".plan").css("opacity", 1);
      } 
    });
  }, 500);     
});


BR,

Erwin
Reply
Hi Erwin,

Thanks for your prompt response, as always! I didn't manage to get your fading background JS to work. Have you tried it? Also, what does the 500 refer to?

Just so I explain myself properly, I have two images below - one without the widget, and one with the widget. You can see that when the widget is displayed, everything in the background fades.

I will try the auto-closing widgets thread tomorrow.

Thanks.


Attached Files Image(s)
       
Reply
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
Reply
(11.10.2019, 19:46)Erwin van der Zwart Wrote: 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:
<your code above>
The 500 refers to the interval, every 0.5 seconds the browser non stop checks for any open widgets.

BR,

Erwin
This works perfectly for me - the fade in/out is super! Thanks!
Reply


Forum Jump: