[EDGE STYlING] Fade out the widget menu when it's not hovered over

[GuestGuest]

I was trying to create a JS (in all the pages) to fade out (or perhaps a different effect in the future, like sliding back to the left) the widget menu after 5 seconds or so when it's not being hovered over, but it doesn't work.

Here's my first try:

Code:

if != $('#left:hover').delay(5000).fadeOut('slow');

Please, help @Ange Tuteur.

[Ange TuteurAdministrator]

@Samantha NL give the following script a try.

Install it via AP > Modules > JS codes management > new

Title : Auto-close side panels
Placement : In all the pages

Code:

$(function() {
  $('.module_column').on('mouseout', function() {
    var t = this;

    window[t.id + '-fadeout'] = window.setTimeout(function() {
      var button = document.getElementById(/_panel/.test(t.id) ? t.id.replace(/_panel/, '_button').replace(/fae/, 'fa') : '') || $('.column_button_' + t.id)[0];

      if (button) {
        button.click();
      }
    }, 3000);

  }).on('mouseover', function() {
    window.clearTimeout(window[this.id + '-fadeout']);
  });
});

It should auto-close the panels have 3 seconds ( 3000ms ) of leaving them. Lemme know if it works for you.

[GuestGuest]

Oh this is so cool, yk! Finally we've got that one working! WOOHOOOO!!

Could you make a small adjustment to the script so that when someone has one of the side-panels open and clicks next to it, say anywhere on the body, it does the same without waiting 3 secs, please? i've seen something on the internet that may be of help: http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element

When done you could close one of the other requests I had before:
https://fmdesign.forumotion.com/t964-suggestion-auto-collapse-the-side-widget-menu-and-quick-navigation

and make THIS one an official [PLUG-IN] for Edge if you want or default it for Edge!

[Ace 1Valued Member]

@Ange Tuteur Making sloppy code eh? tsk tsk tsk

If someone closes it before the 3 seconds is up, your script reopens the widget. I got the fixed version right here tho

Code:

$(function() {
  $('.module_column').on('mouseout', function() {
    var t = this;
 
    window[t.id + '-fadeout'] = window.setTimeout(function() {
      var button = document.getElementById(/_panel/.test(t.id) ? t.id.replace(/_panel/, '_button').replace(/fae/, 'fa') : '') || $('.column_button_' + t.id)[0];
           
      button && button.className.indexOf('active') != -1 ? button.click() : window.clearTimeout(window[this.id + '-fadeout']);
    }, 3000);
 
  }).on('mouseover', function() {
    window.clearTimeout(window[this.id + '-fadeout']);
  });
});

[GuestGuest]

Ah that's why it had such an erratic behavior... I was afraid to ask Ange lol! Thanks I'll be uploading the script lateron.

[GuestGuest]

Yeah, that's a whole lot better, @Ace 1! Thanks again!

Did you see this one in one of the previous posts?

Could you make a small adjustment to the script so that when someone has one of the side-panels open and clicks next to it, say anywhere on the body, it does the same without waiting 3 secs, please? i've seen something on the internet that may be of help: http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element

You think you can do that?

[Ace 1Valued Member]

How far though? Like this far?

[GuestGuest]

Anywhere right next to the Quick Navigation or Widget Menu panels when they're opened on the left or right side, on any of page.

[Ace 1Valued Member]

So like within the red box is good?

[GuestGuest]

Well, like anywhere here




here




and here



All the way down the pages, on any of page, if you get me on this. So anywhere next to the menus or widgets, where ever they may apply like in the subs, topics and on the index / homepage. Idk about the portal as I haven't activated it (yet).

[Sponsored content]