How can I turn this into a single dropdown menu ? Right now I have it set with single buttons for each li.
I just want to make it turn into a single dropdown for all of them.
For smaller screens, prefer css example if you can.
<div class="col-md-3">
<ul class="pc-scroller">
<span>GO TO</span>
<li class="pc-welcom">Welcome</li>
<li class="pc-bebidasbeverages-114">Beverages</li>
<li class="pc-traditional-style-breakfast-114">Traditional Breakfast</li>
<li class="pc-mexican-style-breakfast-114">Mexican Breakfast</li>
<li class="pc-mexican-plates-114">Mexican Plates</li>
<li class="pc-botanasappetizers-114">Appetizers</li>
<li class="pc-mariscosseafood-114">Seafood</li>
<li class="pc-parrilladabarbecue-114">Barbecue</li>
<li class="pc-kids-plates-114">Kid's Plates</li>
<li class="pc-postresdesserts-114">Desserts</li>
</ul>
</div>
Check this
https://jsfiddle.net/1fxq39gj/2/
<div class="col-md-3">
<select class="pc-scroller">
<option >GO TO</option>
<option value="welcome" class="pc-welcom">Welcome</option>
<option value="beverages" class="pc-bebidasbeverages-114">Beverages</option>
<option value="traditional" class="pc-traditional-style-breakfast-114">Traditional Breakfast</option>
<option value="mexican" class="pc-mexican-style-breakfast-114">Mexican Breakfast</option>
<option value="plates" class="pc-mexican-plates-114">Mexican Plates</option>
<option value="appetizers" class="pc-botanasappetizers-114">Appetizers</option>
<option value="seafood" class="pc-mariscosseafood-114">Seafood</option>
<option value="barbecue" class="pc-parrilladabarbecue-114">Barbecue</option>
<option value="kid" class="pc-kids-plates-114">Kid's Plates</option>
<option value="desserts" class="pc-postresdesserts-114">Desserts</option>
</select>
</div>
unfortunately the way that the current HTML is set up a pure CSS solution is hard. However, jQuery has a fairly easy solution, and it can do that without going in and changing the actual HTML. Here is the jQuery that you will need to get this working:
// If the span is clicked
$(".pc-scroller > span").click(function() {
// Check to see if the screen is small
if ($(window).width() < 500) {
// Toggle hide/show all list items
$(".pc-scroller > li").toggle();
}
});
// When the screen is resized
$(window).resize(function(){
// If the screen is small, hide all list items
if ($(window).width() < 500) {
$(".pc-scroller > li").hide();
// If the screen is larger, show all list items
} else {
$(".pc-scroller > li").show();
}
});
I have also posted a jsfiddle with this working.
Related
<div *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
<li> Nome: {{item.item.name}}</li>
<li> Nome: {{item.item.descricao}}</li>
<select class="custom-select">
<option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
</select>
<button ></button>
</div>
I am using a ngFor to display the items of my database. Inside that div i also show a button and a select, but i only want to display them when the item is selected.
Imagine item 1 is selected, then the button and select is displayed for that item, but all others have no button or select.
I imagine that we can probably do it with a simple ngIf but im not seeing how?
Any help is appreciated.
An li element is not a valid direct child of a div element - only a ul element can be a direct parent of an li. what you really need to do is to nest the content inside the repeating li and have an ng-container with an *ngIf on it to conditionally show the content if the item is selected.
Note that I have followed your logic to determine if the item is selected - but there are better ways of doing that.
Also - spans are inline level elements - so you will need styling to display themn correctly and space them out - I would use flex - with the li having display: flex set on it and perhaps justify-content: space-between to separate out the spans.
<ul class="meus-items-list">
<li *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
<span> Nome: {{item.item.name}}</span>
<span> Nome: {{item.item.descricao}}</span>
<ng-container *ngIf="item[i] == i">
<select class="custom-select">
<option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
</select>
<button >Click me</button>
</ng-container>
</li>
</ul>
You could also do this with a ul / li nested inside the li
<ul class="meus-items-list">
<li *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
<ul>
<li> Nome: {{item.item.name}}</li>
<li> Nome: {{item.item.descricao}}</li>
<li *ngIf="item[i] == i">
<select class="custom-select">
<option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
</select>
<button >Click me</button>
</li>
</ul>
</li>
</ul>
You could even do this with CSS alone - just by applying display none to the select and button elements in all li's except for the selected one. This will still have these elements in the DOM so is probably not my first thought as to how to do it.
li:not(.selected) select,
li:not(.selected) button {
display: none;
}
For example this is a sample code how it appears :
HTML :
<div *ngIf="selected" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
TS :
export class AppComponent implements OnInit{
(...)
public selected = false;
(...)
saveTodos(): void {
//show box msg
this.selected= true;
//wait 3 Seconds and hide
setTimeout(function() {
this.selected= false;
console.log(this.selected);
}.bind(this), 3000);
}
}
knowing community,
I want to achieve the following in short: I have a XML-file with listed pizzas inside of it (it is a kind of test file). My page has a select menu from which a user choses one pizza and the pizza size, which is then both displayed below. The content will only show up after the user has chosen. This is the function:
declare function app:showpizza2($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
let $size1 := request:get-parameter('size1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $id := $pizza/#id
return
(<a data-key="{ $id }" class="person"><div>{ $pizza1 }</div></a>,
<div>{ $size1 }</div>)
};
With a second function I now want to build previous/next buttons which take the current shown pizza, find it inside of the XML tree and then go one step further up or down. So far I am able to show one pizza above or below with these lines:
declare function app:previousPizza($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $previousPizza := $pizza/preceding::pizza[1]
return
<p>{ $previousPizza }</p>
};
The problem of course is that as a "current pizza parameter" I only take the user-chosen value from the select menu. So I guess this is a typical recursion problem because I want to have a function which always takes the current parameter after clicking on a button but I kind of really have no idea how to achieve this. Can you help out?
This is my html-file where I call these functions:
<div class="row">
<div class="col-sm-4">
<!-- form for choosing pizza -->
<form action="?">
<!-- select Pizza type -->
<select name="selectMenu1" id="pizzamenu1"
data-placeholder="Pizza wählen" style="width:150px">
<option value=""></option>
<option value="pizza1">Pizza 1</option>
<option value="pizza2">Pizza 2</option>
<option value="pizza3">Pizza 3</option>
</select>
<!-- select pizza size -->
<select name="size1" data-placeholder="Größe wählen"
style="width:150px;" onchange="this.form.submit()">
<option value=""></option>
<option value="family">Familien Pizza</option>
<option value="medium">Mittel Pizza</option>
<option value="small">Kleine Pizza</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<!-- showpizza2 returns chosen pizza from select menu -->
<div data-template="app:showpizza2"/>
<!-- Show previous pizza -->
<div data-template="app:previousPizza"/>
</div>
</div>
Thanks.
Since the value of the user-selected pizza comes from the html list, it is in $model. Your Xquery function for the next/prev buttons should access the $model to start where you want to.
We would need to see how you call the xquery modules in your .html files, to give you a working code sample. But the problems you describe are likely originating there.
See the documentation for Using the Model to Keep Application Data
I have this code :
<ul class="quick-contact">
<li class="phone"><strong>Sales: </strong>0987 989898</li>
<li class="email"><strong>Email: </strong>info#yourdomain.com</li>
<li class="sites"><strong>Sites: </strong><select class="inputbox"><option>USA</option><option>UK</option><option>France</option><option>Japan</option><option>South Africa</option></select></li>
</ul>
I want sales number change with each options selected.
If someone has any ideas I really appreciate all answers
You will need to make use of Javascript to achieve this functionality.
Working Snippet:
// comments inline
var salesNumbers = { // store all phone numbers in an object here
'USA': '123 123', // you can easily add/remove/modify the country/numbers here
'UK': '456 456',
'France': '789 789',
'Japan': '111 222',
'South Africa': '333 444'
}
function updateSalesNumber(){ // this will be called when dropdown value will be changed
var inputBox = document.getElementById("inputbox");
// get the selected option
var selectedOption = inputBox.options[inputBox.selectedIndex].value;
// update the number on the webpage
document.getElementById("sales-number").innerHTML = salesNumbers[selectedOption];
}
<ul class="quick-contact">
<li class="phone"><strong>Sales: </strong><span id="sales-number">0987 989898</span></li>
<li class="email"><strong>Email: </strong>info#yourdomain.com</li>
<li class="sites"><strong>Sites: </strong>
<select id="inputbox" onchange="updateSalesNumber()">
<option value="USA">USA</option>
<option value="USA">UK</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="South Africa">South Africa</option>
</select>
</li>
</ul>
You will need to use javascript or jQuery to do what you want to do. This is the only way to manipulate values in the DOM.
Different people will give you different answers. But here is one simple option using jQuery.
I have written a jQuery example but if you need a pure javascript one let me know.
Basically you need a value on all your options which contains the phone number that corresponds to it. (e.g USA and a value for it's phone number).
When the select box is changed it updates the sale number. I have added an extra span with a class to make it easier to update.
http://jsfiddle.net/williamtdavies/6621wd1j/
<ul class="quick-contact">
<li class="phone"><strong>Sales: </strong><span class="phone__number">0987 989898</span></li>
<li class="email"><strong>Email: </strong>info#yourdomain.com</li>
<li class="sites"><strong>Sites: </strong><select class="inputbox"><option value="123">USA</option><option value="456">UK</option><option value="789">France</option><option value="101112">Japan</option><option value="131415">South Africa</option></select></li>
</ul>
// Function to update the sales phone number
function changePhoneNumber(phoneNumber){
// Writes HTML into the span with class "phone__number"
$('.phone__number').html(phoneNumber);
}
// Change event calls the function to update the sales number
// Passes the new value after change into the function
$('.inputbox').on('change', function(){
var phoneNumber = $(this).val();
changePhoneNumber(phoneNumber);
});
// Calls the function on load in case the select box selection has remained from a previous change
$(document).ready(function(){
changePhoneNumber($('.inputbox').val());
});
Include jQuery and use below js
var inputBox = $(".inputbox"),
countryNumber = $('#country-number');
console.log(inputBox.length);
function updateSalesNumber(){
countryNumber.text(inputBox.val());
}
inputBox.on('change', function(){
updateSalesNumber();
})
Use below html...
<ul class="quick-contact">
<li class="phone"><strong>Sales: </strong> <span id="country-number">0987 989898</span></li>
<li class="email"><strong>Email: </strong>info#yourdomain.com</li>
<li class="sites"><strong>Sites: </strong><select class="inputbox"><option value="111111">USA</option><option value="222222">UK</option><option value="333333">France</option><option value="444444">Japan</option><option value="555555">South Africa</option></select></li>
</ul>
What I am trying to do is have a drop down menu divided. In this example there are Five Options how can I split the drop down into categories? For example option 1 and 2 pop out of the environment category and option 3 and 4 sports category and 5 college category? http://jsfiddle.net/fc3550sk/
For example:
Drop down: Please Select when you click it Menus will be Environment, Sports, Colleges..
Then hover over Environment and it will let you choose from option 1 or 2... or hover over sports and it will let you chose from 3 or 4 and so on..
This is what I have so far:
<select name="SPECIAL" id="SPECIAL">
<option>Please Select</div>
<option data-img="/images/img/AnimalFriend.png" value="1">AnimalFriend</option>
<option data-img="/images/img/Aquaculture.png" value="2">Aquaculture</option>
<option data-img="/images/img/ProtectOurOceans.png" value="3">Protect Our Oceans</option>
<option data-img="/images/img/ConserveWildlife.png" value="4">Conserve Wildlife</option>
</select>
<!-- Modal -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary accept">Accept</button>
</div>
</div>
</div>
</div>
$(function() {
$('#SPECIAL').on('change', function() {
if ($('option:selected', this).is('[data-img]')) {
$('#modal_special').find('.modal-body').html('<p>Image will go here:</p>')
.append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/>')
.end().modal('show');
}
});
$('.accept').on('click',function() {
//do something
$('#modal_special').modal('hide');
});
});
Any help would be greatly appreciated!!
I don't know of a way to attach a "hover" event listener to a standard drop-down menu, but it's not too much work to implement your own custom drop-down with jquery, html and css.
Custom Drop-down Advantage #01
You get to assign as many custom values to each entry as you want.
In your example, you have "Specialty Plates", and you may want to assign a price, a special code assigned to that plate, an image assigned to that plate, and so on. With an HTML/jQuery version, you can create your custom drop-downs with simple <span> tags like this:
<span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span>
<span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span>
<span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span>
Notice how each entry has three custom values assigned to it: data-code, data-image, and data-price. If you use an html drop-down, you don't have as much freedom. There are ways to extend the values associated with a standard drop-down, but getting at the values is messy, and you will still not have access to the hover behavior your features require.
Custom Drop-down Advantage #02
You can actually use the hover behavior in any way you want.
In your example, you want the "submenus" to show up when certain values in your drop-down are selected, but as far as I know, there isn't a way to gain access to the values that are "hovered" in a standard drop-down, and looking for an HTML-only solution just doesn't exist, so you would have to use javascript in one way or another.
Using jQuery, you can easily get to the values in your custom drop-down elements like this:
$("span").hover(
function(){
var text = $(this).text();
console.log("You have hovered on: ", text);
},
function(){
// You have hovered off the span
}
);
My Solution to Your Problem
Putting these ideas into practice, I put together a simple demo of how you can create a custom drop-down using your applications parameters.
You can review a jsfiddle of the demo here.
The Basic idea is that you create a hierarchy in html with the structure of your Top-level options (Environment, Sports, Colleges) in the div .drop_down_scroll_container, and you place all your sub-level divs (Environment 01, Environment 02, etc) below that div in a div classed .dropdown-subcategory. Where the magic happens, is that javascript looks up the index of the top-level option, and then reveals the dropdown-subcategory with that same index.
For example, in the following snippet of html, you can see the index positions of each of the spans within the drop_down_scroll_container div:
<div class="drop_down_scroll_container">
<span>Environment</span> <!-- index 0 -->
<span>Sports</span> <!-- index 1 -->
<span>Colleges</span> <!-- index 2 -->
</div>
So then, when you hover over any of those Top-level options (Environment, Sports, Colleges) you can ask jQuery to reveal the corresponding submenu div, which are sitting below the .drop_down_scroll_container div in div containers with a class of .dropdown-subcategory
<div id="dropdown" class="specialtyPlatesCategories">
<div class="selectHeader">Click to Select Plates:</div>
<!-- THIS IS WHERE YOU WILL PUT YOUR TOP-LEVEL OPTIONS -->
<div class="drop_down_scroll_container">
<span>Environment</span>
<span>Sports</span>
<span>Colleges</span>
</div>
<!-- THIS DIV IS AT INDEX 0 of: #dropdown.dropdown-subcategory -->
<!-- Will fade in when the drop_down_scroll_container index 0 is hovered -->
<div id="env_subcategories" class="dropdown-subcategory">
<span data-code="ENV01" data-image="" data-price="31.00">Environment 01</span>
<span data-code="ENV02" data-image="" data-price="32.00">Environment 02</span>
<span data-code="ENV03" data-image="" data-price="33.00">Environment 03</span>
</div>
<!-- THIS DIV IS AT INDEX 1 of: #dropdown.dropdown-subcategory -->
<!-- Will fade in when the drop_down_scroll_container index 1 is hovered -->
<div id="sports_subcategories" class="dropdown-subcategory">
<span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span>
<span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span>
<span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span>
</div>
<!-- THIS DIV IS AT INDEX 2 of: #dropdown.dropdown-subcategory -->
<!-- Will fade in when the drop_down_scroll_container index 2 is hovered -->
<div id="colleges_subcategories" class="dropdown-subcategory">
<span data-code="COLL01" data-image="" data-price="37.00">Colleges 01</span>
<span data-code="COLL02" data-image="" data-price="38.00">Colleges 02</span>
<span data-code="COLL03" data-image="" data-price="39.00">Colleges 03</span>
</div>
</div>
If none of that made any sense, here is another way of looking it at:
When the first item in the .drop_down_scroll_container is hovered, jQuery looks for the first instance of a .dropdown-subcategory below it. When the second item in the .drop_down_scroll_container is hovered, then jQuery will reveal the second instance of the .dropdown-subcategory, and so on. This lets you build as many options as you want, without having to worry about giving everything specific names, only the order matters in this case. So when the "Environment" option (who's index equals 0) is hovered, the .dropdown-subcategory with an index of 0 will show. That is the basic idea.
So now for the jQuery that puts it all together:
$(document).ready(function(){
// When the header for the custom drop-down is clicked
$(".selectHeader").click(function() {
// cache the actual dropdown scroll container
var dropdown = $(this).parent().find(".drop_down_scroll_container");
// Toggle the visibility on click
if (dropdown.is(":visible")) {
dropdown.slideUp();
$(this).parent().find(".dropdown-subcategory").fadeOut();
} else {
dropdown.slideDown();
}
});
// When a top-level menu item is hovered, decide if its
// coorespnding submenu should be visible or hidden
$(".drop_down_scroll_container span").hover(
// hover on
function() {
// Remove the "highlighted class from all other options
$(this).parent().find("span").removeClass("highlighted").removeClass("selected");
$(this).addClass("highlighted").addClass("selected");
// Get the index of the hovered span
var index = $(this).index();
// Use the hovered index to reveal the
// dropdown-subcategory of the same index
var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
hideallSubmenusExceptMenuAtIndex($(this).parent().parent(), index);
subcategorydiv.slideDown();
},
// hover off
function() {
if (!$(this).hasClass("highlighted")) {
var index = $(this).index();
var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
subcategorydiv.slideUp();
}
});
// Hide all submenu items except for the submenu item at _index
// This will hide any of the previously opened submenu items
function hideallSubmenusExceptMenuAtIndex(formElement, _index) {
formElement.find(".dropdown-subcategory").each(
function(index) {
if (_index != index) {
$(this).hide();
}
}
);
}
// When any menu item is hovered
$("span").hover(
function() {
$(".hoveredOver").text($(this).text());
},
function() {
$(".hoveredOver").text("");
}
);
// When a sub-menu option is clicked
$(".dropdown-subcategory span").click(function() {
$(".dropdown-subcategory span").removeClass("selected");
$(".clickedOption").text($(this).text());
$(this).addClass("selected");
$(this).parent().parent().find(".selectHeader").text($(this).text());
closeDropDown($(this).parent().parent());
showSpecialPlateModal($(this).text(), $(this).attr("data-image"), $(this).attr("data-price"), $(this).attr("data-code"));
});
// Close the dropdowns contained in divToSearch
function closeDropDown(divToSearch) {
divToSearch.find(".drop_down_scroll_container").fadeOut();
divToSearch.find(".dropdown-subcategory").fadeOut();
};
// Populate and Launch the bootstrap Modal Dialog Specialty Plates
function showSpecialPlateModal(name, image, price, code) {
$('#modal_special').find('.modal-body')
.html('<h2>' + name + '</h2>')
.append('<br/>Special Plate Code: <span class="code">' + code + '</span><br/>')
.append('<p>Image will go here:</p><br/><img alt="" src="' + image + '"/>')
.append('<br/><br/>Price: <span class="price">' + price + '</span><br/>')
.end().modal('show');
}
// When the modal "Accept" button is pressed
$('.accept').on('click', function() {
var modal_element = $('#modal_special');
var name = modal_element.find("h2").text();
var price = modal_element.find("span.price").text();
var code = modal_element.find("span.code").text();
$('#modal_special').modal('hide').end(alert(name + " was selected for a price of " + price));
});
});
Note: There may already be some open-source solutions that take care of this problem in a more elegant fashion. But this was my approach at solving an issue like this. As you can see, it only takes a little bit of setup to get going. You can easily control the styling of the drop-down in css, and you can extend this to do anything you want.
Again, you can review a jsfiddle to see all of this code in action here.
Hope this helps!
I am not sure if this is exactly what your were looking for but you could try something like this:
<select name="SPECIAL" id="SPECIAL">
<option>Please Select</div>
<optgroup label="Environmental">
<option
data-img="/images/img/AnimalFriend.png"
value="1">AnimalFriend</option>
<option
data-img="/images/img/Aquaculture.png"
value="2">Aquaculture</option>
</optgroup>
<optgroup label="Sports">
<option
data-img="/images/img/ProtectOurOceans.png"
value="3">Protect Our Oceans</option>
<option
data-img="/images/img/ConserveWildlife.png"
value="4">Conserve Wildlife</option>
</optgroup>
</select>
I currently have a jsp where in m html section I have the following
<select>
<%if(size == 1)%>
<option>None selected</option>
<%if(size > 1)%>
<option>1</option>
</select>
I also have the following image.
<td style="text-align:left">
<label id="checked" style="color:grey; display:none">
<img src="images/check.png" width="20px" height="20px"/>
Checked
</label>
</td>
My question is that how do I get my image to appear only if the option none is selcted. If 1 is selected then I do not want the image to appear. How would I do this?
I think, this will give you solution for your problem, i have used JQUERY here.
$("#selectID or .selectClass").change(function () { //just use id or class name for select element
var option=$(this).val();
if(option=="None selected")
{
$("#checked").css("display","block");
}
else
{
$("#checked").css("display","none");
}
});