I have a custom slider, that is only shown when the user clicks on a certain font awesome button.This model works quite well for me. I add an event listener to the slider object for the focusout event, and then just show or hide the slider.
I do notice however that when the user resizes the browser screen, this is not seen as a focusout, because in this case my slider does not disappear ( I would like it to).
So my question is, what event will capture the resizing of the browser window, in order for me to hide my slider this way?
Thanks!
Related
I'm working on an Electron app, attempting to create a sidebar. At first, only the arrow should be showing, while the rest of it is off the screen. When a user hovers over the arrow (displayed below), I want it to pull out the rest of the sidebar to be used by the user. However, I'm having a problem where because the browser window size remains the same, the css hover animation goes off the browser window and disappears. How can I translate the browser window on hover? Or if there is a better solution, please provide it.
Current Progress
I have a couple of form definitions in my main HTML file.
I would like to display these forms in a modal window, when the user performs certain action, such as click on an icon.
I have followed an article on how to do it for links (hrefs). But now my requirement is to get the same working for clicking on an icon.
Thank you,
Harriet
The answer is to write a java function, that will explicitly set the location of the window to where you want the url to point - example:
function openPreferences() {
window.location = '#openPreferences';
}
I think the most simple solution would be to create a LinkBlock Element and set the Background to the Icon's Image, which will allow you to turn it into a Link, thus further allowing you to open your Modal Window with it.. Simply create your Modal as Display None, and upon clicking the LinkBlock (with your Icon as the Background), make it change the Modal property to Display Block, etc.
In my metro style app (windows 8) I have created an page overlay and a flyout displaying an message. When the user clicks on the page the flyout message goes to hidden. But I want flyout to remain even when the user clicks on the overlay page. I am using HTML5 and WinJS.
Is there anyway I can achieve the above scenario using someother control or can I prevent the page to stop reacting to events when the user taps/clicks on the screen.
This is not really supported -- the Flyout itself doesn't have the concept of being persistent/sticky/modal. If you look at the code in base.js, you'll see that it doesn't expose any code to leverage the inbuilt sticky behavior that is used in the appbar (which is kinda of flyout, it turns out.
There are a couple things you can do:
Pass "_sticky: true" to the constructor of the flyout. e.g <div data-win-control="WinJS.UI.Flyout" data-win-options="{ _sticky: true}">
Attach a click handler to the top of the document, and if it's on the click eating div that the flyout creates, cancel the event
Create your own UI by simply adding a new div to the body, and absolute positioning it.
I have a very simple Chrome extension which produces a bubble pop-out in the top-right of the screen. In the bubble I present the mobile version of our site.
Currently when the extension icon is clicked the bubble pops out and the mobile homepage loads. The user can click around within the bubble and use the mobile site as they wish.
However, once the user clicks outside the bubble is closes. Clicking again repeats the above process.
I wondered if there was a way to make the bubble pop-up/out persistent? So, instead of it disappearing when the user clicks elsewhere it stays loaded until the user clicks the extension icon again. This way the button acts as an on/off switch rather than a single event trigger.
Is this possible, and would someone mind directing me to the code which would help me do this?
As stated in the FAQs, this is not possible. However, chrome.windows.create may meet your needs.
When a user clicks my browser action I'd like it's corresponding popup window to (almost) fill the screen. I need the:
height/width of the current window
WHEN
the user clicks my popup
I know I can get the height/width of the current window with chrome.windows.getCurrent(function(currentWindow) { console.log(currentWindow.height); });, however I don't know how to tell that my popup was opened (event), or how to dynamically set it's size (setting document.body.width or window.inner/outerWidth in the popup's inspector doesn't seem to do it). Thanks!
Edit: found http://code.google.com/chrome/extensions/browserAction.html#event-onClicked , however it says it will not fire it a browser action has a popup, is binding to onload in the popup page what I'm trying to achieve?
window.resizeTo resizes the browser window.
You can pass this information between your parent window and the child popup in any of many creative ways. The simplest I can think of that's pretty much assured to work would be to tack on the dimensions in a query string or hash for the child window URL and then to parse it with JS.
The usual disclaimer applies that there is almost always a better "way" to do things than resizing the browser window.