How to do this effects for <option> and <button> with CSS and JS?
It's not real <select> or <button> element. The real form element would be (if it was a form element at the beginning) replaced with simple styled <ul> (one of the options). And javascript is used to hide select element, replace it with list and attach events to list items / anchors.
Edit: Gmail apparentyl doesn't use list, but divs. That's also an option.. logic behind it is still same.
Try this. You have to change images and colors.
Related
Right now I am using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/)
The multiselect option is exactly what I want to achieve, but I'd like if the selected elements appeared outside of the textbox instead of inline the others. Any quick solutions? Or should I be looking at a custom coded attempt?
A bit brute but might be effective. Add your own chosen().change() event handler (as per their docs) to the texbox and simply move the <li> elements from the textbox to wherever you like. So something along the lines of:
$("#form_field").chosen().change(
// detach from source and append to destination
);
I'm using the Chosen jQuery framework with a basic select statement.
I use the following line of code to open the dropdown:
$('#<id-of-your-select>_chzn').trigger('mousedown');
That statement opens the Chosen dropdown.
Then I want to select the top item which is a li element with the id: pt_chzn_o_1.
I've tried the following, but none of them will select the option.
$('#pt_chzn_o_1').trigger('mousedown');
$('#pt_chzn_o_1').click();
How do you select an option using Javascript/jQuery as if I clicked the top option with my mouse.
Why don't you just change the selected index instead? It seems like you are trying to achieve the same thing but go about it in the "human way" as oppose to the "programming way", like so:
$('#<id-of-your-select>').val('value-of-pt_chzn_o_1').trigger('chosen:updated');
Make sure to change both the jQuery selector and the value to match your circumstances.
This is what ended up working for me:
The initial click triggers an event to show additional fields(optional, only needed in my specific case).
$("#<id-of-your-select>_chzn").trigger("click")
This statement opens the Chosen dropdown:
$("#<id-of-your-select>_chzn").trigger("mousedown")
Execute this statement on the li element id of the chosen dropdown element you want to choose.
$("#pt_chzn_o_1").trigger("mouseup")
How can I get the value of a Drop list while hovering the options with the mouse without clicking (selecting) using JS or jQuery?
Ex.
List of Stuff
-Dog
-Cat
-Bird
When I move my mouse around the options of the droplist, it will tell me that my item is being highligted.
This isn't possible with standard selects, but if you need the desired effect badly enough you can create your own select components and back them with hidden inputs.
I'm having a few problems creating a multiple select checkbox list that appears when a user clicks a select field (I use the onfocus event).
As far as showing the list, that's fine, however how can one prevent the actual select field from showing a dropdown using javascript?
Why not! :)
DEMO
$('.sel').focus(function() {
this.blur();
window.focus();
$('.dropdown').fadeToggle(300);
});
Here is the solution I use to customize the appearance of my select and fileupload controls:
give your element (select) opacity:0.1 either by css or jQuery fadeTo() function
wrap your element with a container div and give it position:relative.
add a sibling (drop panel) to the element and give it position:absolute, top:, left:0 and width equal to the width of element.
show the drop panel using jQuery in $(select).click() event.
may seem weird, but works cross browser :)
Haven't tried to suppress the select dropdown, but if all else fails you can just create a custom form element. Such as:
<dl>
<dt>Please select an option</dt> <!-- Text -->
<dd> </dd> <!-- Style as downward arrow -->
</dl>
<input type="hidden" name="custom_select_value" value="selected option" />
Style the DL (or which ever markup you wish) to look like a select element, then use a click handler to bring down your multi-option box. Also populate the hidden input with JS when an option is selected to ensure the data is submitted with the form.
I needed a similar UX, so I created this:
harshniketseta.github.io/popupMultiSelect
Hope this helps you.
I'm trying to add details to a database by using ajax and table dynamic rows.
e.g.
----
{Customer: dropdown menu} | {Description: textarea} | delete
Add New Customer
---
When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)
Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)
Add new customer button creates a new empty row.
What libraries or examples can help me get started with this?
I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.
You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
And the jQuery :
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
In that function you could do something with the option element value if needed (an ajax post or whatever).
The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)
Use jQuery.
Use the tokenizing autocomplete plugin for jQuery
For the inplace edit use Jeditable.
I'd stay away from drop downs, they are almost always bad design, whether in a menu or selecting from a long list of options. For something like a list of customers which is hopefully likely to be long it is an awful choice of a UI component.
The only time that it really makes sense to use a drop down is when the list of options is short and well known. So for it to be acceptable it probably has to be a list of options which rarely if ever changes, is less than 10 or so items long, and is used frequently (so it is well known). Drop downs are painful.
Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.