I have a simple function, that is, after the window is hidden, I will listen to the window hide event, and then send a message to the page through webContents.send to clear the content of the text box on the page. The current situation is that it does not take effect in time after I send it. This action only takes effect when I display the window, why?
Related
let firstWin = new BrowserWindow()
let secondWin = new BrowserWindow()
secondWin.hide()
Let's assume there are three active windows. Two of them belong to my application (firstWin and secondWin). The third one is Chrome (or any other application). firstWin is at the bottom of the hierarchy, Chrome in the middle and secondWin on top.
secondWin
Chrome
firstWin
When I call secondWin.hide(), firstWin automatically pops up and gets focused. The result is then:
firstWin
Chrome
Is there any way to prevent that? I would like firstWin to not pop up but stay at the bottom of the window hierarchy when I hide secondWin.
I believe you should be able to listen to a window's focus and/or show events (see https://www.electronjs.org/docs/api/browser-window)
You could then make "a decision" to immediately call hide() on that window. (I suppose there is a chance of it flashing on screen briefly.)
(How to make that decision is a bit tricky; I suppose you could record the time you called secondWin.hide() and use the number of seconds since then to decide... not ideal!)
As another approach, just before calling secondWin.hide() you could look at the current state of firstWin, and if that is minimized or hidden, you could instead call app.hide() (see https://www.electronjs.org/docs/api/app#apphide-macos).
(Unless you always want all windows hidden when one window is hidden, this isn't going to scale very nicely beyond 2 windows, unfortunately.)
The solution that I went with for now is to set the opacity of the window to zero and deactivate mouse events. That would be
secondWin.setOpacity(0);
secondWin.setIgnoreMouseEvents(true);
instead of
secondWin.hide()
You then reverse the settings whenever you want the window to become visible again. It's a bit hacky but works for now. Let's see if anyone finds a better solution. Ideally there would be an event like window-about-to-be-shown, which you can plug into and call event.preventDefault() on.
It's been a while since the last answer but here is how I solved this issue:
setting
firstWin.setFocusable(false)
just before calling
secondWin.hide()
will prevent the first window from getting focused.
After that, you can restore the focusable state again calling
firstWin.setFocusable(true)
There's a web page where I'm trying to use Tampermonkey to give focus to an element in an iframe which is cross-origin to the top document. Copious use of console.log() tells me that my script is executing, getting the proper element, and calling focus() or click() on it, but the component isn't scrolling when I press space; I have to manually click on the element for it to scroll from keyboard input (the page is otherwise responding to keyboard input just fine). I used "inspect" on the element I want and then entered $0 into the console to make sure that I referring to the correct element in my script. I even have my Tampermonkey script use the setTimeout() trick, with a timeout of 1 second, but that's of no help.
A few other things of note:
While the page is loading I can scroll up and down using the arrow keys, but as soon as it finishes loading it won't respond to those keys again until I click the element with my mouse.
If I click on the element, press Tab to give focus to the next element, then press Shift-Tab to cycle backwards,
the result is that there's that thin blue outline around my desired element, seeming to indicate that it has focus, yet pressing space or the arrow keys won't scroll it.
I'm using Chrome 68.0.3440.106
EDIT: The pages in question are rented books from VitalSource viewed with their in-browser book viewer. Unless you already have a book with them that's currently valid you won't be able to view the problem pages.
I have a JQM 1.3 popup which I have set to data-dismissible="true" All is good until the screen is scrolled. The popup scrolls fine and I have a javascript event listener to center the popup when the scrolling stops. The problem is that the underlying -screen div (that jqm creates) does not follow the popup. So if I scroll to the bottom of the screen and then click anywhere outside of the popup it does not dismiss the popup. Using the dev tools I can see that the css for the -screen div never changes after the popup is displayed.
I want the -screen div to track my popup div so that regardless of where I scroll to - anywhere that I click outside of the popup it will dismiss it. Currently if I want to click outside the popup to dismiss it I have to scroll the screen back up to where the popup was first displayed.
I found the problem:
When I was appending the popup I was not appending it down far enough in the DOM. I was appending the popup to 'body' and instead it needs to be appended one level down to the div with data-role="page" or the div with class 'ui-page' set.
The popup is contained within a handlebars template:
$('body .ui-page-active').append(template());
I am working on a ToDo list app wherein I keep the focus on the textbox input after the user adds a ToDo item.
Now, the problem is, when the user adds some text input and hits the add button, the focus on the textbox is lost so the keyboard disappears and then the focus gets back to the textbox. So, the keyboard disappears and appears again in a short interval. As you can imagine, this is bad UX.
How do I set the keyboard to be shown explicitly when the focus is on the input button?
I fixed it by setting the focus onto the textbox first when I click the add button then do the actual adding stuff.
Would like to use a popup(jquery mobile) with content and make it fill the screen. Also with overlay.
Like this, scroll down to bottom, Overlay set to A button.
http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html
But I want the popup to fill almost the entire screen. This should act as a new page but be filled with ajax content, I will fix this later...
How can I do this?
jQuery Mobile will not size a popup or dialog larger than needed to contain the rendered content. If you really want to fill the page, go with a new page. Consider transitioning to a new page with a pop transition instead.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
You might also consider a dialog as it obscures the underlying page content
http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html