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).
Related
I do a lot of presentations with PDF slides where I annotate (by that I mean draw lines freehand with a pen) the slides while showing them. One of the best tools for this (on Windows) is the Edge browser. You can smoothly draw lines and erase them easily.
However when the browser is in PDF fullscreen mode (not F11 nor not the Maximize button... you get to "PDF Fullscreen mode" by clicking the icon in the upper right with a diagonal line with arrow heads on both ends). When you are in this mode, you cannot access the annotation tools, you can only move forward and back through the slides.
What I would like to do is program a keyboard shortcut (activating it with my macropad) to enable "Draw" mode (while in fullscreen) and another shortcut to pull up the color menu selector.
I imagine this should be as simple as writing some JS and sticking it in a bookmark but my search fu is lacking. I'm not sure I've seen anyone do this.
You should not need much code more than a simple few lines of HTML, here are different types of iFrame in Full screen Edge. So main thing to note is that the right one has no means to annotate the center one is fairly limited, but the Left one is the "The Full Monty".
Write your inline frame to show pdf as almost full screen area (allowing for the toolbar) you can have it pop up or pin it, then save a collection in the browser bar to access easily.
Here note the use of dual sidebars allows to include more than just one iframe so you can compare/display two sources just by sliding up and down. The toolbars can get a bit "glitchy" with dual frames as they both respond to one set of mouse operations, so best if you pin them (optional), otherwise you need to part exit full screen mode (not a problem) to refresh both frames as one.
So here both PDF img can be annotated separately in full screen mode to show two aspects if neede, or put 2 views of same document side by side.
<body translate="no">
<div id="doc1"><iframe src="1.pdf"></iframe></div>
<div id="doc2"><iframe src="2.pdf"></iframe></div>
</body>
Finally whilst in full screen mode using favorites allows you to touch top EDGE (pun) to jump to other PDF collections or external media
I'm working on a project that gives people a new browser homepage to be displayed when they open their browser window or new tab. This page will have icons/tiles to popular websites and at some point their own customised websites.
What I want to do is to have tiles that look like that of Windows 8 and have the flip and zoom to full screen effect that they do in the real Windows 8 start screen upon clicking on it, where it will show the icon and site title while the page loads.
I'm not looking to load the site into the homepage, as it will direct them to the site being clicked on, but until they get to the site, it will show the icon and site title on the screen.
Any suggestions as to how this can be achieved along with some examples would be awesome.
Thank you in advance for your time, and I look forward to your response.
There's a pseudo-class if you want to have fullscreen specific styles.
https://developer.mozilla.org/es/docs/Web/CSS/:fullscreen
I think most of your problems will be: selecting a grid system or thechnique to layout those tiles. The zoom and flip effects should be done with the transform property.
Checkout what I've found: http://metroui.org.ua/tiles.html (A style guide with win8 components)
Here's another example by the amazing Sara Soueidan: sarasoueidan . com/demos/windows8-animations (couldn't paste the link because of my low reputation points)
If you need JS or you want to just go with cross-browsers compatibilities, check out this lib. It's just great: GSAP
Pro Tip: this is going to be your friend: backface-visibility: hidden;
Chrome recently changed their PDF viewer's navigation widgets. Instead of a subtle rectangle in the lower-right corner, there's now a pair of bubbles and a large bar (screenshot below).
This is no good. Is there any way to keep these widget from appearing when I move my mouse?
To solve the issue, just append #toolbar=0 to your file path.
Documentation Reference for my Answer (Read this): https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
I'm making a webapp and want to use all the screen and avoid scrolling if possible. There will be buttons that need to be clicked in many areas of the page.
The area at the bottom of mobile safari is not clickable when the tab bar is open and I rotate to portrait and back to landscape.
I have set the body height to the same as window.innerHeight instead of 100% so that I don't have to scroll to get to buttons at the bottom.
bodyEl.style.height = window.innerHeight + 'px';
It may be the case that this area is not usable for interactive content.
Here is a demo with code:
http://plnkr.co/edit/327sUQ?p=preview
You should be able to open a preview of it on iPhone 6 Plus by clicking on the fullscreen button 'Launch the preview in a separate window'.
Update:
It definitely looks like it was a bug in iOS8, it's working as expected in iOS8.4, 9.0 & 10.2 from my simulator.
I may have found an answer to your issue, but would love to hear if you can confirm. Setting the content of your page to have the following styles:
overflow-y: scroll (allows you to scroll below the viewport, but only if necessary per the length of the content; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
in addition to your height: 100% (which forces the content to fill the viewport)
appears to force the iOS menu (tabs and address bar on top as well as nav bar on the bottom) in Safari to always appear. That way, button clicks to the top and bottom of the page are no longer "dead zones" and will actually work instead of opening up the Safari menu.
I'm searching for a solution for a similar problem - this is not an answer, but an attempt of explanation.
First of all - currently, I cannot confirm this behavior - seems like it's fixed in iOS 8.4 (12H143). Didn't know exaclty in which version I saw it the last time.
Nethertheless, I try to explain what I've found out (until we decided to not bother anymore).
The not clickable area is not always a dead zone. If you scroll up before you click, chances are high you get it working. Thus I think the (empty) standard navigation bar is there (height and behavior of the elements are similar/the same), even if it's empty (all element moved to the address bar) in landscape mode.
Btw.:
There's another (similar) problem with the iPhone 6 plus (not fixed yet).
If you have a position: fixed element on the top of a webpage, in landscape mode and only if there are two or more tabs open (and the tab bar is visible), you can click through this element (even through buttons) - as if the whole thing isn't there.
I know this question is a bit old, but since the issue still exists I thought I should share my experience...
As of now there is NO fix for the issue, but there is a workaround. The solution jennz0r provided may work for some, but I didn't like the idea of the menu bar always showing. I saw a website that had the issue solved... well it seemed to work at least. I didn't find anything in their css or js.
So what was the fix? Since the "dead zone" is 44px in height they simply made their floating bar 88px height :D Users would instinctively tap on the top/center of the button and it will almost always work at first try!
Another workaround would be to simply make the button/bar float 44px from the bottom.
"If it's stupid, but it works... it ain't stupid..." ;)
I did a lot of research about this topic and didn't yet find a satisfying answer:
How can I make a scrollable list (iPhone SDK Dashboard List) inside some other html content? If I create a list inside a html body and I try to scroll the whole page is scrolled. I know there is this "double finger" scrolling, but that's not what i want.
Is there some way to prevent the whole iPhone Safari Webpage from scrolling and instead letting other lists inside scroll? Like redirecting java script events?
Background: the idea is to mimic a real native application behavior with tabs at the bottom and a selection list in the body.
Appreciate any hints!
Thanks,
Patrick
there is yet another possibility, with slightly nicer scrolling simulation:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
Ok, after consulting some friends, I found the answer to this question:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
have fun.
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
this is a really great script!! It's smaller than the doctyper version and easier to work with since it doesn't have so many elements being repositioned. It also allows contained elements to be touched easier by the user. and even cooler, when you touch into a text field and the close the type panel the divs being positioned by this script snap right back into place (where as the doctyper version just has them floating out of place after the type screen retracts).
A very nice script.
A new scrolling library to keep an eye on: Scrollability.