Need to implement a feature where auto suggest shows first 10 result, when user scrolls it fetches further 10 from server.
I have implemented auto suggest using rich faces <rich:suggestionbox> but it does not support paging or infinite scroll.
It would be great if someone can guide me with some JSF based component or way of customizing the existing suggestion box.
Related
I'm currently working on a project that requires building a web page with a Calendar.
The Calendar should suppport booking (which means positioning boxes within the Calendar that span on a number of cells)
I built something simple using css grid, but later on I found out the customer uses IE11.
I tried using AutoPrefix to make the grid compatible, but it messed it up even worse and I think I'll waste more time adjusting then just using something other than grid.
I'm about to scrap my design and just go old school with <table> but before I do that, I wanted to ask for recommendations. Is there a better solution?
This is what it should look like:
I'm very new to JavaScript and currently using JSX to design a website. I am hoping to add an infinite scroll component where the user scrolls to the bottom of a list of, say, 5 images, and then 5 more load, etc.
I have built my own rest API server and plan to implement my JS such that upon each user scroll to the bottom, it will call on this API to load the data for another 5 images; however, I am lost on how to best handle this scroll event by the user.
I am trying to find a tool/component that would help me implement this scroll that is already embedded in the standard React library. It is important that this is not something I have to install outside of the React library. I have read through tons of React documentation and S.O. posts, but have been unable to find one- could someone point me in the right direction?
This one should do the work
react-infinite
Or native
I need to create a ui for a web page that can be used for the system mic volume indicator. For eg. when user speaks then based on the volume the indicator shows the bar filled.
I wanted to create that kind of ui using any dojo widget. Do we have any widget that I could readily use ?
Note: I'm only looking for a UI help here. We already have a browser plugin that communicates with the microphone.
Dijit has a progress bar widget at dijit/ProgressBar. I set up a simple example here. It may work for your needs, as you could update its value whenever you receive an update from your browser plugin that's communicating with the system volume.
The dijit slider ui worked as frank suggested in the above comment. I had to hide the slider handle using the css and it worked perfectly.
Also I chose slider over the progress bar because I don't need the %age to be shown.
I have been looking for a Javascript based datagrid to use for Mobile websites/applications with no luck. I have tried jqGrid, which seemed to work fine except for the lack of kinetic scrolling. I know jqGrid does now have a (beta) mobile version, but unfortunately is is built upon jquery mobile, and I am using a different framework (which spat the dummy when I included the jqquery mobile scripts)
So, my question is, does anyone know of a Javascript grid that does support Kinetic scrolling (or know how to apply this to an existing grid)?
Would need this to not be reliant on any other UI framework (such as jquery mobile - nothing against this, I just happen to be using another one and it didn't seem to want to coexist)
If it supported knockout type of binding then even better!!! (I know this is expecting too much).
Any pointers would be greatly appreciated.
Thanks in advance for any info!
Kinetic scrolling is a built-in feature in Webix DataTable http://webix.com/widget/datatable.
The grid control processes all touch events without a hitch. It runs scrolling touch events especially well http://webix.com/blog/datatable-1000-columns-and-more/.
I know this is a really old question, but I just wanted to leave a note here as well if someone ends up here using the search.
You should check out , which is a top-notch Javascript grid component, and has kinetic scrolling on touch devices. It’s part of Vaadin Components: http://www.vaadin.com/components
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.