I have a HTML drop down list with list of options. When user clicks on the dropdown list, first five options with scrollbar should be seen. I want to achieve this using JavaScript and CSS. As I'm new to these, please suggest how I can show the dropdown list with scrollbar so that can able to scroll and select an option from the dropdown list. Below is my HTML code:
<html>
<body>
<select>
<option value="one">Option1</option>
<option value="two">Option2</option>
<option value="three">Option3</option>
<option value="four">Option4</option>
<option value="five">Option5</option>
<option value="siz">Option6</option>
<option value="seven">Option7</option>
<option value="eight">Option8</option>
</select>
</body>
</html>
With the above html code, when the user click on the dropdown list, all options are seen without scrollbar.I want to show first five options with scrollbar.
try this https://jsfiddle.net/Ltkpshm9/ example i have added to the jsfiddel
or simply use,
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="one">Option1</option>
<option value="two">Option2</option>
<option value="three">Option3</option>
<option value="four">Option4</option>
<option value="five">Option5</option>
<option value="siz">Option6</option>
<option value="seven">Option7</option>
<option value="eight">Option8</option>
</select>
You can do this with just using html and css. You need to create a div that will contain your button as well as the "dropdown" div with the linked list inside. On the actual css for the dropdown div, you should specify a max-height to adjust how many links you want to show, as well as overflow:auto to make it scroll-able. Including a screenshot of how it should look, and here is an example just using HTML and inline CSS:enter image description here
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
max-height: 200px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
</div>
</div>
</body>
</html>
*Also I just realized that I created an example with links and yours uses the option element, but the same concept should apply. Just edit the css of the dropdown-content class to include option:
.dropdown-content a, option {//same css here}
Related
I have adapted some code from the W3 hoverable dropdown tutorial and want to make it so that rather than following a link when clicked, it passes a value to a function. A rough snippet of the HTML code is below:
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content" (change)="selectChange($event)">
<a value="egg">Egg</a>
<a value="milk">Milk</a>
</div>
</div>
I want to figure out how to get the value "egg" into the JavaScript function selectChange if the user clicks on that box, but currently, the boxes are not clickable and don't do anything. I would like to avoid using a <select> tag if possible.
Here is the W3 link I got the structure of this code from:
https://www.w3schools.com/howto/howto_css_dropdown.asp
You've tagged this with angular, so I'm assuming you're using that framework. If that's the case, just use (click)="function()".
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content">
<a (click)="selectChange('egg')">Egg</a>
<a (click)="selectChange('milk')">Milk</a>
</div>
</div>
Probably the best solution
How about an eventListener to all the links in the dropdown in Javascript that checks if when a link was clicked and then performs the function with the value of the element that was clicked?
Probably the easiest solution
Or maybe for just a few elements or if you don't feel like/don't know how to use an eventListener for this could always use some simple onclick events with a parameter.
function selectChange(selected)
{
//not sure what you want to do now
console.log(selected);
alert(selected);
}
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content span:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Item</button>
<div class="dropdown-content">
<span onclick="selectChange('egg')">Egg</span>
<span onclick="selectChange('milk')">Milk</span>
</div>
</div>
*In this example a replaced the a-tags with span as you probably shouldn't use an anchor-tag without a href.
.dropdown select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: blue;
font-weight: bold;
text-decoration: underline;
font-size: 20px;
line-height: 1.75;
display:inline-block;
background-color: #ffffff;
background-image: none;
border-style: none;
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right;
}
<div class="col-md-8 offset-md-2">
<span class="header"> COMPARE </span>
<span class="dropdown">
<select class="select_box" id="opts">
<p></p>
<option value="default">Select a dataset</option>
<option value="population">POPULATION</option>
<option value="popdensityperacre">POPULATION DENSITY</option>
<option value="percapitaincome">INCOME</option>
<option value="percentnonwhite">RACIAL DIVERSITY</option>
<option value="percentinpoverty">POVERTY</option>
<option value="medianhomevalue">HOME VALUE</option>
<option value="unemploymentrate">UNEMPLOYMENT</option>
<option value="percapitacriminalarrests">CRIME</option>
<option value="percapitaencampments">HOMELESSNESS</option>
<option value="medianhoursofsummerfog">FOG</option>
<option value="percentinliquefaction">LIQUEFACTION</option>
</select>
</span>
<span class="header"> BY NEIGHBORHOOD </span>
</div>
How do I get it so the box changes sizes depending on which selection is chosen? I thought it might work if I make it an inline-block and then set width to 100%.
The reason I'd like the box-size to change is that I'd like the dropdown arrow to be right next to the text, instead of staying in a fixed location.
So if I got it right, the solution would be to just add some :hover css to a class.
Look at this example on w3school:
https://www.w3schools.com/howto/howto_custom_select.asp
I clicked on "Try it yourself" and altered the code as I believe you want to.
With the following css code you can alter the div option as you want when you hover it.
.select-items div:hover {
background-color: rgba(0, 0, 0, 0.1);
height: 50px;
}
Hope it helped.
Explore the example for more things, they have css for all the parts of a selection menu.
I have an element (dropdown-content) that is displayed when its parent (Element2) is hovered. When no interaction with the element (dropdown-content) occurs I want it to act as it does now and disappear when the hover is over. But when the element gets focus (the select or input or somewhere else in the dropdown-content are clicked) I want it to stay displayed until it loses focus (clicked somewhere outside the dropdown-content), even when the coursor leaves the dropdown-content.
I have already tried to find a solution with the search and several things using CSS and/or javascript but was not able to archive what I want. Here is an example code to illustrate my problem:
.dropdown-content {
display: none;
position: absolute;
border: 1px solid black;
width: 300px;
z-index: 1;
}
.dropdown:hover .dropdown-content,
.dropdown-content:focus {
display: inline-block;
}
<ul>
<li>Element1</li>
<li class="dropdown">
<span>Element2</span>
<div class="dropdown-content">
<select>
<option>option1</option>
<option>option2</option>
</select>
<input type="text">
</div>
</li>
<li>Element3</li>
</ul>
I would prefer a CSS solution if there is a clean one but I am also fine with javascript, but I don't want a JQuery solution if this is possible. If this makes the solution way easier it would be also fine if the dropdown-contet just stays displayed when there is focus on the select and input only.
You don't need Javascript let alone jQuery for that. It can and should be done with pure CSS with the pseudo-class :focus-within.
.dropdown-content {
display: none;
position: absolute;
border: 1px solid black;
margin: -3px 0 0 3px;
}
.dropdown:hover .dropdown-content, .dropdown-content:focus-within {
display: inline-block;
}
<ul>
<li>Element1</li>
<li class="dropdown">
<span>Element2</span>
<div class="dropdown-content">
<select>
<option>option1</option>
<option>option2</option>
</select>
<input type="text">
</div>
</li>
<li>Element3</li>
</ul>
original post
Is it possible to run a js function by means of a dropdown CSS menu ?
I would realize a menu, looking like the habitual navigational ones, but aimed, instead, to run a different javascript function on each item, or, I think it's the same thing, to pass a different argument to a function and run it.
Is it practicable ? Googling, I pick the opposite (dropdown menu via js) ...
addendum
Thanks to the advice provided by some courteous members, I have solved my problem, attaching an event handler to each item of the menu. Therefore I post here the code. Thanks again.
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
<!--http://www.w3schools.com/css/css_dropdowns.asp-->
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
#myvar{
margin-top: 200px;
}
</style>
<script type="text/javascript">
function setVar(arg){
document.getElementById("myvar").innerHTML = arg;
}
</script>
<script>
var x = 0;
</script>
</HEAD>
<BODY onLOad="setVar(x)">
<div class="dropdown">
<span>menu</span>
<div id = "menudd" class="dropdown-content">
<p onClick="setVar(1)">item 1</p>
<p onClick="setVar(2)">item 2</p>
<p onClick="setVar(3)">item 3</p>
</div>
</div>
<p onClick="setVar(3)">again 3</p>
<P id="myvar"></P>
</BODY>
</HTML>
I don't know what you mean by a "CSS menu". You don't create menus with CSS; you create them with HTML. You use CSS to style them and make them look menu-like.
All HTML-based web applications are based on attaching behaviors (implemented in JS) to HTML elements (such as buttons or menu items).
Attach an event handler for the click event to the HTML element that represents a particular menu item, and provide whatever function you want to execute.
Im looking for a select box that i can use that has expandible optgroups
The options in the groups should not display until the mouse is move over the optgroup label
<select>
<optgroup label="group 1">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
<optgroup label="group 2">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
<optgroup label="group 3">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
</select>
I want to be able to do this becuase am going to have some very large options and it will help break them down.
If i am unable to do this through an HTML select box + JS i would like to build a customised dropdown that will support this using DIV tags. If anyone knows where i can find any information about this or a tutorial that would be great.
Thanks
NVM i found a solution that works,
I had to use HTML, CSS and JS to achieve what i wanted.
I copied this tutorial
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
and added the extra bits i needed to generate the groups and functionality.
The code that works for me is below....
This is the HTML to generate the layout
<div class='selectBox'>
<span class='selected'>Reset Filter</span> <span class=
'selectArrow'>▼</span>
<div class="selectOptions">
<div>
<span class="selectOption c1" value="reset" group="0">Reset Filter</span>
</div>
<div>
<span class="selectOption c1" value="online_booking" group="1">Online
Booking</span>
</div>
<div>
<span class="selectOptionGroup" value="2">>> Services Offered</span>
<span class="selectOption" value="SERVICING" group="2">SERVICING</span>
<span class="selectOption" value="MOT TESTING" group="2">MOT TESTING</span>
<span class="selectOption" value="TYRES" group="2">TYRES</span>
</div>
<div>
<span class="selectOptionGroup" value="3">>> Car Manufacturer</span>
<span class="selectOption" value="ALFA ROMEO" group="3">ALFA ROMEO</span>
<span class="selectOption" value="ASTON MARTIN" group="3">ASTON MARTIN</span>
<span class="selectOption" value="AUDI" group="3">AUDI</span>
</div>
</div>
</div>
This is the Jquery JS code that creates the dropdown
function enableSelectBoxes(){
$('div.selectBox').each(function(){
$(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
$(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
$(this).children('span.selected,span.selectArrow').click(function(){
if($(this).parent().children('div.selectOptions').css('display') == 'none'){
$(this).parent().children('div.selectOptions').css('display','block');
}
else
{
$(this).parent().children('div.selectOptions').css('display','none');
}
});
$(this).find('span.selectOption').click(function(){
$(this).parent().parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().parent().siblings('span.selected').html($(this).html());
$("#filter_type").val($(this).attr("group"));
$("#filter_value").val($(this).attr("value"));
});
$(this).find('span.selectOptionGroup').click(function(){
var group = $(this).attr("value");
$(this).parent().children("span[group='" + group + "']").each(function(){
if($(this).css("display") == "block") {
$(this).css("display", "none");
}
else {
$(this).css("display", "block");
}
});
});
});
}
And finally the CSS
div.selectBox {
position: relative;
display: inline-block;
cursor: default;
text-align: left;
line-height: 30px;
clear: both;
color: #888;
margin-top: 20px;
}
span.selected {
width: 167px;
text-indent: 20px;
border: 1px solid #ccc;
border-right: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: #f6f6f6;
overflow: hidden;
}
span.selectArrow {
width: 30px;
border: 1px solid #9FD573;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
font-size: 20px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
background: #9FD573;
}
span.selectArrow,span.selected {
position: relative;
float: left;
height: 30px;
z-index: 1;
}
div.selectOptions {
position: absolute;
top: 28px;
left: 0;
width: 198px;
border: 1px solid #ccc;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
overflow: hidden;
background: #f6f6f6;
padding-top: 2px;
display: none;
max-height: 400px;
overflow: auto;
}
span.selectOption, span.selectOptionGroup {
width: 80%;
line-height: 20px;
padding: 5px 10%;
}
span.selectOption{
display: none;
}
span.selectOption:hover, span.selectOptionGroup:hover {
color: #f6f6f6;
background: #4096ee;
}
span.selectOptionGroup {
display: block;
font-weight: bold;
font-style: italic;
}
I don't think this is possible with an html select box, because not all browsers support mouse events on option groups within a select box. A few things you may want to try would be:
Jquery accordion
$(document).ready(function() {$("#accordion").accordion();});
This is limited due to the fact that an accordion can only have one item open at a time. If the user wants to compare options, all at once, they're screwed. Check the docs for more.
Use a checkbox or something similar, in a separate field, to control what is selectable in the select box. This way you would be able to simply disable certain options , but they would still be visible so the user would know what they where missing out on. Or you could completely hide the options which would solve your problem of having huge options.
jqTree (github project here)
I've never used this, but it looks like just what you want, except for the fact that it doesn't use the standard html select box.
I noticed that you just answered your own question , but I'm going to post anyway because jqTree may be useful and others should know that a standard html select box does not support mouse events on optgroups.