Develop Reference

Automatically clicking divs present on page

I am trying to automatically click present buttons which are visible on a page, than triggering the scroll functionality after we've clicked the visible options.
I've messed around with the following code, however it didn't work in any formation I applied it.
$( ".follow-button" ).trigger( "click" );
And here's the button HTML.
<button class="follow-button btn-simple"><span class="following-txt">Following</span><span class="follow-txt">Follow</span></button>

for the visible buttons, now how you implemented it, checking the class and ignoring with class hidden or whatever is up to you
const buttons = document.getElementsByTagName('button');
Array.from(buttons).forEach(b => {
b.addEventListener('click', function() {
console.log(b.textContent);
})
b.click();
});
<button>asdf</button>
<button>hfdg</button>
<button>sfdf</button>
<button>ggfg</button>

You can use $(".follow-button:visible").click() to click on all visible buttons.

How to make a top level drop down item clickable

Im making a store in shopify, and have set up the navbar as a dropdown.
Clicking the nav links will only make it display or hide the drop down, but what i need is for it to, on the first click, display, then clicking the parent will follow the link.(for instance,my home item drops down, but i can't actually get home, and need it as a drop down item.)
HeaderView.prototype.events = {
"click .main-nav .dropdown > a": "toggleMenu",
};
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
e.preventDefault();
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
};
Obviously the e.preventDefault is stopping the link from working, but I'm not sure how to make it give an active class on the first click, then allow the link to be followed when the drop down is visible. It works with hover, but then won't work on touch devices.
Any help/suggestions would be appreciated, thanks.

You only need to call e.preventDefault() when you are doing the first click. Otherwise it is, like you said, preventing it from working.
Try this instead:
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(e.target).closest(".dropdown-nav").length) {
e.preventDefault();
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");
}
};

Thanks for the response, I was going along the same line of thought and wound up with a simple, "if the class is active prevent default" type statement.
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
So basically, if the drop down shows, allow the link, if isn't showing, prevent it;
thus keeping the top level as a link if it's drop down is 'open'.
HeaderView.prototype.toggleMenu = function(e) {
var dropdown;
dropdown = this.$(e.target).closest(".dropdown");
if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();
if (!this.$(e.target).closest(".dropdown-nav").length) {
this.$(".dropdown").not(dropdown).removeClass("active");
return dropdown.toggleClass("active");}
}
};

FireFox addon, Menu button events

