Develop Reference

Trying to write a Fluid App userscript to disable notion sidebar auto popup behavior

Edit - working solution
Trying to disable the javascript event was a no-go, instead I ended up adding an additional element into the DOM that toggled the visibility of the sidebar with css which worked. It's not the prettiest solution as I'm just learning, but it does solve the problem.
It doesn't work as a Fluid userscript but does work as a Greasemonkey/Tampermonkey script in the browser. Full code is on Github - would love someone with more knowledge to improve on it.
Original Post
I'm a newbie in JS but am trying to learn by doing.
I use notion and am very annoyed by the sidebar that pops up whenever the mouse hovers over the left side of the app.
I read somewhere that I can use the Fluid app to push userscripts and that it might be possible to disable that functionality with custom styling.
But I can't seem to figure out how to get either the JS or CSS to disable mouseover events.
I think I found where the event is being listened for, but I'm not sure about next steps for how to remove that listener funtion, or to stop the function call.
This is where I think the event is being triggered, can anyone advise?

You can add a mousemove capturing listener to a container of the element with the listener. On mousemove, if the target (element to which the event is being dispatched) is a descendant of the element with the page listener you want not to fire, call stopPropagation on the event.
For example, in the below code, the page script tries to color an element when it or one of its descendants is hovered, but the second part (which can go into a userscript) will prevent that:
// Page script:
nested.addEventListener('mousemove', (e) => {
nested.style.color = 'red';
});
// Userscript:
outer.addEventListener('mousemove', (e) => {
if (e.target.closest('#nested')) {
e.stopPropagation();
}
}, true);
<div id="outer">
outer
<div id="nested">
nested
<div id="inner">
inner
</div>
</div>
</div>

So I wasn't able to solve this using the initial methods and ended up trying a totally different approach which worked.
Wasn't able to figure out how to get it to work in Fluid App yet, but I did manage a greasemonkey userscript.
Instead of trying to change the event listener function, I just control the visibility of the sidebar.
I add a button into the DOM, and give that button a trigger that toggles notions sidebar visibility. Click the button and the sidebar is invisible and nothing pops as you hover over the left side.
It's not the prettiest solution, because it doesn't remove notion's existing button for the sidebar, and if you don't minimize the sidebar with notion's own button, then the formatting can be a bit wonky, but as a hack it totally works.
I'm very new to JS and coding in general, so this is prob very inefficient. But if it helps anyone, here's the code in Github – I would love for someone to help me make this better.

How to differentiate between a click and a drag using jQuery, but get only one click event

I am using the following answer to solve my problem, however, it always registers either two clicks or two drags instead of just one. What could be the problem for that?
https://stackoverflow.com/a/31080629/5632752
The div that I am using the .draggable() function on looks like this:
<div id="draggable"><div>Hello World</div></div>

I had the code for differentiation under $(document).ready() and that, for some reason, registered two clicks instead of one. I added the code under a <script> tag at the end of the HTML page and now it works just as it should.

Change CSS of div when ATBar button is clicked

Currently trying to fix an issue with a WordPress site. The site has the ATBar plugin installed which is an accessibility plugin with a toolbar at the top of every page. This toolbar overlaps the normal Wordpress Toolbar and therefore I have added some CSS to the WP toolbar to push it down a bit:
top: 40px;
As 40px is the height of the ATBar. Unfortunately when the ATBar is closed (via a button on the toolbar) the gap is left at the top.
I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on page load. Therefore, I've tried only binding the event when the window is ready, as opposed to the document, but no effect either!
The site is here: http://simp.daveclarke.me/, you will see the two bars if you visit this page.
Any advice appreciated

I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on pag
I think it's not a problem with loading the JS dynamically but the fact that the wordpress bar has an !important in the CSS top attribute. If you can remove the !important tag and then do something like:
document.getElementById('at-lnk-atkit-unload').addEventListener('click', function(){
document.getElementById('wpadminbar').style.top = "1px"
});
That should fix the issue

Can't you do something like
$('#at-lnk-atkit-unload').click(function(){ //when ATbar close btn is clicked
$('#wpadminbar').css({ "top": "0"});
});

