I want to developed a list, <ul><li></li>...<ul>, that shows every <li>element separately, and user must have to swipe from right to left to see next element.
Photoswipe do the that, but I need to show images with maps areas instead of <a href...><img ... /> </a>.
Do you know how can make a list where every list element is shown in one page, and user must have to swipe an element to see the next one?
You can use iScroll to do this. It makes it possible to scroll horizontally, as it is shown here. It also works with jQuery Mobile (here is an example for that).
Beyond this, you can take a look at iScroll's website and their code and examples at GitHub.
Related
I'm working on an app that involves inputting the amount of cards players ended up with, and ordering them in a list. But if theres a 2 or 3 way tie, I want the user to be able to have a menu that lets them select the order of who had the highest card to lowest card, that way I can organize the list. How do I get the user to order them, like what kind of Alert/Popup lets me do that?
Edit: Basically I was asking how to make a picker that lets you arrange multiple items into a specific order but it seems the best thing to do is just to have a stack appear with buttons for each item, where you can click them and go from there to create your order. Hope this helps for anyone in a similar situation!
For that kind of user interaction where they are doing more than just tapping an option (in your case, you want them to order the various cards), I would create your own custom view rather than use an alert or action sheet or similar.
The way you implement will depend on how you want it to look. If you want the view to appear on top of your current view (a bit like an alert does) where it only takes up the space needed for the content) then you can embed in a zStack. If you want it to slide up from the bottom as almost the same size as the full screen then you can use a sheet (sometimes also referred to as a modal).
A little difficult to explain how they look visually - if you google image search “SwiftUI sheet” then you’ll see what I mean (if you aren’t already familiar with them)
ZStack
you put your current view in a ZStack then create a new view which goes in the ZStack after it but you wrap it in an if statement so it’s conditionally shown based on a Boolean being true.
E.g.
if gameTied { ChooseSortOrderView() }
then when your game finishes - if it’s a tie, you set your Boolean to true and up pops the new view.
You can pass in the tied cards, get the user to sort them via drag and drop, form, picker (whatever you want), submit it. Then set the bool back to false to make the view go away.
sheet
The other alternative instead of using a zstack would be sheet so you get a modal view appear. Similar approach but instead of the ZStack, you use a .sheet modifier.
I have an ons-list which contains a lot of ons-list-item, by clicking on each item I show detail page, when the user taps on back button the detail page is pop and it gets back to the page which contains the list but the current position is top of the list, since there are many of items user needs to scroll down to find the last item.
Is there any way to scroll the page to the last position it was or jump to a specific item?
That behavior depends solely on the browser itself. Some of them will remember the last position and others will not. If you want to force it to show a specific position, you can use the OnsenUI's postPop event and manage there the scroll with, for instance, Angular's $anchorScroll. Hope it helps!
Im a little newbie working with Aplication Express, I want to create an aplication which its structure could be something like this example.
http://apex.oracle.com/pls/apex/f?p=36648:1:110593396161288::NO
Anyone have some ideas to create it?
I just tried creating a List from Shared Components and then set it in a region with Page Region Template Position 3 and another Chart Region with Page Template Body (3), but in my case the side bar is placed on the right when I want it on the left... I have tried all the Template Position combination as possible.
Also when I click a value from the list, the page is opened on another tab. How can I open it on a specific region? As a frame for example
Any help will be greatly appreciated
Having a left sidebar depends on the page template you select. Some page templates will have a left sidebare, other a right one, others maybe both. And since templates are part of a theme, it may be that some templates under some themes may not have a page template that offers what you'd want.
So the first you need to do is look at what page templates you have available in your chosen theme. You can do this by going to the Shared Components and selecting templates from there. Scroll to the Page Templates and see if you can find one there.
While it's a good guess that the sidebart region will be in position 3, and position 3 is in the sidebar, it's best to verify. You can do that by checking the html of the body of the template. See if there is a region assigned to a sidebar. You'll have to divine this from the markup or an example page and which one it is (position 2? position 3? 4?).
Pro-tip: from the Shared Components > Templates, in the report overview, you can preview certain types of templates, such as the page template. Just hit the preview button and you'll get a general idea of the style and the region positioning! When viewing the template in detail, you can also preview from the preview link in the right hand menu list.
As for the list: the example you linked has a list region on the left sidebar, but all those links are links to other pages. Thus, there are as many pages as there are links in the list.
If on your environment the links are causing a new page or tab to be opened up, then that likely means the attribute target="_blank" is present on those anchor tags. Again though, this just means that that markup is being generated by the chosen list template. Try another list template (by editing the list, under Source you can chose the template) or take a look at the theme's templates. You can find the markup for the individual list items there.
It'd be better not to concern yourself too much by trying to fiddle around with iframes just yet, because even though that'd be possible it is not an out of the box feature. Unless you're already really familiar with eg javascript I'd stick to page links until you're more familiar with the environment.
We have a list that uses a custom renderer containing a label, a checkbox and two icons (which have click events). This list needs to be made WCAG 2.0 compliant and in order to do that we need the list to be keyboard navigable.
The problem is with being able to move from one list item to the next and have the focus move to the label for the next/previous list item. Specifically, when the user enters the list using TAB button, the label for the first list item receives focus (highlighted box around text) and the entire row in the list is highlighted as the selected item.
However, when the user then presses the down arrow key to move to the next list item, the next row becomes highlighted (is now the selected item) but the focus remains on the label of the previous row (highlight still shown around label for row 1). The only way to get the focus to move to the newly selected row is to tab through the checkbox and two icons. This isn't a big deal if there are only a couple list items but would be a pain if there are 20+ rows in the list.
Is there a way to get the focus to move to the label of the newly selected row as soon as the user moves (using up/down cursor keys) to the new list item? I know a picture would help but I don't have anyway of posting a screenshot online. Any help would be greatly appreciated.
You're going to have to dig into how focus works in Flex. This is not a complete answer, but hopefully you can put together a solution that works for you. I did this about 4-5 years ago in Flex 3, but it should be similar in Flex 4.
How Focus Works in Flex
The main things to know are the FocusManager singleton class and the IFocusManagerComponent interface.
The FocusManager moves the focus around the UI based on user interactions (mouse clicks, keyboard navigation, etc.).
If a component implements the IFocusManagerComponent interface, then the FocusManager will include it in the "tab" loop and allow the component to be focused via keyboard navigation.
How Focus Works With Flex List Components
You've already stumbled onto the peculiarities of how focus works with the List component and item renderers. The Flex List components implement IFocusMangerComponent and so when you tab through the UI the FocusManager sends the focus to the list.
The List may or may not focus the item renderers. In Flex 3 you had to be using editable item renderers for this to happen, it may or may not be the same in Flex 4.
Some Ideas for Solutions to Your Problem
I think there are numerous ways to solve this. Use some combination of these techniques:
override the protected keyDownHandler() method of the List component. I don't have the code handy, but if you look at it's implementation in the List class you should be able to make your overridden version set the focus on the next renderer.
use methods of the FocusManager to find components in the tab loop: getNextFocusManagerComponent(), findFocusManagerComponent(). Check the docs there are others that will be useful. For example, when the user presses the down arrow, you can let the next item renderer get selected, then use findFocusManagerComponent() (passing in the newly selected renderer) and then tell the FocusManager to focus it with the setFocus() method. This is probably not exactly the right approach ;)
By the way, the FocusManger is a Flex singleton object, every UIComponent in Flex has a focusManager property you can use to get a reference to it.
consider disabling focus on objects that don't need to receive focus (like the Label in your item renderer). There are numerous properties to do this: focusEnabled, hasFocusableChildren, mouseFocusEnabled, tabEnabled, tabChildren etc.
consider disabling focus on the List component, but then making your item renderers implement the IFocusManagerComponent interface. Implementing the interface is simple, you just declare it in your class (there's no actual methods to implement). The tricky part will be now your item renderers need to have key down handlers (just override the protected keyDownHandler() method that all UIComponent objects have).
I think there are other techniques you can use, it's just been too long since I did this. I'd be happy to provide more help if you get stuck somehwere...
Ok, so I have this li list with about 24 list elements. I want the webpage to be able to automatically scroll to the point where I assigned a specific li active/current on onload. How can I do this using JavaScript?
Javascript has a Window Object Method, scrollTo(), for scrolling (read about it here: http://w3schools.com/jsref/met_win_scrollto.asp). However, this can be inconvenient if you don't know the exact coordinates you want to jump to. One alternative worth trying is using a named link like <a id="active"></a> and telling JS to load the page with #active at the end of the URL. That's always an easy way to force scrolling.