We Keep Coding

Custom Event for Android Back button in PWA

I am working on a PWA and I have a page with a full screen modal in it, which pops up upon a button click to perform a specific action.
On the modal I have a close button tied to a function which works fine in closing the modal. However I noticed that on most native apps, when a modal is active clicking the (android) back button in a UI like mine closes the modal instead of going to the previous view.
My concern is if it were possible to listen to the android back button being clicked, prevent the default action and call another action. Or if there's anyway else around this!
I've made researches but all I can see is handling the browser back button, which in my case does not work. Tested on samsung A30,S10,A50.
From the Suggested question which I had gone through, There's no answer concerning how to handle the back button, Only on how to intercept it. And none of those answers my question.
Kindly note, PWA is already installed, hence in standalone mode

There is no way to handle the back button of Android in the PWA environment.
It is a system button which "clicks" the history.back() of an open browser. If there is no back-history it closes the browser.
But it doesn't know anything about this special button. There would be the need for something like the keypress-events. But there is no standard and so no implementation in the browsers.
The only way to handle this stuff in your app, is to manage the history.state in your app.
Push a new state with opening the modal. And close the modal in the popstate-event.
https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API

Activate ZenDesk widget using JavaScript trigger

Okay so I am editing a page here support.tophat.com and at the bottom left of the screen there is a little widget button that opens up a handy little support ticket window upon click. This is the ZenDesk widget that is provided by zendesk to provide a service for customers to submit support tickets to the ZenDesk back end.
What I'm trying to do is to include an "onClick" call to a function on some arbitrary link or button elsewhere on the page that will trigger the support ticket window to display, without actually having to click on the button in the bottom left.
It would seem that this is through an iframe, and I have already tried the jQuery .click() function to no avail... After inspecting the element, and seeing what function gets fired when a user clicks on the button, I get a long string of disgustingly cryptic JS that has no real outlined functions.
My end goal is to open the support window after clicking on, lets say, a link that has a trigger like if I click on a link, and set the onClick="trigger()" which fires the window to open in the bottom left.
If you would like me to include the block that chrome shows be when the event is fired let me know, but it is NOT pretty and mods might not like if i put in code that looks like that.

Using jQuery (which is included in the Zendesk Help Center), you can do this:
$('#launcher').contents().find('.Button--launcher').click();
I tested it out on your site in the Chrome console, and it activates the widget.
I found info relating to this answer here: IFrame button click event
Info on jQuery's .contents(): https://api.jquery.com/contents/

THIS:
$zopim(function() {
$zopim.livechat.window.show();
});
If you wanna call it from HTML:
<a href="javascript:$zopim.livechat.window.show();">
You can also check their API docs: https://api.zopim.com/files/meshim/widget/controllers/liveChatAPI/Window-js.html

zE.activate(); Worked for me when used jQuery

Have Window Keep Focus After One Click Fires Two Page Redirects

First of all, happy holidays to everyone.
I have an anchor element that fires two page redirects - one through the href attribute, one through jQuery.
<a id="myClick" target="_blank" href="http://www.google.ca">Google</a>
$('#myClick').on('click', function () {
window.location = 'http://www.stackoverflow.com';
});
This works fine, but the new tab gains focus. I'd like the original tab to keep the focus for the user. I did give window.focus() a go but, as assumed, it didn't work.
I also did try working with the fiddle from this answer but it only fired the new tab and the original page (jsfiddle) remained the same URL. My edited Fiddle from linked answer
How could I go about having the original tab keep the focus? Is it out of my hands?

You can't open tabs in the background using javascript because this is set in the user's preferences in about:config, which you have no control over. The setting is:
browser.tabs.loadDivertedInBackground=true

Tabs UI using Jquery

http://jqueryui.com/tabs/#manipulation the tabs manipulation does a click to add a tab. but i need a little tweak in there. after i click the add tab i.e., clicking add tab creates a tab2..but the screen doesn't takes the view to the second tab. It remains in the first tab but add the second tab(which is not active after click)
I need tab2 to be active after clicking the add button...this process continues for all the adding tabs.
I need a example or a way..coz it's a showstopper for my current project

There’s a link of the bottom of that page, “Want to learn more about the tabs widget? Check out the API documentation.”
And to get from there to http://api.jqueryui.com/tabs/#option-active should not be an impossible task for a developer, don’t you think …?

How to capture open link in new tab or window using jQuery?

Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.

A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)

At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.

I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}

If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.