Custom Combobox Dropdown trouble - javascript

i am working in html for a custom drop down menu. I want to click the arrow and the list to open the hidden options, but nothing happens when i click the arrow? I do not know what is wrong. http://jsfiddle.net/Hunter4854/rrmJR/1/

The easiest solution might be to just bind the click event on the arrow so that it triggers the click even of the drop down like this:
$('.arrow').click(function() {
$('.custom-select').trigger('click')
});
jsFiddle example.
BTW, any reason why you're using such an old version of jQuery?

I simply put your .arrow div into the custom-select div and it's working. It doesn't really matter where to put your arrow since you position it absolutely) The working example: http://jsfiddle.net/skip405/rrmJR/6/

Related

How to fire a function when selecting an idem in a dropdown in jSuites?

I'm trying to create a dropdown menu with jSuites that fires a function once one of the items in the list is selected.
Unfortunately, I can't figure out how to fire the function. I tried with "onchange" both as attribute of the <div> and within the definition fo the jdropdown, but nothing seems to work.
I attach a fiddle here with a dropdown menu made with that works and does what it should, and two jSuites menus that should behave in the same way but they don't...
What am I doing wrong?
Can this be done at all?
Any help is welcome...
http://jsfiddle.net/2x4qnj1h/1/
use that instead:
onchange: refresh_dropdown,
you used a literal, not a function.
Documentation with examples : https://jsuites.net/v4/dropdown-and-autocomplete/events

Can't toggle bootstrap dropdown nicely with knockout

I'm trying to nest a dropdown inside an element which already has a click event bound to it.
I have disabled bubbling on the dropdown and created a clickhandler to trigger it manually by calling $(...).dropdown()
When I try to trigger a dropdown the dropdown box requires two clicks at a minimum before it begins to work.
When you use $(...).dropdown('toggle') it works on the first click but after that the functionality is broken.
Here is a JSFiddle that exactly mimics my structure.
JSFiddle
Just add this function in your script it's work fine
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
I update your jsfiddle click here

Why ComboBox is not working after applying Resize and Move functionality to PopUpDiv

I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.
Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.

Customize a CSS/HTML circular menu

I found a circular menu on the web that I'm struggling to customize since I don't know much about jQuery.
I made this fiddle : https://jsfiddle.net/zv5dr670/4/
If you click to the big blue button, it's working fine and all items are toggling and vanishing.
What I want is to make work this button with an other button ( click2 button here).
<button class ="mycbutton">Click2</button>
It's almost working but the Menu9 is still here while the other items are gone.
Any advice ?
Thanks,
you need to use
$('.mycbutton').click(function(e) {
toggleOptions($(this).prev('.selector'));
});
cause your .mycbutton button not a parent of .selector so you need to use .prev()
DEMO HERE

How can I prevent the dropdown from opening in a DropDownList?

I have a custom table which I'd like to use as the DropDown portion as a DropDownList.
Ideally, when users click on a DropDownList, it should show the custom table instead of the usual drop down. I thought it'd be easy to prevent the dropdown from opening without disabling the DropDownList control, however that doesn't appear to be the case.
Is there an easy way to prevent a DropDownList from opening without disabling it?
Edit: This has to work for an embedded IE 7 web browser, and e.preventDefault() does not work in that browser version
You can do something like this:
Basically, I have positioned an invisible div over the dropdown to block it, and you can handle the click with the onclick of the masking div.
EDIT: I have updated this http://jsfiddle.net/EdM7B/1/
<div id='mask' onclick='alert("clicked");' style='width:200px; height:20px; position:absolute; background:white;filter:alpha(opacity=0);'></div>
<select id='selectList' show=1 style='width:200px; height:20px;'>
<option>Test</option>
</select>
I had to use a sort of hack because IE doesn't seem to render divs properly that have no background colour set, so it wasn't working correctly. This works in my IE7.
If you want it to work in all browsers you'll need to add chrome/firefox opacity CSS or have some IE only CSS to apply background colour.
I think due to the way it's positioned above, the opacity is actually not working properly because the element is positioned absolutely, either way it seems to work. I originally had it as opacity 1, but that sounds wrong to me as we want it invisible, so I changed it to 0.
It's possible to stop the dropdownlist from showing by using jQuery's event.preventDefault in the mousedown event (demo: http://jsfiddle.net/RCCKj).
Also see this related question: stop chrome to show dropdown list when click a select
Put it inside a div like this:
<div id="dllDiv" style="width:200px;height:200px;">
< asp:DropDownList ID="DropDownList1" runat="server" style="z-index:-1000px;pointer-events:none;">
< /asp:DropDownList>
</div>
You should set the css property pointer-events to none, then you can show your table hidden in a div or loaded it by using ajax, something like this:
(document).ready(function() {
$("#dllDiv").click(function() {
alert('adasd');
});
});
Have you thought about using a mega menu for this, you can put anything you want in the dropped down portion - for example your table

Categories