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.
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 have a web form.
I have a group of about 20 images displayed on the page. I want the user to be able to drag five images into a holding area, and to be able to arrange their order.
On submit, I'd like the names of those images, and their order, to become part of the $_POST data.
I'd appreciate it if someone could point me to a working example of this functionality that I can reverse engineer, point me to an open source project that offers this functionality, or can provide the code to do this.
I am using PHP, with jquery and js
Thank you.
If already using JQuery, go for JQuery UI.
They have actions called DRAGGABLE and DROPPABLE which you apply to divs. It's a very elegant, easy to use setup.
Examples:
Look to the right for more examples
http://jqueryui.com/droppable/
As for posting, at submit time you can iterate through the DOM, find the images in the "holder div" and post that OR you can hook into the event that fires every time an item is 'dropped' and write that to a hidden or other form element what is in each box.
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.
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.
First off I'm open for suggestions of alternative ways of doing things.
To get going here is an image of what I want to achieve(kind of, sorry for the BAD paint job)
OK.. I have a request that gets fired off and sends back a ton of json containing information about Pupils Names, Sex, Age, Location.
I want to build a sort of table in the form of list elements, each tuple containing one unique student that the request returns.
I want to style it in a specific way, so it would appear as a row but each piece of data appears cellular, as in its a specific width with a border etc. As in each peice of data is a unique html element with a specific css style, but it appears to the user as a single row. (As in the 2nd and 3rd image in the drawing.)
Hovering over the data elements in a tuple(row) changes the hover state of all the cells in that row.
The end cell contains a plus..clicking this will update data in another div on the page. Whereas clicking the other cells in a row will take the person to another page related to that particular pupil.
Without using anything other than Javascript(librarys are okay i.e jQuery) and CSS how is the best way to go about this?
Is my thinking of how to do it okay or is there a better way?
Its also worth noting if my requests brings back 25 results, I only want to show 10 at a time but the person must be able to somehow view the remaining 15. How would I go about this also?
Thanks in advance.
I don't have the tools to test this at the moment, but it might work to set a hover property on the row-container, for example:
div.row:hover div.cell {
background: #006;
}
Or something like that.
For the part of your question about showing 10/25 elements...you could hide it with JavaScript and have a button to show them I guess, I'm not sure about why you are doing this. It might be better to implement something server-side if you want to paginate results.