I have a Browser Window (using Electron.atom.io) and I'm trying to make it so that you can click over most of the screen (except inputs, etc) and drag it over your desktop - basically, I don't want to restrict drag just to the title bar.
Does anyone know how I might be able to do this?
Electron supports a webkit property intended for frameless windows, that I believe should work for you. The documentation is here. Basically just make a class and add it to any elements you want draggable:
.draggable {
-webkit-app-region: drag;
}
Related
Is it possible in Electron to put custom components into the native application header?
For example, to achieve a design as such:
Currently my app just has the default one with just the title text
Is there a way to make it bigger and put content in there? Or do I have to somehow hide the native header and recreate the native buttons myself?
I suspect it's the latter, but in that case, how do I hide the native one and hook up ability to drag the window with it?
Or is this design entirely not possible in Electron?
The design you're looking for can be achieved, but only on macOS, by using the titleBarStyle property set to either hidden, hiddenInset, or even customButtonsOnHover, in the options passed to new BrowserWindow().
This is explained in more detail in Alternatives on macOS:
There's an alternative way to specify a chromeless window. Instead of
setting frame to false which disables both the titlebar and window
controls, you may want to have the title bar hidden and your content
extend to the full window size, yet still preserve the window controls
("traffic lights") for standard window actions.
There might still be a few issues, such as not being able to drag around the window from its title bar any more, but they are documented in the Frameless Window page; for instance, this specific problem can be solved by adding -webkit-app-region: drag; to the CSS relative to the region(s) you wish to make draggable.
I need to show chromium tool bar as shown in the screen shot below:
Is there a way to achieve this in ElectronJs?
There is no built-in address/tool bar in Electron, if you want one you have to create it yourself (using HTML, CSS, and JS). Here's an example of a custom address bar, and you may want to have a look at this issue in the Electron repository too.
I am relatively new to Firefox extensions development.
I want to implement an add-on on the lines of "clearly". (https://addons.mozilla.org/en-US/firefox/addon/clearly/)
How does one get the addon to have an overlay on top of the displayed webpage? i.e. on button click, the addon should display some custom text on a layer above the currently open web-page.
Also, Is it possible to set the display of this overlay with HTML?
What are the available options to achieve this?
Help greatly appreciated.
create a panel and insert to chrom document.
then open it with this code:
https://developer.mozilla.org/en-US/docs/XUL/Method/openPopup
set anchor to gBrowser.selectedTab.linkedBrowser
set panel width and height to same as the linked browser so:
panel.height = gBrowser.selectedTab.linkedBrowser.getBoundingClientRect().height
do same for width
https://developer.mozilla.org/en-US/docs/XUL/panel
if u need more help let me know ill write the code, its real simple
Technically you wouldn't even need to make it a Firefox extension, see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
I'm trying to make an IE add-on that works only in background, without a toolbar panel. I do not want my add-on to display a toolbar panel because i do not need it. I found an example add-on in Delphi, but how do I make it to work in the background without a toolbar?
The example project you provide implements a Tool Band. It implements the IDeskBand interface to display a toolbar in IE.
For the functionality you are asking for, you need to implement a Browser Helper Object instead, which is a completely different beast, and a very different implementation than a Tool Band.
I am using the new BrowserField2 in BlackBerry OS5 to display HTML content in my app. There are 3 options available for navigation through links in that content.
CURSOR navigation uses a block cursor and actually moves through the characters of the page. Not very useful for me.
POINTER navigation uses a mouse like pointer that you move around the screen and hover over elements. This could work but there is a bug however in that the browser field captures navigation and never lets go so this mode is effectively broken if you share a screen with any other managers. Once your focus enters the browser field you cannot move focus back out and into neighboring fields. RIM has acknowledged the bug but has no work around.
NONE which is for custom navigation but they offer no explanation as to how you would do this.
What I ideally want is to simply have trackpad movements move the focus through the links and highlight them. Then a click would activate the link. I assume I would select the NONE option above and implement my own focus navigation but I am not clear how this can be accomplished with the new APIs.
Is anyone familiar with the new browser2 component could give some guidance?
Thanks!
There's a workaroudn to getting back the focus out of the BrowserField using the NAVIGATION_POINTER.
I found it in this thread:
http://supportforums.blackberry.com/t5/Java-Development/BrowserField-2-Navigation-Mode/td-p/632172
"farahh" posted this:
I found out a hack..
with the navigation set to pointer mode, a click outside the browserfield manager invokes Manager.invokeAction(int). I used the getFieldWithFocus to verify which field has focus and then switch the focus to something else.
Cheers.
Nahuel
PD: i havent found out how to get the behaviour you want, i need that as well so if you got it working please let me know, its kinda urgent in my project =(
I actually reverted back to the older browser1 (OS4) component because the navigation problems in browserField2 (OS5) were a deal breaker for me. Luckily the OS4 browser does everything I need in terms of functionality and it has the exact navigation behavior I need and there are no focus problems mixing it with other views.