I'm developing an app using Angular and Semantic-UI. It should be accessible even for people who use keyboards for navigate the app.
I'm experiencing some problems with modal:
$(".my-modal").modal({
autofocus: true
});
$(function() {
$("#open").click(function(){
$(".my-modal").modal('show');
});
});
Here is the full code of my sample: http://jsfiddle.net/s6o0tdp7
As you can see when you open the modal the focus move on the first button. I would like to have focus on the entire modal, at the begin of the modal container, so users can move with tab button to go to the other sections of the modal that lay below.
Besides the modal should prevent users from going to elements of the page that is under the modal.
How to get these two behaviours?
Related
I have an app with 2 pages. The first page is the main menu, and when you navigate to the 2nd page, a keyboard open himself inside a TextField (autofocus).
What I want to do is disabling every ways of closing the keyboard. Right now, it doesn't close when you submit, but that's the only thing I achieved to do.
The user can still close it with every other ways (in my case, it's the android navigation bar who has the left button who can dismiss it).
Is there any ways to keep the keyboard open during the whole time an user stays on a page?
EDIT:
I found this package : keyboard_visibility to do that inside initState:
KeyboardVisibilityNotification().addNewListener(onHide: () {
setState(() {
FocusScope.of(context).requestFocus(_focus);
});
});
Each time I hide the keyboard, onHide is called and I can execute some code. Here I try to focus the TextInput again to re-open the keyboard immediately. When the keyboard is hided, the function is called, but requestFocus doesn't seems to work.
Try this,
FocusScope.of(context).requestFocus(FocusNode());
As the title says, i am working using wicket 6 and it would be very useful if the modal window was to close when i clicked outside of the bounds of the modal window, anyone have any idea on how i might go about this?
Try by adding this JS to your page:
$(function() {
$('.wicket-mask-dark').click(function() {
$('.w_close').click();
});
});
I have a survey with many input elements, and I have a progress bar that shows how much of the survey that has been filled out/answered by having a click event on the input elements. This works fine until someone use tab control to navigate through the form. Is there a tab control event, or some other event that I can use to track this behaviour?
Use the event focus to capture when the user is tabbing around in your controls:
$.on("focus", "input", function() { });
Is it possible to show a popup only in a certain gwt tab or a panel in that tab?
I've found methods to show a popups over the whole page, but not only in specific tabs.
When you switch the gwt tab, the popup should not be visible anymore and new popups should be able to be created, which again are only visible in the switched to gwt tab. Switching back to the other tab should then show the first popup again.
Optionally the rest of the tab, which is not covered by the popup, should not be clickable.
Are there any native methods for this? The gwt Popup Panel only seems to create popups for the whole page.
Edit: I've tried using smartgwts Window which seems to work just the way I want it to. When I switch the gwt-tab, the popup is no longer visible and returns when I switch back. The only problem is, that it isn't displayed right. The frame is placed on the far left side of the browser tab, while the content is displayed on the far left of the gwt-tab. If I move the content, the frame moves too. The frame is visible over the whole browser tab, while the content disappears if I drag it over the gwt-tab edge.
I guess it's because I'm adding a Window to a gwt-Panel. Is there any way to fix this without changing everything to smartgwt?
Not exactly, I think.
But, you can do something in the tab events, like hide the popup in tabs that it doesnt belongs. To avoid the lag of show/hide the popup, you can do this in the BeforeSelectionHandler, like this:
getView().getTabPanel().addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>()
{
#Override
public void onBeforeSelection(BeforeSelectionEvent<Integer> event)
{
showPopupupsForTab(event.getItem());
}
});
In showPopupupsForTab you can show the popups for this tab (you can handle this with a map or something) and hide the others...
Something like this.
Hope it helps.
I'm trying to implement a send button on my custom FB tab app.
Using the XFBML share button works, but when you click on it, the pop-up (aka "flyout") gets hidden due to the overflow: hidden; css.
Changing the overflow attribute to visible, for example, doesn't have a effect (probably cause I'm telling FB to resize the tab:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
</script>
Screenshot of the problem:
http://i.stack.imgur.com/sHH1a.png (I'm a new user, not allowed inline images)
Is there a way of telling the box to display on top of the right FB sidebar or on the left of the button instead of the right?
Do I need to create a dialogue box with share & like buttons? (this might become problematic as I intend to display a send button next to each row).
Link to raw tab index.php : http://openair.co.nz/facebook/events/
You may consider positioning the Send button to the left side of the tab iframe, and make sure that the bottom send button has enough space below itself to open a popup without losing it again. No other known solutions (my opinion)