try to use $('#at-lnk-atkit-unload').on('click', function(){ ...

Answering my own question..
Managed to fix this in the end, by tweaking their JS a little.
Rather than importing the JS source from their server, I made a copy at my end and added the addEventListener call that #emilioicai suggested just after the ATBar was rendered. This adds the event listener and functionality required.
Thanks!

I think, that problem lies in that: ATBar loaded after your code, so event listeners didn't attach.
And if you don't want to copy foreign code to your server (which is not appropriate decision, 'cause it will not work all the time, API of ATBar may evolve and so on), you may use timeouts
setTimeout(yourfunc,0); //if loading takes a lot of time, then
// change 0 to 50 or whatever
Or just use jQuery .on function (or even deprecated .live function)

How to use Javascript to make this button do whatever it does when the mouse hovers over it

This is the privacy button that shows on your status updates on your Facebook wall.
When you click on that icon, you get these options.
I am trying to make a Greasemonkey script to automatically click on one of those selections. My script works fine, with the only caveat being that I have to hover my mouse over that icon before running the script, or else it won't work. I don't even have to actually open the dialog by clicking on it, I just have to move my mouse over the icon.
So I'm trying to find a way to use Javascript to hover the mouse over that icon, or click on it, so that I don't have to manually do it. I've tried the .click() and .trigger() methods, but they don't seem to be of any help here.
I think this is the code for the button.
<a rel="toggle" data-tooltip="Your friends; Except: Restricted" data-length="30"
data-label="" aria-haspopup="1" href="#" ajaxify="/ajax/timeline/show_story_options.php?profile_id=707236195&story_fbid=10150597306856196&story_row_time=1331626509&permalink=1&story_div_id=stream_story_4f6620b08c1851b03797773&story_dom_id=stream_story_4f6620b08c1851b03797773&small_icon=1"
role="button" class="uiSelectorButton uiButton uiButtonSuppressed uiButtonNoText"
tooltip-alignh="right" title="" data-hover="tooltip" id="js_1"><i class="mrs defaultIcon customimg img sp_4uwvrx sx_bff9bf"></i><span class="uiButtonText"></span></a>
I tried using jQuery to get the url specified in the ajaxify tag, because I noticed that that's one of the things that happens when I hover my mouse over the button. Even though I can successfully GET the page, it doesn't seem to make any difference either.
How can I use Javascript to make this button do whatever it does when I manually hover my mouse over it?

I think what your after is something like the do click function found int the link below you could mix in with some query.
http://www.codeproject.com/Articles/17241/Capturing-the-Enter-key-to-cause-a-button-click

I'm in a hurry, so I can't in-depth with my answer, but I thought dropping this might be of some help.
There is this module called Selenium that lets you use a browser with javascript to do whatever you want on a webpage.
Guide: https://www.browserstack.com/automate/node
Module: https://www.npmjs.com/package/webdriver
Another Module: https://www.npmjs.com/package/selenium-webdriver
I know this is not a direct answer, but hopefully, it comes in handy.

Having an issue with jquery functions not working properly

I've been trying to get this little project I'm doing finished, but for some reason it is not properly working.
The issue is when I first visit the page and click the first link that appears in the main section it displays the popup box as wanted. Now when I click another day, for instance sunday and try to click the first link it doesn't do anything. And if I click back to Saturday the first link also doesn't do anything anymore.
It seems something is not properly activating or maybe a command is overwriting and not allowing it to work like it does when you first hit the landing page. I'm sorry if this is confusing but any help would be much appreciated.
The website is pouronline.com
that's where i do all my testing.
Thank you

You need to use the .live function.
So in your popup.js replace
$('a.poplight[href^=#]').click(function() {
with
$('a.poplight[href^=#]').live('click',function() {

Swap this:
$('a.poplight[href^=#]').click(function()
with this:
$('a.poplight[href^=#]').live('click',function()
You need to use a future-proof event observer because once you reload those anchors by changing the day in this case, the initial binding is lost. live() means to apply the binding to currently existing nodes as well as nodes that are added to the DOM at a later time.