Does anyone know how can I make this http://prntscr.com/9z7pk with HTML and JS? I made this image so you can understand better what I mean.
I already have this done with 2 multiple select inputs but I don't know how can I insert in html to put the checkbox.
Thanks in advance!
If you find yourself having a lot of these complex widgets in your application you should look into a framework like extJS or other similar frameworks. It will save you headaches and will prevent you from reinventing a wheel that has been reinvented too many times already.
Unfortunately a multiple select won't let you inject tickboxes or other arbitrary content into menu items - it relies on the OS-native multi-select hotkeys (typically shift and control).
What you could try is styling both items as ol or ul lists, and the document items as li elements within them. Whenever you add an item to the right-hand list, render a new li element and update an <input type="hidden" /> with a comma-delimited list of selected items.
Depending on how you want the interaction to work, you could:
Implement add/remove buttons as depicted, requiring you to implement multi-selection in the lists yourself. A widget framework such as extJS (as zi42 mentioned) can help with this.
Put an "add" link next to all items in the left box and a "remove" link next to all items in the selection box, except for the mandatory items.
Dispose of the dual boxes and instead place checkboxes against every item in a single, unified list, excepting the mandatory items which should have a checked-but-disabled checkbox input.
Related
Currently we have a page which has options with each section consisting of lots of checkboxes - a section might have 20 checkboxes due to each one being a separate option and then the page might have 10 sections. This takes up a lot of space and looks really messy so we experimented using select2 along with multiple option so now, by default, the space is no bigger than a text input with the added advantage that the list is searchable (when focused).
The issue is that some users have fed back that they load the page and then use ctrl-F in their browser to find the relevant setting section - using select2 (or any select based option I guess) that is no longer possible as the options are not visible on the screen.
It is something similar to the tags section at the bottom of the page - for example if I search for jQuery when focussed in the tags box it comes up but if use Ctrl-F in the browser it would not etc.
Is there a way to make the options in the select list "searchable" using the browser search without having to resort to listing them all which would then defeat the point of the change?
We had thought of displaying the options in a comma list, for example, with the same text colour as the background in a really small font but it is clunky or maybe add some sort of JS search box on the page so, whilst not using the ctrl-F route, it still makes it searchable but were curious if there was there a way we could do this via Select 2 itself or any other routes we could explore using the native browser search?
I'm using kendo ui to create some grids. The code example bellow is the one that drived me into my implementation. I faced a bug during the development and I tried some workarounds but none of them worked.
http://dojo.telerik.com/AsUDo/14
Here's the problem:
I need to create a grid with sortable behaviour (in the whole tr).
The whole line gets sortable only when I comment this line:
//ignore: "TD, input".
But then if I change the Product Name and then click in Unit Price, for instance, the text in the Product Name field is set to the previous value. It just doesn't get updated.
If I use the
ignore: "TD, input"
attribute though, the fields get updated whenever I type the Product Name and then change the Unit price or change any other field, but the only sortable column I get is the one with the template and that doesn't meet the requirement that my client asked.
Any thoughts?
The sortable mousedown interferes with the cell save order of events, so when you edit the row and click off to another cell, the sortable events "kill" the editing events and your change is lost.
If you change your sortable filter to
filter: ">tbody >tr:not(.k-grid-edit-row)",
This "disables" the sortable events on the currently edited row so that the editing events can complete.
The downside is that if you want to sort/drag the row being edited, you must first click off the row(so that it is no longer the .k-grid-edit-row) and then go back and drag that row.
This is how I have my sortable grids set up and I just live with the downside...or you live with using a sort handler instead of allowing the whole row to be dragged.
You may be able to play around with the filter to overcome my downside, but I have not been able to and in the grand scheme of things, there are more important things to spend time on...i.e. try to get the client to relax the not-that-important requirement.
I am trying to mimic a listbox as what would be available in MS visual studio. I have found HTML elements
select
and datalist
The problem is that these are really for data entry. What I had in mind is to have search results shown in a list but they are selectable? I need to know the index of the item(s) chosen so I can retrieve more additional detail for a subsequent screen. The elements above are more like drop downs. I want something like a textbox with a scroll bar that allows for multi select. Is that possible for HTML5?
I know VS had a form toolbox item that did just that.
Any advice?
Thanks in advance.
Matt
This could be an fun question. I'm planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:
The box will contain 2 different text-aligns making two neat rows.(see picture)
At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)
Some of you already know where this is going, I'll need to make the thing like you'd make any such menu in GUI programming. I assume some object oriented Javascript programming?
(I'm looking for technical details as I'm novice at Javascript and jQuery(but not at programming), I'm basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I'm also perfectly aware that I'm normally not going to be using any actual html in this GUI.)
So my question is, how should I set out to do this according to you?
You will not be able to modify a normal select element to achieve this, you will have to
Create a proxy-pro-select-element and hide the original one.
Copy option elements and create equivalent one in your proxy
You will have to also keep both selects in sync.
Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.
Technical details:
Read how to implement a jQuery plugin
In your plugin's init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
onclick on select-div, show dropdown div after re-positioning correctly
See code like this and modify
You should be able to accomplish something similar to this with jQuery and jQuery UI comboboxing, http://jqueryui.com/demos/autocomplete/#combobox
And then modify _renderItem to change the layout of results in the dropdown. You can search for the following in the view source:
input.data( "autocomplete" )._renderItem
However, I would try to avoid having like/dislike buttons in a combo box because it goes against normal web conventions.
I'm trying to make a page that allows users to select one shirt, one pair of pants, and a pair of shoes from an existing selection (horizontal scrollers for each group). The user then submits their selection and I receive an email of the users selection. Ideally the user should be able to see their complete selection either as an isolated element on the page or each scroller should focus on the chosen element.
I've been unsuccessful getting the selected element to display separately somewhere on the page.
As far as having three separate scrolling windows I was going to create three forms and put them in iframes, but it seems as though getting multiple forms to post with one submit button, and processing them is quite difficult.
I could scroll over all three groups simultaneously and this way keep it one form (shirts, pants, shoes) but this would be pretty ugly.
Here is a link to my scrolling form made from only one group. http://www.evan-livingston.com/test/list.php
I'm new to all of this, and I'll sacrifice some polish in order to get a working system.
What approach would be best to accomplish this system?
thanks in advance.
more elegant looking suggestion (using only client side programming)
use forms and create a table with each element as part of TD or inline list
on click--> highlight the image
on double click--> push/append it to a new div with info(link, name etc) about image and do the needful in the form of anchors and list tags
this new div can be displayed now or on a click of a submit button as a list of selected items. add an anchor to remove an item on click.
well there can be many ways to go about it. this is just one way and avoid the pain of using php.
since u asked about approaches: i prefer client side programming to php but thats purely based on my experience. use jquery to help u move around with js.