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?
Related
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.
I have an unusual situation. I have a drop down list that allows my users to select one of a number of different scenarios. My problem is that each scenario is about 100 words long. I want to show the user everything and a radio selection box would not be appropriate. What happens is that because of the very long rows my dropdown list appears so wide that it goes off the edge of the page.
Is there a way that I can split up text (I'm using C#) and add new lines so that dropdown list box contains "multi line" selections?
Hope this makes sense to you.
I don't think it's possible without some scripting. You can add width and white-space:pre-wrap to your select tag, but that only wraps the visible part. You can't, as Madmargigan suggested, use a title to show the complete string (the title won't show).
I have prepared a very basic script to demonstrate how you could do this with javascript. See this fiddle. It may give you ideas?
You cannot do this with the standard html dropdownlist. Some frameworks have workarounds for it (for instance, see ASP.NET's dropdownlist). There are also javascript libraries that offer solutions to this problem as well.
I have some HTML documents that are converted to PDF, using software that renders using QtWebkit (not sure which version).
Currently, the documents have specific tags to split into columns and pages - so whenever the wording changes, it is a manual time-consuming process to move these tags so that the columns and pages fit.
Can anyone provide a way to have text auto-wrapped into the next column/page (as appropriate) when it reaches the bottom of the current container?
Any HTML, CSS or JS supported by QtWebkit is ok (assuming it works in the PDF converter).
(I have tested the webkit-column-* in CSS3 and it appears QtWebkit does not support this.)
To make things more exciting, it also needs to:
- put a header at the top of each page, with page X of Y numbering;
- if an odd number of pages, add a blank page at the end (with no header);
- have the ability to say "don't break inside this block" or "don't break after this header"
I have put some quick example initial markup and target markup to help explain what I'm trying to do.
(The actual documents are far more complicated than that, but I need a simple proof-of-concept before I attack the real ones.)
Any suggestions?
Update:
I've got a partially working solution using Aaron's "filling up" suggestion - I'll post more details in a bit.
Create a document with a single page and all the text in a single column. Use JavaScript to cut the text into parts.
Use pixel coordinates to locate the paragraph/element that doesn't fit anymore. Move it and everything below to the next col. If a "page" already has two "col" divs, start a new page.
After all pages have been created, count and number the pages. Fix even/odd stuff, etc.
Will take some time but it's automatic.
Another approach would be to add all the content to a "source" div and move items to the col div until it's full and repeat with the next col.
Have a look at Prototype or jQuery; they should give you lots of tools to move stuff around in the document.
[EDIT] Instead of only relying on jQuery functions, I suggest to create one or two objects which keep track of the current page and the current column, etc. These give you stable foundations to stand on from which you can fire the helper methods.
Does anyone know the code fogbugz uses for styling their selects? I'm interested in getting some firefox functionality (when a fixed select width is set for the select, the options width show up expanded to fit long option values).
It looks like fogbugz is using a select still, but they've added in an input that shows the current value and maintains the fixed width. I can't find the code that does all this however. It's exactly what I need.
They are using some AJAX and it is not actually a select list, it is more akin to the auto complete drop down like Google uses on its front page. YUI, jQuery UI, ExtJS, etc all have similar functionality if you are looking for a toolset.