Change CSS of div when ATBar button is clicked - javascript

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)

Related

GoogleTagManager (fbevent.js) breaks JQuery UI dialog

Recently we implemented the GoogleTagManager (GTM), and certain Jquery UI dialogs are not showing at all (some of them always work, some of them never work, consistently). Unfortunately, I cannot provide sample codes.
When a UI button is clicked that calls .dialog("open") the dialog is not shown but the entire page goes grey (div class="ui-widget-overlay ui-front"). I see in the html that the div has "display:none" style.
If I remove the display: none, the dialog is finally shown, but the form's UI is messed up. Somehow the width of the modal is 300px instead of 1000px, etc. Also, the event listeners from the save/cancel buttons are missing. If I put autoOpen: true on the jquery UI dialog declaration, the dialog is shown, but is still messed up the same way.
I noticed that when I have an adblocker, everything works properly, but when I don't, the bug appears. I also realized that a "fbevents.js" file is in the browser when GTM is used, and if I explicitly disable only this file with an adblocker, the bug disappears.
I also see a facebook.com/tr/ call that stays "pending" forever in the network tab in Chrome, when I click on the icon that calls the dialog("open").
And of course, if there is no GTM, the site works properly.
Do you have any idea what is this bug or how should I continue the investigation? (without updating jquery/jqueryUI or without switching to bootstrap modal)?
Without additional detail is very hard to guess, what causes your problem, but there is one thing, I will try ona first place.
Check, how is your trigger made.
There are some GTM configurations, that steps into link click event processing.
So maybe, there is an event listenning on an A element, that onlky pretends to be a link and GTM is waiting for response.
If this is a true, try to change event listener into just Generic click event (Click - All Elements).
I got lucky. I found a second form that exists for a short period of time, which was facebook related (GTM). I realized that a "xy.appendTo('form')" JS code inserts data into the wrong form... By changing the code to "xy.appendTo('#form1')" the problem is gone.
So a simple appendTo('form') started the domino effect, which resulted in duplicated IDs in the DOM, and messed up everything...
The facebook.com/tr call in the network tab is still in pending state, but I believe that is somehow related to Jakub Kriz's suggestion (I will update my answer soon).
UPDATE:
Even though the GTM debugger shows no trigger has been fired, the GTM sends requests to facebook.com/tr calls every time a "a/a href" or "input type="button"" is clicked. I believe this is a default functionality, and I understand why.
In some cases our website is using these html tags in an invalid way: "a" is used instead of a "div" and "input type button" is used for an icon that opens a modal dialog. If we change these, the unnecessary facebook.com/tr calls will be gone.
But I've got still no clue about the pending state. I believe when I apply the changes I mentioned above, the problem will be gone.

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.

Using JQuery Bootstrap in a reloadable Ajax Section

I am creating an ordering system which allows staff to record orders and track their status from ordered to dispatched. The problem that we have however is that when viewing orders, another staff member on another computer may change orders. This wont register until a page refresh is carried out.
To address this I was hoping to use this script....
http://www.michaelfretz.com/2010/04/21/using-ajax-to-load-data-from-php-into-your-website/
I have managed to get it working great within twitter bootstrap. On slower connections, the page loads and says 'please wait while data loads' until the data is loaded.
The problem I have however is that I cannot get javascript to work within the reloading section. I was hoping to use bootstrap tooltips. The user can hover over an order id and it will popup with the order contents. It works great outside of the reloading section, but within I cannot get it to work.
I have tried loading the jquery, and bootstrap tooltip javascript within the loading section, but even this did not work. This would have made it very slow anyhow though.
Does anyone have any ideas how I can use Bootstrap Tooltips with the Ajax reloading PHP document.
Thanks
If you're going to be loading dynamic content, bind your handlers to the closest parent that doesn't change, and then add a filter to only select the elements you want to handle.
So, by why of example:
HTML:
<div id="parent">
<div id="igetinjectedwithdynamiccontent">
...
IMA BUTTON
...
</div>
</div>
jQuery:
$('#parent').on('click', 'a.btn', function(event){
// handle click event for anchors of class 'btn'
});
This will successfully bind onclick handlers to any Bootstrap buttons in the parent div, regardless of whether they existed on page load or were added dynamically.
Thanks for your help answering this question... I have got it figured now. Didn't even know what to search for before asking the question.
I could have either used an onload simulator which will simulate pressing the button. Should Work.
I opted however for instead using the selecter option which Apparently is just an alternative to the jquery 'Live'
For those who are in the same boat I was. Paste this in your page after loading JQuery.
<script type="text/javascript">
( function($) {
$(document).ready(function() {
$('body').tooltip({
selector: '[rel=tooltip]'
});
});
} ) ( jQuery );
</script>
Sorry about the indentation .... Stupid 4 spaces thingy :)
This script will continue loading even if the content is changed.

ZClip SWF does not align with button position if button position changes

I am currently using the zclip/jquery code to allow copying to the clipboard. It is currently attached to a span button. It seems to use a swf file over the button to provide the flash based copy to clipboard feature. The problem that I have is that when I dynamically add new elements to the page, the button position moves down but the SWF position stays the same. Is there anything I can do to have the zclip "follow" the button? Zclip snippet below:
$("#copyToClip").zclip({
path:'include/javascript/ZeroClipboard.swf',
copy:function(){return $("#outputtext").text();}
});
The zclip('show') thing actually calls the jquery show method, not the Zclip function.
An other tip would be to trigger the window resize or load event. You can see in the code the reposition function is bound to it.
a(window).bind("load resize", function(){
d.reposition()
})
then everytime, I add/remove element to my page, I call
$(window).trigger('reload');
That does the trick for me.
I beleive you can call the 'show' method to refresh the position:
$('#copyToClip').zclip('show');
The site does say "it may not be 100% reliable in every instance." and although it doesn't sound like it'll be an issue in your case it might be worth noting that it won't resize itself if the button has changed size.

Trying to change from onclick to onhover

So I have a menu at the top of a site that has some drop down menus. The drop down menus are script to show onclick, and I would like to change them to fire the event when you hover the mouse over it.
I believe this is the script for it:
http://babblespot.com/application/widgets/menuadvanced/externals/scripts/jquery-1.3.2.min.js
It has a lot of code on it, the top being mostly jquery I believe.
This is a plug-in, so I am having a little difficulty.
This is the site:
http://babblespot.com/members/home
Thanks for any help.
Simply switch the click with the hover. I am not going to list all the changes, but an
example, change
$jq('.custom_249').click(function(){
To
$jq('.custom_249').hover(function(){
Your page contains this code:
$jq(document).ready(function(){
$jq('.custom_249').click(function(){
$jq('.custom_249_dropped').toggle('fast');
});
});
If I understand your question, you need to replace the call to click(), with a call to hover(), as documented at http://api.jquery.com/hover.

Categories

Resources