how to create custom selection of div elements? - javascript

I want to make some divs which I can select.
JSFIDDLE
I also want to shift select the divs and multiple dives should only be selected if the user press crontroll (like in a normal windows explorer).
How can I do that?

A few years back I tried to make my own tree viewer that allowed fancy selecting features and expanding using divs and CSS. I found it much easier to use the select tag, with the size attribute so it wasn't a dropdown, the multiple attribute to give me fancy selecting abilities, and option groups to denote parent child relationships. Is that an option for you?

You can use jQuery UI library to achieve this quickly and efficiently. It works with CTRL key but not sure about SHIFT key.
Here's the link: http://jqueryui.com/selectable/

Related

Select dropdown (option, select) css javascript

I'm currently trying to make a select dropdown (option, select) with a design like the following picture
enter image description here
When selected > 10 then the select dropdown option appears input text to fill in the desired amount.
Has anyone ever made something like this.
Thank you.
I think you'll just add an if statement for > 10 then the input display will change from none to whatever you want.
The kind of drop down list requested can not be constructed simply using a combination of HTML select and option elements. This is because the only permitted content type of Option elements is text, although HTML character entities may be used. (If you need to expand character references when setting an option element's content, use its innerHTML property instead of texContent.)
I would suggest searching for an already available HTML/JavaScript/CSS widget fulfilling a similar purpose, whether it be a self contained package or library plugin, before starting to write your own code from scratch.

leave the <select> object expanded after selection

I am not sure if it is possible but I would like to leave the HTML <select> object expended using JavaScript, JQuery after the selection. Any ideas?
EDIT
What I want is that; if user selects more option from select list, I will append some more options to select element and leave it open. If user selects something other than more option, I will collapse the list. I can get a hold of other functionality but only problem here is to keep the select element open.
It's not possible directly. You'd have to implement something that looked and worked like a native <select> but which also had the feature you want.
edit — check Mr. Kling's answer; there might be a way to make that work, sort-of.
You could come very close with this:
$('#selectID').change(function(){
$(this).attr('size', $(this).children().length);
});
The size attribute specifies how many options to display (default is 0).
DEMO
You might have to make some tests whether this works in every (recent) browser. But imo this would be better than trying to simulate a select box (screen readers, etc).
You can not expand the select element with JavaScript. You can use select multiple, but that is probably not what you want.

Style / Replace a select box using prototype / scriptactulous

I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.

Trigger select tag to show options

I'm doing my own Ajax thing with dropdowns. I've positioned an input over a select tag. When stuff is typed into input it collects from the database and populates the select menu. Problem is its not noticeable. Is there a way to make the select menu open as if a user has clicked on it?
Nope, you're going to have to use something like a DIV with overflow: auto to emulate the behavior of an opened select.
The HTML5 <datalist> element would help out here, but since there are only a few browsers that support it at the moment, you will have to rely on a JS implementation.
The following was the least buggy implementation I could find from a simple Google search
http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml. It supports Ajax as well as up/down arrow keys.
StackOverflow also uses it's own implementation of auto-complete when you start typing tags, maybe you can get some ideas from looking at the source code?

How to put an image/icon before select option text?

Looking to place different icons in front of items/options in a HTML select box.
In theory, you could make use of the CSS background-image property in the <option> element, but that doesn't work flawlessly in (cough) IE.
Best what you can do is to use jQuery/Javascript to mimic a dropdown with a bunch of <li> or <div> elements. As far no one comes to mind (I've never had the need for such a dropdown), but you can find here an overview of the "better" jQuery dropdown plugins, there must be one which suits your needs, for example this one.
The only way to do it would be to dynamically replace the select with a DHTML dropdown, the vanilla control doesn't have that capability. Using a DHTML dropdown has the benefit that it should degrade gracefully for those with javascript disabled.
You could do it quite simply with jQuery, have your normal <select>, grab it and replace with a hidden field, have your fancy DHTML dropdown with images (hidden positioned <div> with an unordered list could do it), attach to the onclick event of the items and make that update the hidden field with the selected value.

Categories