I am developing my first firefox extension so I created a menu-button element and menu items.
Exactly like the FireBug button, I would like an event to be triggered when clicking on the main button, but also when clicking on a menu item. The problem is that when I click on the arrow next to the main button to display the menu items the main event is triggered. So my question is:
How do I differentiate the main button (the menu-button) and the arrow displaying the menu?
Here is my code generating the button:
function addToolbarButton() {
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
if (!navBar) {
return;
};
//main button
var btn = document.createElement('toolbarbutton');
btn.setAttribute('id', 'reportButton');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', data.url('img/BookmarkKitchen.png'));
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Report');
btn.addEventListener('click', function() {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
//menu popup
var menupopup = document.createElement('menupopup');
menupopup.setAttribute('id', 'menupopup');
menupopup.addEventListener('click', function(event) {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
//menu items
var menuitem1 = document.createElement('menuitem');
menuitem1.setAttribute('id', 'menuitem1');
menuitem1.setAttribute('label', 'Test1');
menuitem1.setAttribute('class', 'menuitem-iconic');
menuitem1.addEventListener('click', function(event) {
console.log("this=" + this.id);
event.stopPropagation();
}
, false);
menupopup.appendChild(menuitem1);
btn.appendChild(menupopup);
navBar.appendChild(btn);
}
When I click on the main button, the console will write "this=reportButton". This is normal but when I click on the arrow next to the main button, the console will also write "this=reportButton". That means if I want to access the menu, the main event will be triggered. The only way I found to prevent this, is to press the button on the arrow, wait for the menu to show up and release it on a menu Item. This is not very user friendly and Firebug doesn't have this problem...
I hope I was clear enough. Thanks for answering this :)

Don't use the click event - in XUL it really means a mouse click. So if the user triggers a button by other means (e.g. keyboard), the click event will not be triggered. You should use the command event instead - and it has the additional advantage that it won't fire if the dropdown arrow is clicked.

e.stopPropagation() and .slideToggle() at war inside click events

I've got a child close button inside its parent, a notification box. When the parent is clicked, the notification box expands, with the notification's description and the child button becoming visible inside it.
The button, when clicked, should unexpand the notification and hide both itself and the description.
Because the button has a click event inside its parent click event, both were being called. I turned to event.stopPropagation() to have the parent notification stop re-expanding after I clicked. While this stopped the notification from expanding on a close button click, it presented a new problem that I don't understand.
In my test, I have two notifications set up, both unexpanded. When I click on a notification, it expands and shows the description and close button. When I click the close button, the notification unexpands and the button and description are hidden. But, I found that the description and close button were appearing for the other notification!
Code:
var $NotificationContainer = $("#NotificationContainer");
$NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');
var $thisNotification = $NotificationContainer.children('.Notification[title='+title+']');
$thisNotification.append('<div class="NotificationTitle">'+title+'</div>');
$thisNotification.append('<div class="NotificationDescription">'+description+'</div>');
$(".NotificationDescription").hide();
// Button used to close an expanded notification
$thisNotification.append("<div class='NotificationCloseButton'></div>");
$('.NotificationCloseButton').hide();
// When the parent notification box is clicked
$thisNotification.click(function(event)
{
$thisNotification.animate({height:250}, 1000);
$thisNotification.find('.NotificationDescription').slideToggle('fast');
$thisNotification.find('.NotificationCloseButton').slideToggle('fast');
});
// When the child close button is clicked
$(".NotificationCloseButton").click(function(event)
{
event.stopPropagation();
$thisNotification.animate({height:50}, 1000);
$thisNotification.find('.NotificationDescription').slideToggle('fast');
$thisNotification.find('.NotificationCloseButton').slideToggle('fast');
});
I don't know how $thisNotification.find('element') is not catching the right notification.

Does it work if you change the event handling to
// When the parent notification box is clicked
$thisNotification.click(function(event)
{
var self = $(this);
self.animate({height:250}, 1000);
self.find('.NotificationDescription').slideToggle('fast');
self.find('.NotificationCloseButton').slideToggle('fast');
});
// When the child close button is clicked
$(".NotificationCloseButton").click(function(event)
{
var self = $(this);
event.stopPropagation();
self.animate({height:50}, 1000);
self.find('.NotificationDescription').slideToggle('fast');
self.find('.NotificationCloseButton').slideToggle('fast');
});
used this to identify the clicked element, instead of relying on the variable that was defined when you created the element (avoids cases in loops where the all elements reference the last value assigned to the variable..)
Additionally, since you are appending to the #NotificationContainer you can just select the last item instead of searching for identical titles..
var $thisNotification = $NotificationContainer.children().last();
removed the selector completely since you have just appended the last element..

xul : creating a right click context menu item for only hyperlinks

I got a question to ask on building firefox plugin, basically my aim is to do following things,
1) In my plugin I want to show right click context menu item for only links[anchor tags] and hide the menu item for rest of the page
2) How to add dynamic list to my menu, i.e., adding the number of menu list items dynamically depending upon user's choice.
Can someOne point me to a right direction
Thanks !!

Bind an event listener for the contextmenu event and check whether the clicked element is a link, e.g.:
window.addEventListener("contextmenu", function(e) {
var menu = document.getElementById('your-menu-id');
if(e.target.nodeName == 'A') {
menu.hidden = false;
}
else {
menu.hidden = true;
}
}, false);
Read more about event properties and the menu element properties.
Have a look at the menu element's appendItem method.