I have an electron app that has multiple devtools windows. All of the devtools windows have the same title 'Devtools', so I want to be able to set the title to something along the lines of 'Devtools (popup)' so it will be easier to differentiate between them.
Creating the devtools browser window with a title property, or setting the title with either
devtools.title = 'Custom devtools title' or window.setTitle('Custom devtools title')
don't work.
Is there a way to achieve this behavior?
Thanks
This seems to be a known bug.
One commenter said:
what worked for me is setting the devtools window title at a delay after creation -
let newDevToolsWindow = new BrowserWindow();
window.webContents.setDevToolsWebContents(newDevToolsWindow.webContents);
window.webContents.openDevTools({ mode: "detach" });
setTimeout(() => {
newDevToolsWindow.setTitle("DevTools Title");
}, 3000);
You could try that.
Related
I want to trigger an action on double right-click of mouse when electron app is running in the background.
I read the documentation and seems like there are no globalshortcuts for mouse events.
Any other way to achieve this? perhaps some node module compatible with electron app?
Unfortunately, we can't achieve that yet.
As MarshallOfSound commented on this official issue
"globalShortcut intercepts the key combination globally and prevents any application from receiving those key events. If you blocked apps from receiving mouse button presses things would break everywhere very quickly 👍"
https://github.com/electron/electron/issues/13964
For macOS, I'm currently using Keyboard Maestro App.
I'm getting my mouse keys with this app and triggering a globalShortcut key combination register in my Electron App.
Maybe for Windows, AHK (auto hot keys)
I found this nice solution for HTML code
<script type = "text/javascript">
const {remote} = require('electron')
const {Menu, MenuItem} = remote
const menu = new Menu()
// Build menu one item at a time, unlike
menu.append(new MenuItem ({
label: 'MenuItem1',
click() {
console.log('item 1 clicked')
}
}))
menu.append(new MenuItem({type: 'separator'}))
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
menu.append(new MenuItem ({
label: 'MenuItem3',
click() {
console.log('item 3 clicked')
}
}))
// Prevent default action of right click in chromium. Replace with our menu.
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
menu.popup(remote.getCurrentWindow())
}, false)
</script>
Put this as first item in your HTML Body and it should work. At least it worked on my project
EDIT, cause I forgot it: Credits to google for answer on 6th entry
In my Firefox SDK add-on, I have a simple content script that adds a keydown event listener to its page and logs the event:
//content-script.js
console.log("Running");
window.addEventListener("keydown", function(event) {
console.log("Key down event");
});
window.focus();
And I have written a function to set up this behavior in main.js:
//main.js
function setupTab(tab) {
console.log("setup");
tab.attach({
contentScriptFile: "./content-script.js"
});
}
tabs.on("open", function(tab) {
setupTab(tab);
});
setupTab(tabs.activeTab);
My ultimate goal is to run the content script on all tabs that are open when the add-on starts up, as well as any tabs that open afterward. For the moment I am just running this on the active tab and all subsequently opened ones.
When I run the add-on, the console logs "setup" and "Running" and also logs any key presses I make in the initial window, which is the expected behavior. However, when I open new tabs, the first new tab opened will log both "setup" and "Running" but they will NOT log any keypresses. Every new tab after that will log "setup", "Running", and keypresses.
I have noticed that the Add-on SDK version of Firefox runs like a fresh installation each time, and the first new tab opened (and only this tab) pops up a "What is this page?" message. This might be interfering somehow, but if so I don't know how to circumvent it.
I'm suspecting that the behaviour you want is at every active tab. So the code may be like this:
//main.js
var tabs = require("sdk/tabs");
tabs.on('ready', function (tab) {
tabs.activeTab.attach({
contentScriptFile: "./content-script.js"
})
});
I'm looking for a way to prevent select2's search-input being automatically focussed when the select2-dropdown is opened. I know this is select2's intended default behavior - and while this is fine for desktop clients, I need to prevent this behavior for the iPad where it triggers the iPads software keyboard, which is not what we want as a default.
I've searched for an option to do so with no luck.
http://jsfiddle.net/KwW5n/2/ reflects our setup - we're using a simple -element as a base for our select2-functionality:
$('#source').select2();
This worked for me on select2 v4:
// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e) {
$('.select2-search input').prop('focus',false);
});
credit goes to this github comment
Sometimes select2 "steals" focus from other elements. After messing around for quite a bit, I just used this solution below.
At the very end of the event handler for the YourSelect2.on('change', function(){
setTimeout(firstInputFocus, 300);
}
function firstInputFocus() {
$("YourSelect2").focus();
}
By setting this slight delay it works. I am able to change focus away from the dropdown. Following the "change" event for select2, it does something internal to the select2 code which prevents you from IMMEDIATELY changing focus. Inserting this slight delay did the trick for me at any rate.
Ok, I am not sure if changing the focus is possible unless you change the select2 script itself (I could be wrong about this though). As a workaround what you could do is hide the search box by setting minimumResultsForSearch property to a negative value.
<select id="test">
<option>1</option>
<option>2</option>
</select>
And then:
$(document).ready(function() {
$('#test').select2({
minimumResultsForSearch: -1
});
});
Fiddle
None of the solutions posted here worked for me so I did this work around:
This will make the search input readonly when opened (prevents keyboard on mobile), then when you click the input it removes readonly and opens keyboard.
$('#myselectbox').select2({placeholder: "Select Something"}).on('select2:open', function(e){
$('.select2-search input').attr('readonly',true);
});
$('body').on('click', '.select2-search input', function(){
$(this).attr('readonly',false);
});
The only 'solution' I found is to remove .select2-input and .select2-focusser right after creation of the dropdown. This only works fine when you don't need the input field for searching, e.g. when the list is short enough.
Removing only .select2-focusser at least prevents the keyboard from popping up when an option was selected.
If you want to disable the searchbox and also the auto focus as a text input, e.g. preventing ios browsers to scroll-in the keyboard, use this code:
$('select').select2({});
// will remove the searchbox and focus initially
$(".select2-search, .select2-focusser").remove();
// will remove the searchbox and focus on selection/close
$('select').on('select2:closing', function (e) {
$(".select2-search, .select2-focusser").remove();
});
Although #Choma's answer is fine, it will alter the select2 default behavior on both desktop and mobile devices.
I had to find a solution for a responsive website: prevent the auto-focus of the search input only on mobile devices, and keep the default behaviour on desktops.
In order to detect the mobile devices, I've used Modernizr library, which can test for the existence of Touch Events in the browser.
We can use Modernizr.touch on Modenizr v2, which will return true if touch events are supported, or false otherwise.
So we can modify #Choma's answer like this:
$('select').on('select2:open', function() {
if (Modernizr.touch) {
$('.select2-search__field').prop('focus', false);
}
});
Demo:
https://codepen.io/andreivictor/full/QmKxOw/
Tested on:
Desktop: IE 11, Chrome, Firefox, Opera, Safari
Android 4.2.2
Android 5.0.1 (Samsung Galaxy S4)
Android 6.0.1 (Samsung Galaxy S7 Edge)
iOS 11.2.5 (iPhone 8)
iOS 10.3.2 (iPhone 6 Plus)
iOS 10.3.2 (iPad Mini 3)
I got JQuery's "too much recursion" error in the console when using Choma's solution.
The following worked for me for v4:
// keep search input available, but avoid autofocus and thus mobile
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e) {
$('#modal .select2-search input').attr('readonly',true);
$('#modal .select2-search input').click(function(ev){
$('#modal .select2-search input').attr('readonly',false);
});
});
As you can tell this select2 field is on a modal with the id modal and the select2 field itself has an id of subject. Of course change the selector to what's appropriate for your own code.
It basically adds a readonly attribute to the input when the select2 field opens preventing a mobile keyboard from appearing, and then removes it when the search field is clicked/pressed on allowing the keyboard to appear only then.
Following trick worked for me. You can disable input search field of select2 element :
$('select').on('select2:opening', function() {
$('.select2-search__field').attr("autocomplete", "new-password");
});
setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);
maybe someone need~
I've tried this and it works~
$('#selectID').on('select2:opening', function (e) {
e.preventDefault();
});
The solution worked perfectly for me. tested on mobile
// prevent auto-focus on select2 search input
$('select').on('select2:opening', function(e) {
$('.select2-search input').prop('focus', 1);
});
I'm replacing the standard "Reset your password" text link with a help' icon, but I discovered that when a jQuery Tooltip is on a link within an iframe, it remains open once the link is clicked until the parent page is refreshed.
I'm using inline frames, but I also experienced the same problem when linking to another page. I tried moving the title inside a <span> tag, as well as closing the iframe and opening a new one with the functions below, but the tooltip just remains open on the page.
UPDATE - I created a fiddle to demonstrate the problem http://jsfiddle.net/chayacooper/7k77j/2/ (Click on 'Reset Link'). I experience the problem in both Firefox & IE (it's fine in Chrome & Safari).
HTML
<img src="help.jpg">
Functions to close iframe and open new iframe
function close_iframe() {
parent.jQuery.fancybox.close();
}
function open_iframe() {
$.fancybox.open([{href:'reset_password.html'}], { type:'iframe'
});
}
I am using jquery-1.8.2, jquery-ui-1.9.1 and fancyapps2
Could be an incompatibility or bug between the fancybox and the jQueryUI tooltip.
Essentially, the fancybox is showing the second form but the browser is not seeing the mouseout event. You can check this by adding a callback function to the .close() event of the jQueryUI tooltip.
$('a[href="#inline_form1"]').tooltip({
close: function( event, ui ) {
console.log('closing')
}
})
You should be able to see closing in the console in IE, Firefox and Chrome when the mouse moves out of the "Reset Link" anchor. However, when clicking "Reset Link" in Chrome you see the closing log line again but in IE9 it does not appear again. So the browser is missing the event.
We can work around this by manually calling .tooltip('close') when "Reset Link" is clicked, like this:
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
There is a small problem with the way in which the tooltips are created which means that with just the above click handler it will error with
Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'
This seems to be caused by using the $(document).tooltip() method which uses event delegation for all elements with a title attribute. This is the simplest way of creating tooltips for all elements so I understand why this is used but it can add unnecessary events and handling to the whole page rather than targeting specific elements. So looking at the error it is telling us that we need to explicitly create a tooltip on the element we want to call 'close' on. So need to add the following initialisation
$('a[href="#inline_form1"]').tooltip();
Sp here is the completed JavaScript
$(function () {
$(".fancybox").fancybox({
title: ''
})
$(".fancybox").eq(0).trigger('click')
$(document).tooltip();
$('a[href="#inline_form1"]').tooltip()
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
})
Note: You only need one jQuery document.ready wrapping function - the $(function (){ ... }) part :-)
I'm using the new jqm popup with the 1.2.0 alpha release and my problem is that my page from which I call the popup is refreshed uselessly when closing the popup using esc key or clicking on the screen... This refresh happen only the first time I close it. If I reopen and close again the popup the page is not refreshed...
It seems that for some reason jqm history mecanism get messed up....
It don't seem to be a built-in feature because this does not happen for any popup in the jqm demo page.
Any idea how to solve this issue?
Thanks
Etienne
I had a similar problem and, as I did not need to use history in my case, I solved it disabling globally popup history like this:
$.mobile.popup.prototype.options.history = false;
Found this post while having a similar problem on IE11 with jQuery Mobile 1.4.5
I found that I could prevent the "reload" when closing the popup by declaring the popup with the data-history="false" attribute in my HTML.
Ex:
...
Per my comment, here's a temporary workaround to the issue. Just appropriately bind to the navigate event and call preventDefault. This will prevent the reloading of the page. I ended up binding to the popupafterclose, only when it's been opened:
$('.my-popup-selector').on('popupafteropen', function () {
$(this).one('popupafterclose', function () {
$(window).one('navigate.popup', function (e) {
e.preventDefault();
});
});
});
I had a similar problem and I fixed it with using history: false:
$("#selector").popup({ transition: 'slidedown', history: false, overlay: true });
$("#selector").popup("open");
Add data-history="false" to popup div. thus when popup closes it doesn't redirect to another page .