Develop Reference

Fullscreen to Maximize on MacOS using JS

I'm creating some custom MacOS 'Traffic Lights' for my React/Electron App. I've managed to get the Close and Minimize buttons to work perfectly fine, however, my Maximize (green) button will go fullscreen but when its clicked again it will not return to normal.
Here is my code for the functions that are called to the buttons: https://sourceb.in/8f930dc034.js
Any help or advice would be much appreciated.

Try using currentWindow.isFullScreen() instead of currentWindow.isMaximized().
You're using currentWindow.isMaximized() to check if you're full screened when you should use currentWindow.isFullScreen() instead.
See the docs for: currentWindow.isFullScreen()
Old answer:
I had problems creating my own traffic lights too, but it turns out Electron can do this for you with the titleBarStyle option.
To use it:
var winObj = new BrowserWindow({
titleBarStyle: 'hidden',
});
This will create some native traffic lights in the top right window corner.
Here are different values for the titleBarStyle option:
default
Results in the standard gray opaque Mac title bar.
hidden (Used in the example).
Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights") in the top left.
hiddenInset
Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge.
Have a play around with it and see what works for you.
See the docs for the BrowserWindow options (search for titleBarStyle).

Scrolling Behavior of Background Image on Deployed Website Is Erratic. It Is Supposed To Be Stationery, Expected Behavior On Local Build

Built a Jekyll website based on a 3-party theme (MASSIVELY).
Code of website available here: https://git.ikrypto.club/FNB_Japan/FNBJapan
When you visit the deployed website, the background image does not remain constant as expected (You can kind of see the expected behavior on the theme demo, https://iwiedenm.github.io/jekyll-theme-massively/ (Edit: This is actually a better example, https://massively.ghost.io/ ). Basically, the background image is expected to remain constant, and the foreground should scroll with the user.).
You can witness the difference in behavior if you go on our website, https://fnb-japan.info .
However, when the code is ran locally and built with
bundle exec jekyll serve
The background image does not move (as expected). What's happening and how can I remedy it?
Note: It appears that this problem only appears on FF Nightly, and not Chrome
Edit: This appears to be a problem with Firefox Nightly, as opposed to the website. This question is technically resolved.
Edit 2: It appears that the problem persists, and is due to a bad implementation of parallax scrolling causing parallax to flicker.
Edit 3: This problem only occurs once the window is of a certain width, and the difference isn'ta ctually between local/deployed but rather different window sizes.

The background div (#bg)
is being transformed by
this code in the bundled parallax plugin (as evident from setting a "break on attribute modification" on the bg element in the Chrome inspector), which in kind seems to be activated by this invocation:
// Background.
$wrapper._parallax(0.925);
Removing those lines should get rid of the parallax effect too.

android webview previous content in background

Not sure if this is a problem due to using transparent backgrounds, but I am using a webview to show a webpage to the user, however if the user loads another url from a link or javascript is used to dynamically insert new content into the page the rendering seems to glitch.
By glitch I mean that the page remains in the background whilst the new content / page is loaded in the foreground. They end up overlapping and making everything very unreadable.
I have hardwareacceleration turned off on my webview to enable transparent background, could that be causing the problem?
It's similar to this question Android Webview Content Overlapping While Using Transparent Background.
Many thanks.

This was due to the fact I had transparent background on, I removed this and it was okay. Not the best solution but one that is preferred over having glitchy graphics. I mimiced the transparent background by matching the CSS background properties to that of where my WebView was positioned.

Had the same problem on Google TV boxes and managed to fix this by forcing WebKit to redraw the DOM from jQuery as in:
$('<style></style>').appendTo($(document.body)).remove();
or (if you don't like jQuery):
document.body.style.display='none';
document.body.offsetHeight;
document.body.style.display='block';
You can inject either of the code fragments dynamically from Android as in webView.loadUrl("javascript:(function(){ /* put the force-redraw-code here */ })()") or do it directly from JavaScript after you altered the DOM.
More related fixes at How can I force WebKit to redraw/repaint to propagate style changes?

Cannot overlay div if background color is transparent

I am having an interesting problem. I want to have a box with a border overlaid on top of a vlc web player. I can get it to work just fine if the background color is not transparent, but as soon as I set it to transparent, it gets drawn behind the player. Does anyone know how to get around this?
Here is a jsfiddle that shows what I am talking about (You need to have vlc web plugin installed in order for this to work. Additionally, you can only do overlays with firefox, for some reason).
http://jsfiddle.net/AsGuL/21/

This post is old, but if someone with the same problem find it (like me), here is the solution :
VLC plugin have the attribute "windowless" you can use in this situation.
Just add windowless="true" in the embed tag.
From the documentation :
windowless: (since VLC version 2.0.6) Draw the video on a window-less (non-accelerated) surface and allow styling (CSS overlay, 3D transformations, and much more). Default: false
https://wiki.videolan.org/Documentation:WebPlugin

Cross Browser dropdown/popup menu over a flash movie

I need to make my dropdown menu apprear over the top of a flash movie, how is this done cross browser?
It can be done, IBM do it: http://www.ibm.com/us/ so do GE: http://www.ge.com/
Setting the the WMODE to transparent doesn't work for Firefox
Putting it into an Iframe doesnt work below IE7
Any one know the best way to achieve this?

Set the wmode to transparent and if necessary, use z-index as you would on any other element, that really should work for Firefox too.

here is an example with all three modes: opaque, transparent and no wmode at all
http://www.communitymx.com/content/source/E5141/wmodeopaque.htm
use transparent if you have something under the flash movie that you want visible,
opaque if you don't want to show what's underneath
and set a higher z-index for menu than the flash movie has

Firefox for linux shows flash on top of everything. Regardles of wmode or z-index.
EDIT:
I just found out that the Linux issue described above can be "fixed".
You need to add an iframe with a z-index between the swf and the layer you want to put on top of it. The iframe needs to have style="display:none" initially and you must use javascript to set display:block on it after the flash plugin has initialized. The Iframe will hide all swfs that are below it on linux.