Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
Is there any jquery library using which it is possible to move menu bar horizontally? What I want to do is I have a menu bar which contains five items (Home, About Us, What We Do, Technologies, Contact Us). It is a dynamic menu bar and if the admin wants he can add more items to this menu bar. So suppose he adds three more items to the menu bar like (Item1, Item2, Item3) then new menu bar will look like (Home, About Us, What We Do, Technologies, Contact Us, Item1, Item2, Item3). And also he can add even more in future. Now what happens is on adding more items to the menu the newly added items are not displayed properly because page width is defined at 80% and it cannot be increased. So what I was trying to do is to provide a horizontally sliding menu. Means two arrows will be available at both the ends of the menu bar and visitor can press left pointing or right pointing arrow to access the menu items.
Well so far I have not come across any jquery/javascript for this so I tried some other jqueries but they are for images and what happens is on pressing left or right arrow the whole menu slides but I want only one item to slide like on page load if user presses right arrow then home will be hidden and the menu bar will display like this (About Us, What We Do, Technologies, Contact Us, Item1). Mean on each right arrow press each leftmost item will hide and right most items will start showing up one by one.
If you guys need more clarification I want Firefox like horizontally sliding functionality for my menu bar. In Firefox when more and more tabs are opened then after certain number of tabs two arrows appear at both ends and user can press arrows to slide and access the tabs.
Thanks for your help in advance.
A sliding menubar does not look good. I may suggest some plugin that you can find here
but, i suggest to change your mind about the design, and have something like this:
When the user clicks on the Plus button, you can take him to a page where he can see as many options as he wants.
Or, add a drop down next to the menu bar where user can see all the options.
Even if there are many such libraries present. You will yourself have to code them and use in your page.
Or simply you can download a free template which makes use of it and edit it as per your requirement.
Though using such free templates without proper license is not professional.
You can try this though at the primary stages.
Do R & D on them.. edit and see the effects..
More you will spend time on understanding it more you will learn..
Wish you Good luck!!
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am trying to achieve something like this:
The data is something like: Root Category -> Sub Category -> Products.
We have something like 3000+ products. Showing all products slows down the device (if there is something I can do to render faster, please let me know), so I've cut them down to sub-categories instead, where there are about 5-12 sub-categories within each category, and about 200 products within each sub-category.
The Code
List Component:
https://gist.github.com/Fl4zher/5e6f90d3d10e494d0f19395231f25946
TabBar:
https://gist.github.com/Fl4zher/f42afbbc6a57602d0ed4c682d5ac0a20
What I've experienced
The list will be a bit laggy even with 200 products.
When I press on sub-category at tab menu, it takes a bit while to take action (about 1-2 sec).
When I scroll, the tab menu doesn't follow up quite well.
After using the tab menu few times, it goes slower than before.
What I want
When I press on a category from tab menu, I want it to scroll to the chosen sub-category list.
When I scroll, I want the tab menu to follow along with the current shown sub-category list.
First of all, keep away from ScrollView for this type of use case where you have to render lots of data dynamically, Scrollview is a scroll container that renders all the data once if you have lots of data which will cause performance issue and will make JS thread busy.
Now you have options to use
RecyclerView
FlatList
SectionList
Now all the above three list view provide onEndReached method and onEndReachedThreshold (Threshold to trigger the onEndReached or distance from bottom)
Before reaching to end of the list make a network call to your server and fetch newer data and add it to the list like this [...oldData, ...NewData]
Set your initialNumToRender to 10 or 20 (Which covers the view and have some scrollable distance to the bottom)
Set maxToRenderPerBatch so all of the renders will not be rendered even if it's loaded into the list.
Set windowSize so List will maintain it's a view for a scrollable view and will not unmount the view when it goes out of the view.
Use Section List and react-native-fast-image
Old Answer:
I would suggest you use Flatlist with lazy loading
Please add pagination, load 50 items, when scroll ends load next 50. Even if you fetch all 3000 items at once, do render 50-100 at a time.
For images use react-native-fast-image
Do not render all 3000 items at once, it is unnecessary as the user may not scroll the whole list.
From an end user point of view. If I have a list of vertical divs with different content in each div, should I provide up/down arrows to reorder the divs or should I allow the user to drag and drop the divs into a particular order?
Drag and drop would allow the user to place the div anywhere in the vertical list but may not be obvious to the end user that the divs are movable.
An up/down arrow beside each div would provide visual cues but would be awkward for the end user if they wanted to move a particular div up or down by a large number of places.
In relation to the above, I am biased towards drag/drop due to my use of Moodle for teaching. We did have a training course which overcame the visual cue issue. I'm aiming my app to be as user friendly as possible without having to teach the user too much (if anything).
Is there a particular CSS styling for a div that provides a cue - like a gripper hand to drag and drop and can I place some kind of visual cue around the div using CSS.
Any input is most welcome and I hope you understand what I'm trying to achieve here.
P.S. The vertical list can be quite long.
You may get some better answers to the usability questions on the User Experience Stack Exchange. My own anecdotal experience having used an interface where items could only be moved up or down one item at a time in a long list was that it was a total pain, and when drag-and-drop was finally implemented, it was a breath of fresh air.
I also have conducted a usability test (task 1 in this PDF) where a simple label of "Drag to add a new ..." (it was a duplication interface, not a reordering interface) on top of some pill-shaped elements (with a "grabby hand" cursor and change of color on hover) was quickly discovered by 8 out of 8 users without any prompting.
As for your technical questions, there are a few different CSS cursor styles you could implement (in particular, cursor: move;, cursor:grab,cursor:grabbing (my preference is for 'grab' on hover and 'grabbing' while dragging). I've shown some here: https://jsfiddle.net/xnho95oL/, as well an idea for some "placeholder" elements that might appear (and could presumably expand or otherwise change appearance when dragging an item over them).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I would like to create the layout as shown in the following picture. I am currently using Twitter Bootstrap's layout and controls to create a web application.
There are outer containers below one another and each outer one has containers within them. I would like all containers to be collapsible i.e. I would like to minimize each one, including the outer containers. All containers should be shown on screen on load.
When all inner containers are minimized / collapsed, the parent outer container should then collapse as well. I am also open to suggestions on the location of the minimized parent containers (to the left, top or bottom).
I am not sure how to create this layout (either with the accordion control or with panels or any other suggestion anyone may have) and would like to know if anyone has a suitable suggestion?
Some suggestions and thoughts. I hope it's guidance of somewhat!
Functionality
You might be able to use the built-in js to manage this, but not too sure about it. However, I believe the collapsability is executed with js but that it regulates css-code such as display and visibility. I also believe that these collapsable scripts are triggered by the js's in the end of the document, and it only does so depending on the screen resolution. So I don't know for sure how much of the scripts you could actually use for this type of active choice of collapsabilty. I'd look into coding it myself if I were you.
Type of conent?
What kind of content do you want in your div's? (Title A.1 - Title C.3). For better user experience I'd suggest a layout something like the picture I included. Especially if the user wants to view it from a mobile device, but not exclusively. Text in a vertical angle is basically just pain for the neck. But if you insist on that approach I'd suggest Icons.
A suggestion for the layout regarding usability and user experience.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I am developing a website and as a part of this website to design a webpage just for showing 11 elements which about the principals of the company. Each one of these elements has a long description. The website design is as following: menu bar with logo at the top, side bar at the left and body at the right.
At the beginning, I was thinking to list the elements on the side bar and the description of each elements will be appeared on the right when the user clicks on a specific element (using javascript), but later on the customers don't like this design and they said it will confuse the user since he will need to scroll down for reading a long description for just one element and then scroll up to select another element. Besides that, how will the user know the flow of navigation of this webpage? which means that the elements on the left and when he clicks on one of them, he will see the description on the right?
So how should I design this page? please tell me if I should use specific css layout or javascript or jquery plugin (mention the name of the plugin if it is possible)
first, you can play with the basic principle on this fiddle. Playing with "position: fixed", float and negative margins does the trick.
Then you can look at this page for plenty examples.
But your best bet is to use any decent jquery menu plugin, they all all provide this functionality. just google "jquery menu" or "css fixed menu", or a mix to have tons of choices.
For javascript libray, use jquery itself.
The 11 elements that you are referring can be displayed in the following way:
. **Principal 1**
Description of Prinicipal 1
**Principal 2**
Description of Prinicipal 2
Initially only the div's containing Prinicipal1, Principal 2 etc. will be shown to the user. The description of each prinicipals will be hidden.
When the user clicks on the title of Prinicpal1, display corresponding description.
Use $("<>").show('slow); And if the description is already in expanded state, the user can click on the principal again to hide it.
This will be a very good experience
Let me know if you have any further doubts
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Background:
We are developing a web application that includes charts. Currently one can left-click on a chart point to zoom/drill-down into that section of the data. We are adding some other functionality that allows users to add meta data to data points. I know users will be exclusively using Mozilla, though I shy away from anything that limits to a single browser. No js libraries please.
Question:
What type of "click should I use for adding metadata to an element that already has a left-click (hyper-link)?
Some alternatives I've brainstormed:
capture oncontext menu of right-click (this is abhorrent to me)
double-click
ctrl-click
make left-click open a context-ish menu that has the existing left-click as well as new functionality
Are there any conventions for these? What would you find most intuitive?
Rather than having a single click zoom in, why not use a double click instead? Personally, I find that to be more intuitive when viewing something not to mention it being a fairly common standard.
Put some kind of affordance (maybe a small icon) next to the link that responds to a single click. Else, go with a right click.
Try to meet the users expectations. What do they expect to happen when they single-click, double-click, etc... i.e. How do other applications handle that action?
I would change your idea from a type of click to a specific mode in the chart.
The problem with a special type of click is that there is no affordance for the capability that you want to provide. There is no apparent thing in the user interface that says, "The user is able to add meta-data to data points." Users would only be able to learn about this through trial-and-error or training. Or, perhaps, a note on your app that says, "Ctrl-click to add meta-data." But that is not elegant.
A better approach might be to have a mode button. I'm picturing a toolbar. Think about Microsoft Word, where selecting the Highlight tool turns your pointer into a highlighter. In highlight mode, you can click and drag to highlight text. You can then switch to other modes, like the default text mode. Perhaps you should have an "Add Metadata" mode.
In general for UI design, if you're trying to do something that seems non-standard, think about how existing products have solved the problem. How does Microsoft Excel let you add information to a data point in a chart, for example? Maybe it doesn't. But are there other products that do?
My vote is the "make left-click open a context-ish menu that has the existing left-click as well as new functionality". That needs the least amount of documentation to explain to users how to use. And for a web app usually users expect and read zero documentation.