When I have an email open in Gmail, I'm trying to click the "Show original" dropdown menu item programmatically. The IDs of all the elements change dynamically with each email, so that's not a reliable way to find the menu item I'm trying to click. To start, I'm just trying to make a piece of JavaScript that clicks it in Chrome's console. After loading jQuery, I've tried this:
jQuery('div[role=menuitem]:contains(Show original)').click();
While it seems to select the proper div and click it, it's not the expected behaviour and the click doesn't really do anything. Here's a piece of a fully loaded email's menu containing the menu item I'd like to click with JavaScript:
<div class="J-N" role="menuitem" aria-hidden="false" id="so" style="-webkit-user-select: none;"><div class="J-N-Jz"><div><div id=":173" class="cj" act="32"><img class="dS J-N-JX" src="images/cleardot.gif" alt="">Show original</div></div></div></div>
My intention is to use a bookmarklet, but I'm having trouble loading jQuery in a bookmarklet because of a security warning, but that's another question/issue. Also, should I try to open the dropdown before clicking the "Show original" button or is it likely that I am able to click this button without opening the menu first?
You must open menu at least once, so Gmail loads required menu elements.
To click on elements use dispatchEvent() straight on DOM elements (not jQuery collections)
Basic example might look like this:
// Create events
var mouseDownEvent = new MouseEvent('mousedown', { 'bubbles': true });
var mouseUpEvent = new MouseEvent('mouseup', { 'bubbles': true });
// Get DOM elements
var menu = jQuery("div[role='button'][aria-label='More']").get(0);
var button = jQuery("div[role='menuitem']:contains('Show original')").get(0);
// Open and close menu, to ensure button existence
menu.dispatchEvent(mouseDownEvent);
menu.dispatchEvent(mouseDownEvent);
// Click menu item
button.dispatchEvent(mouseDownEvent);
button.dispatchEvent(mouseUpEvent);
That will work only in Chrome, Firefox and Opera.
Related
I want to create a chrome extension that can simulate reply button of menu which appears when we click on small down arrow button of a message in the chat on WhatsApp Web.
I was able to get DOM element using getElemntsByClassName() in the content script of extension, but unable to simulate mouseover/mouseenter event to display that small arrow button. That button will only appear when mouse hover the message.
var mainWindow = document.getElementsByClassName("z_tTQ")[0]; //get main div which contains msg boxes
var msgs_in_boxes = mainWindow.getElementsByClassName("message-in") //get msg boxes
var msg_in_box = msgs_in_boxes[msgs_in_boxes.length - 1]; //get the last msg box div elem
var msg_in = msg_in_box.getElementsByClassName("_2et95 _3c94e")[0]; //get div inside the msg box
var event = new Event('mouseenter');
msg_in.dispatchEvent(event);
I have tried both mouseenter & mouseover events but unable to display arrow button programmatically.
Also I have dispatched events on msg_in_box instead of msg_in. But not working
Are there any method to accomplish this task by java script in chrome extension? Or are there any similar extension available on the market. My objective is simulate click on reply button of a specific message(Let's say last message) (I want to mention that message programmatically) via chrome extension.
Edit:-
I realized when I disable JS from devtools still that arrow button appearing and disappearing happens when mouse hover. It seems they use CSS to do that instead of onmouseenter of JS. How can I simulate that CSS :hover
In my web apps are having lots of Popup Window and each window having Toggle buttons are there.
Currently are all open at initial stage, But I need to collape (Closed condition at initial stage).
Problem is all popup pages are having same class name and dynamic id and dynamic attribute. From my end - we cann't use ID and Attribute.
<a class="panel-toggle in" href="#dynamic-value" data-toggle="collapse" aria-expanded="true">
Open/Close
</a>
So I implemented trigger function like this for main layout and later that particular pop html page. Some pages are global.
$(document).ready(function () {
$("body .ui-dialog .panel-toggle").trigger('click');
});
After that above code, on first time load - All are working normal. But i opended second popup from first popup, they collapse all first too.
Later I tried first popup from individual html and second popup is also another individual - but same error. below code for this type
$(document).ready(function () {
$(this).find(".panel-toggle").trigger('click');
});
Any idea... Onpage load, I need trigger for that particular page with global code also individual.
I have a menu with ~6 buttons, each that lead to the same page.
In that page, there is a drop down menu.
The purpose of the 6 buttons is that when one of those buttons is clicked, the page is redirected, and then the drop down menu opens to the correct tab.
However, all scripts are killed when a page is redirected, so I cant do something like this:
<body>
<a id="buttonID" onclick="GoToPage('buttonID')">All</a>
</body>
<script>
function GoToPage(buttonID){
redirect to page.html;
open menu to tab related to buttonID
}
</script>
Instead I would probably have to create a function that executes when the page loads, and then attempts to find from which button did it get there from, and opens the menu to the correct configuration based on that.
Should I use something like:
window.onload = ....
And how would I be able to pass which button redirected the page to this?
Opening the dropdown menu should be the responsibility of the destination page, not the source page. Since the server doesn't care about the dropdown menu state, send that information in the fragment identifier:
<a id="buttonID" href="page.html#all">All</a>
On the receiving end, you can retrieve the identifier with
document.addEventListener('DOMContentLoaded', (event) => {
let target = window.location.hash; // target = "#all"
// modify your menu as appropriate
});
The load event doesn't fire until the page has completely finished loading: images, stylesheets, everything. Modifying the dropdown menu doesn't require any of that, so use the DOMContentLoaded event instead. It fires when the HTML page has been loaded and parsed and is ready for DOM manipulation.
index.html#section navigates you to a certain section of a page. But I want to select the second tab in a section of a page. I don't know if it can be done without javascript but using Tab Content Script (v 2.2) with the method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Hope you could help me with this. Thanks!
As mentioned in the comment, you want to navigate to the tab when a button is clicked.
Though not a clean way, but you may simulate a click action on tab once the is button clicked.
var element = document.getElementById('coupon-navigator');
element.addEventListener("click", function(e) {
document.getElementById('tab2').click();
}, false);
I am trying to use the jQuery tabbed widget as a menu for my application and have managed to set up the tabbed interface so that when you click a tab it shows the first page of that section. According to the docs, if you click on a link on this page and want it to load in the same tab then you need to use the code below. This partially works because now when I click on an image-hyperlink on that page it renders the new page in the tabbed window.
However, when I click on a button which has javascript the button no longer works. This is the case for all of the javascript. How can I get the javascript working again under the new tabbed interface?
$('#example').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
EDIT: So if you add the following line to LeftyX's code in the page 1 file, then the button causes page4.html to open but does not do it in the tab
<button onclick="location.href='Page4.html'">Test button </button>
It must work.
If you show us your HTML we might try to help.
You can check my sample and download the code.
Try and check if there are any errors in your script using some Dev Tools (ex: Google Chrome Developer Tools)
UPDATE:
if you're using a button you can use some HTML5 attribute:
<button data-pagelink="Page4.html">Test button</button>
and trap the click event:
$(ui.panel).delegate('button', 'click', function(event, o) {
$(ui.panel).load(this.dataset.pagelink);
event.preventDefault();
});
or use an hyperlink and transform it in a button:
<a id="thisIsAButton" href="Page4.html">go to page 4</a>
with this:
$("#thisIsAButton").button();