I have a html page created from backbone , underscore.
I wish to allow users to use the keyboard tab or arrow to move focus to various clickable divs and when the user presses space bar or enter send click event on that div. Since models are coming from some other source each model when rendered brings with it 2 clickable divs . Apart from models I have a quit button and array of clickable table of contents .
Is there some standard way to achieve this aim?
Related
I’m looking to create a pop up where by the user inputs data, then select one of two radio options by the UI seems to screw up when I have a combination of both text type and radio type in a pop-up.
Here is my code:
I was also looking for same thing today.
But look at this discussion, which says mixing of radio, checkbox or text box is not available right now.
I also tried to add mixture of radio and text field in alert. But styling never appeared correct.
I am moving on to implement this feature using a ionic page so that I can use Ionic Modal. This behaves as a modal window on large screen and as pushed page in smaller screen.
I needed to send back data from parent page to child page and other way too. Thus Ionic Modal suited best for this in my situation which can be used on component/page.
Refert to this detailed usage instructions for Ionic Modal.
Same feature has been requested from Ionic team.
I'm developing with Ionic Framework an app where the main view is a map (working with Leaflet). And in the side menu, there are some forms in order to allow differente searches on the map (shortest path between 2 points...).
The thing is, every time I click in one of the inputs (text, checkbox...) of the forms, the side menu closes.
Is there anyway to avoid that? It is possible that the side menu only closes and shows when I tap in the 'burguer' button?
It's as simple as remove the 'close-menu' class from all the 'ion-item' elements inside the ion-side-menu
First off, I'm pretty novice when it comes to Flash and AS3.
I am trying to create a displayObject that contains 12 buttons for a mobile app. Since there are twelve buttons that will all open up into seperate menus they obviously all won't fit on a mobile devices screen. This is why I want to have all of the buttons on one display object that can be dragged up and down to show the buttons not currently displayed on the screen.
I am running into numerous problems while attempting this.
1) If I make the object containing the buttons draggable, which is behind the buttons, I can't click it through the buttons in order to drag it(unless I hit a sweet spot where there aren't any buttons but this isn't efficient for the user).
2) If I make the object containing the buttons draggable and put it in front of the buttons then I can't click the buttons in order to open the menus and access what is contained within them.
3) For some reason all of the buttons are seperately draggable when I don't want them to be. For example, I click anywhere on the screen (whether the touchID point is on a button or not) to move the entire list of buttons and if I happen to be clicking a button then, instead of moving the entire list, it moves that one button.
So the main question here is "How can I create a list of buttons and scroll through the list using a drag method (such as the settings menu on your phone) without dragging the buttons apart from each other." So the containing display object is draggable, and the buttons are clickable.
Some guy named Glenn does a good job with his example: http://rabidgadfly.com/2010/03/as3-clickable-button-inside-a-draggable-movie-clip/
However, if you click the yellow button in his example you can drag it out of the gray box. I want my button to remain stationary relative to the gray box. So you can move the gray box but the yellow button remains in the same location within the box but you cant drag the button around within the box.
I am not familiar with accelerometer events for the smartphones, but I do have an idea on how to fix this with regular actionscript 3 listeners. (You can just convert these to whatever is used by smartphone listeners)
A solution that comes to mind is to have a mouse down listener and a mouse up listener on the whole drag-able box. And when a mouse down event fires, you start a timer to go off in about a quarter of a second, and when it does you then set up a enter frame (or a timer based) function that fires every frame. This will update the whole box's position every frame corresponding to the current mouse location (your dragging box effect) and when the mouse up listener fires, it stops the dragging (and at this points, if the mouse is up, then the user is not touching the screen at all).
Also add a mouse click listener to every button. This way, with the quarter of a second timer, you KNOW that if the user simply wants to click a button, then they will click, leaving less that a quarter of a second between the mouse down and mouse up events (so that the dragging never starts) and the button is only clicked. And if the user holds the mouse down for more than a quarter of a second, then you KNOW that they must be trying to drag the whole thing.
This seams like the only way to differentiate between a user wanting to drag the box, and the user wanting to click a button inside it.
Obviously it does not have to be a quarter of a second, it can be any length of time that you want, it could even be no time at all, but then this might mess up things when people only want to click the button and accidentally slides it when clicking.
If you have any questions or problems, please comment and i'll try to help.
The stock ApplicationBar only seems to support circle icons with optional text menu items. I'd like to get the design that you can see when you go to Settings -> email+accounts -> add an account and select Google, Facebook or Hotmail. There is one rectangular "next" or "sign in" button. Thanks for any pointers!
The is no support for rectangular buttons in the application bar in the SDK. You can fairly easily create a similar effect using a XAML Grid at the bottom of your page.
However watch out that if you use a TextBox to enter text on your page, then the onscreen keyboard can cover your buttons, confusing your users. In that case you're better sticking to normal app bar circular buttons.
I am creating a small form where the user
Enters some text in an input box
Chooses from a bunch of options
regarding the actions that need to
be taken with the data
Clicks a submit button
Disconnect does something similar in a better way:
you can click on any of the five divisions here. This is wonderful because it makes it easier for users to perform the same task and simplifies choose and click to click.
What technology is used to display such a menu?
A nice way of doing this is - which doesn't need javascript - is to use radio buttons, but make them invisible. The clickable text and icon go inside of the label for each radio button, so you can click the label or icon to select the radio button.
This ensures a few important things:
Only one item can be selected
The selection is passed back with the form
The browser's native form handling still works
Accessibility options still work
You do have to be careful to make the labels obviously clickable, since you lose the visual cue of having the radio buttons visible.
IE6 & 7 also require a hack - they have a weird behaviour that a display:none or visibility:hidden radio button or checkbox cannot be selected by clicking its label.
Here's an example: http://www.spookandpuff.com/examples/clickableToggles.html
(I haven't included the icons - you can easily add these by setting them as the background in CSS for each item (don't use <img> tags).
Edit Oh man - I just read the question properly! Sorry, you want the behaviour to be 'choose' rather than 'choose and submit'... An easy way to do this is to add some javascript to the inputs to have them auto-submit the forms when they're selected. I've updated the example to show this.
Looks like JavaScript: https://github.com/disconnectme/disconnect.me