With below code I'm trying to change the placeholder for select element on link click. But no changes are seen as of now. Also I'm trying to figure out how to show div when click on gear icon. Currently it works when click on div but not for icon present in it.
<!doctype html>
<html lang="en">
<head>
<!-- Dropdown - > https://stackoverflow.com/questions/43579748/how-to-achieve-autocomplete-feature-over-html-drop-down-or-select-element -->
<!-- focus in-out event > https://stackoverflow.com/questions/57284729/onclick-change-width-of-dropdown-using-javascript/57284975#57284975 -->
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 8px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<script>
$(function() {
$('select')
.select2({
placeholder: 'Search Command...',
width: '200',
multiple: false,
data: [{
id: '',
text: ''
}, {
id: 'rrrrrrr',
text: 'testing1'
}, {
id: 'testing 1,2,3',
text: 'testing 1,2,3gffffff'
}],
tokenSeparators: ['|']
})
$('.select2-container').click(function() {
$(this).css('width','500px');
});
$('.select2-container').focusout(function() {
$(this).css('width','200px');
});
$('#changeCommand').click(function() {
$('select').css('placeholder','Search Command...');
});
$('#changePref').click(function() {
$('select').css('placeholder','Search Preferences...');
});
$('#changeCD').click(function() {
$('select').css('placeholder','Search Customer Default...');
});
});
</script>
<script>
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown -->
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<select></select> <div class="dropdown"><button class="dropbtn" onclick="myFunction()" style="border-radius: 3px;border: none;color: black; background-color: white;"><span>⚙</span></button></div>
<div id="myDropdown" class="dropdown-content">
<a id="changeCommand">Commands</a>
<a id="changePref">Preferences</a>
<a id="changeCD">Customer Default</a>
</div>
</body>
</html>
You can try the following way:
$(function() {
$('select')
.select2({
placeholder: 'Search Command...',
allowClear: true,
width: '200',
multiple: false,
data: [{
id: '',
text: ''
}, {
id: 'rrrrrrr',
text: 'testing1'
}, {
id: 'testing 1,2,3',
text: 'testing 1,2,3gffffff'
}],
tokenSeparators: ['|']
})
.on('select2:open', function() {
$('.select2-container').css('width','600px');
})
.on("select2:close", function () {
$('.select2-container').css('width','200px');
});
$('#changeCommand').click(function() {
$('.select2-selection__placeholder').text('Search Command...');
});
$('#changePref').click(function() {
$('.select2-selection__placeholder').text('Search Preferences...');
});
$('#changeCD').click(function() {
$('.select2-selection__placeholder').text('Search Customer Default...');
});
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
var dropdowns = document.getElementById("myDropdown");
if (event.target.classList.contains('dropbtn')) {
dropdowns.classList.toggle("show");
}
else if (!event.target.classList.contains("dropbtn") && dropdowns.classList.contains("show")){
dropdowns.classList.toggle("show");
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 8px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<select></select>
<div class="dropdown"><button class="dropbtn" style="border-radius: 3px;border: none;color: black; background-color: white;">⚙</button></div>
<div id="myDropdown" class="dropdown-content">
<a id="changeCommand">Commands</a>
<a id="changePref">Preferences</a>
<a id="changeCD">Customer Default</a>
</div>
Just remove remove the subscription on the window.onclick event.
The onclick event on you button will be fired when child elements are clicked. Your current logic will show and directly hide the dropdown
Related
I created a dropdown list Javascript Toggle method. I face a problem a problem. The problem is - After clicking one dropdown, another dropdown still opens. I want others dropdown Will to be closed when I click on dropdown. This happen will be each dropdown. How do I do it?
<html>
<head>
<style>
nav{
width:100%;
height:50px;
background-color:#000;
}
button{
height:50px;
margin-left: 10px;
border:0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div{
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1{
background-color: rgb(0,0,255);
color: #fff;
}
#myDIV2{
background-color: rgb(0,255,0);
color: #000;
}
.show{
display:block;
}
</style>
</head>
<body>
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
<script>
function myFunction1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("show");
}
function myFunction2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("show");
}
</script>
</body>
</html>
here is the solution, all the code is commented.
div1 and div2 are hidden by default...
so with .toggle(): https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
I will add the class .show if there isn't
else I will remove the class from it.
so if the user clicks the first time on the button it will show the div1 then if he reclicked will hide, and this is looped (if he reclick)...
with classList.remove, we will hide the other element (always):
if clicked the button N1 will hide div2
if clicked the button N2 will hide div1
let div1 = document.getElementById("myDIV1");
let div2 = document.getElementById("myDIV2");
function myFunction1() {
div1.classList.toggle("show");
// remove the class for the second div
div2.classList.remove("show");
}
function myFunction2() {
div2.classList.toggle("show");
// remove the class for the first div
div1.classList.remove("show");
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
/* this is the class we add and remove or toggle with javascript*/
.show {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<!-- navbar -->
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<!-- 1 -->
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<!-- 2 -->
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
</body>
</html>
You can make this a little easier to scale by using one function for all dropdown menus. This function closes all open drop-downs and toggles the target one.
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button onclick="toggleDropDown('myDIV1')">Dropdown1</button>
<button onclick="toggleDropDown('myDIV2')">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>
Here is the same thing, but instead of hard-coding click events, it's better practice to use eventListeners, which get applied through the script after the page loads, like:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button data-dropdown="myDIV1">Dropdown1</button>
<button data-dropdown="myDIV2">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>
Can anyone help me to add search bar as the first value of the dropdown? I used ASP.NET MVC. This is my code
<div class="col-md-8">
<div class="dropdown">
<div class="chzn-dd-width">
#Html.DropDownListFor(
model => model.DriverId,
Model.Drivers,
new { #id = "driverDropDown", #class = " form-control chosen-search" })
</div>
</div>
</div>
Hi Ravindu Saluwadana,
did you try this? solution add search functionality on DropDownListFor
#Html.DropDownListFor(x =>
x.StockCode,
(IEnumerable<SelectListItem>)ViewBag.AllStockList,
new
{
#class = "form-control selectpicker",
#Value = #Model.Description,
onchange = "this.form.submit();",
data_show_subtext="true",
data_live_search="true"
})
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
item test
soheil
bijavar
php
Hello
Support
Tools
</div>
</div>
</body>
</html>
you can use 3rd party plugin who allows multiple dropdowns such as multiselect, with new styles , and also search
use this SELECT2 Dropdown Plugin
https://select2.org/searching
Use this functionality- data_live_search="true" in the dropdownlistfor.
To use that functionality you have to use this following scripts -
1.bootstrap-select.min.js
2.boostrap-select.min.css
you can download that files from here - https://cdnjs.com/libraries/bootstrap-select
Example -
<div class="col-md-8">
<div class="dropdown">
<div class="chzn-dd-width">
#Html.DropDownListFor(
model => model.DriverId,
Model.Drivers,
new { #id = "driverDropDown", #class = " form-control chosen-search" ,data_live_search="true"})
</div>
</div>
I hope it will help you.
So if I want to save all the To-Do items in Local storage and retrieve when I restart the computer or refresh the page all the items come up on the page in their original order.?
//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on X to delete To-DO
$("ol").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text'").keypress(function(event){
if(event.which === 13) {
//grabbing the text typed
var todoText = $(this).val();
$(this).val("");
//create a new LI and add to UL
$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text'").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
iframe {
float: left;
}
ol {
/* THE BULLET POINTS
list-style: none;
*/
margin: 0;
padding: 0;
font-size: 18px;
}
body {
background-color: rgb(13, 168, 108);
}
li {
background: #fff;
height: 30px;
line-height: 30px;
color: #666;
}
li:nth-child(2n){
background: #d3d3d3;
}
span {
height: 30px;
width: 0px;
margin-right: 20px;
text-align: center;
color:white;
display: inline-block;
transition: 0.2s linear;
opacity:0;
background: #e74c3c
}
li:hover span {
width: 30px;
opacity: 1.0;
}
input {
font-size: 18px;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
color: #2980b9;
background-color: #e4e4e4;
}
input:focus {
background: white;
border: 3px solid green;
/*OUTLINE OF INPUT BOX
outlin: none; */
}
.fa-plus {
float: right;
}
#container {
width: 360px;
margin: 60px auto;
background: #d3d3d3;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
color: red;
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
<link rel="stylesheet" type="text/css" href="utd.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<iframe src="http://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110" height="110"></iframe>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<form id="task-list">
<input type="text" placeholder="Add a To-Do" id="task">
</form>
<ol id="sortable">
<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
</ol>
</div>
<script type="text/javascript" src="Utd.js"></script>
</body>
</html>
Happy Holidays!
Your coding wishes are granted. This is a gift, to you, and you will have to be a good person and post better examples and remember that people are not here to write code for you.
There was a LOT of stuff lacking from your example.
Add items to a list
Update local storage when items are added to a list
Allow list to be sorted
Update local storage when list is updated
Allow task items to be marked completed
Update local storage when items are completed
Allow task items to be deleted
Update local storage when tasks are deleted
Load locally stored tasks
I think that covers everything you wanted this script to do. Is it becoming more clear now?
Working Example: https://jsfiddle.net/Twisty/ae6oLr47/12/
HTML
<iframe src="https://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110"
height="110"></iframe>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<form id="task-list">
<input type="text" placeholder="Add a To-Do" id="task">
<button type="submit"></button>
</form>
<ol id="sortable">
<li id="task-EXAMPLE"><span><i class="fa fa-trash"></i></span>
<label>EXAMPLE</label>
</li>
</ol>
</div>
The first time this loads, there will be no storage, so we can read an examples from the HTML. As you will see, once you make an update, this will no longer be the case.
Q: Why the <button>?
A: <form> likes to have a submit button. It does not need it, yet having it will help a lot in ways I do not want to go into for this question.
JavaScript
$(function() {
$("#sortable").on("click", function(event) {
console.log(event.target);
var $thatItem = $(event.target).parents("li");
switch (event.target.nodeName) {
case "SPAN":
case "I":
$thatItem.fadeOut(500, function() {
$thatItem.remove();
$("#sortable").sortable("refresh");
});
break;
case "LABEL":
$thatItem.toggleClass("completed");
break;
}
setTimeout(function() {
updateLocalStorage($("#sortable"));
}, 500);
event.stopPropagation();
});
$("#task-list").submit(function(event) {
event.preventDefault();
// Grabbing the text typed
var todoText = $("#task").val();
addListItem($("#sortable"), todoText, false);
// Clear the text field
$("#task").val("");
updateLocalStorage($("#sortable"));
});
$(".fa-plus").click(function() {
$("#task-list").fadeToggle();
});
$("#sortable").sortable({
update: function(e, ui) {
updateLocalStorage($(this));
}
}).disableSelection();
function addListItem($t, s, c) {
//create a new LI
var $li = $("<li>", {
id: "task-" + s.replace(" ", "_")
});
if (c) {
$li.addClass("completed");
}
var $wrap = $("<span>").appendTo($li);
$wrap.append($("<i>", {
class: "fa fa-trash"
}));
$li.append($("<label>").html(s));
$li.appendTo($t);
$t.sortable("refresh");
}
function updateLocalStorage($list) {
var tasks = {};
$list.find("li").each(function(ind, elem) {
var task = $(elem).text().trim();
var completed = $(elem).hasClass("completed");
tasks[task] = completed;
if (typeof(Storage) !== "undefined") {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
});
}
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
if (localStorage.getItem("tasks") !== "undefined") {
var localTasks = JSON.parse(localStorage.getItem("tasks"));
// Grab stored tasks
$("#sortable").find("li").remove();
$.each(localTasks, function(task, status) {
addListItem($("#sortable"), task, status);
});
}
} else {
// Sorry! No Web Storage support..
}
});
You might see that there is very little of your original code left in here. There was just a lot of places to improve the code. I will discuss a bit briefly.
Click Events
Since we're basically listening for click events on the same parent, but want to do different things when specific elements are clicked, that are going to be dynamically created, we can make use of the event.target from the click event. If it's the span or the i that's clicked, we do one thing, if it's the label, another.
The setTimeout is just a way to create a delay in the operations from switch to updating. Otherwise the update will execute almost on top of the switch and will not see the changes to the list, this record no changes.
Submit Event
When you hit Enter or Return you're essentially submitting the form. Part of the reason to add a submit button. Instead of catching the keypress and trying to prevent this, why not just use the submit event to our advantage. This method will help on mobile browsers and such.
Sortable Update Event
When the list is sorted, and updated, we need to update that order in the local storage. Now is the time to do that.
Functions
I think these are pretty clear. You have an operation you will repeat many times, write a function.
Get Item
The last bit of code will load when the page is all ready. It will check for localStorage and check if there are tasks stored within. It will then populate the list with them.
Q: What's with the JSON.stringify()?
A: Yes, you can store stuff locally... only as String. This creates a string version of our object for storage.
Comment if you have other questions.
//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on X to delete To-DO
$("ol").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text'").keypress(function(event){
if(event.which === 13) {
//grabbing the text typed
var todoText = $(this).val();
$(this).val("");
//create a new LI and add to UL
$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text'").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
iframe {
float: left;
}
ol {
/* THE BULLET POINTS
list-style: none;
*/
margin: 0;
padding: 0;
font-size: 18px;
}
body {
background-color: rgb(13, 168, 108);
}
li {
background: #fff;
height: 30px;
line-height: 30px;
color: #666;
}
li:nth-child(2n){
background: #d3d3d3;
}
span {
height: 30px;
width: 0px;
margin-right: 20px;
text-align: center;
color:white;
display: inline-block;
transition: 0.2s linear;
opacity:0;
background: #e74c3c
}
li:hover span {
width: 30px;
opacity: 1.0;
}
input {
font-size: 18px;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
color: #2980b9;
background-color: #e4e4e4;
}
input:focus {
background: white;
border: 3px solid green;
/*OUTLINE OF INPUT BOX
outlin: none; */
}
.fa-plus {
float: right;
}
#container {
width: 360px;
margin: 60px auto;
background: #d3d3d3;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
color: red;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
<link rel="stylesheet" type="text/css" href="utd.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<iframe src="http://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110" height="110"></iframe>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<form id="task-list">
<input type="text" placeholder="Add a To-Do" id="task">
</form>
<ol id="sortable">
<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
</ol>
</div>
<script type="text/javascript" src="Utd.js"></script>
</body>
</html>
//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on X to delete To-DO
$("ol").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
// $(this).remove();
});
//event.stopPropagation();
});
$("input[type='text'").keypress(function(event){
if(event.which === 13) {
//grabbing the text typed
var todoText = $(this).val();
$(this).val("");
//create a new LI and add to UL
$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
}
});
$(".fa-plus").click(function(){
$("input[type='text'").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
iframe {
float: left;
}
ol {
/* THE BULLET POINTS
list-style: none;
*/
margin: 0;
padding: 0;
font-size: 18px;
}
body {
background-color: rgb(13, 168, 108);
}
li {
background: #fff;
height: 30px;
line-height: 30px;
color: #666;
}
li:nth-child(2n){
background: #d3d3d3;
}
span {
height: 30px;
width: 0px;
margin-right: 20px;
text-align: center;
color:white;
display: inline-block;
transition: 0.2s linear;
opacity:0;
background: #e74c3c
}
li:hover span {
width: 30px;
opacity: 1.0;
}
input {
font-size: 18px;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
color: #2980b9;
background-color: #e4e4e4;
}
input:focus {
background: white;
border: 3px solid green;
/*OUTLINE OF INPUT BOX
outlin: none; */
}
.fa-plus {
float: right;
}
#container {
width: 360px;
margin: 60px auto;
background: #d3d3d3;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.completed {
color: red;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
<link rel="stylesheet" type="text/css" href="utd.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<div id="container">
<h1>To-do List <i class="fa fa-plus"></i></h1>
<input type="text" placeholder="Add a To-Do" id="task">
<ol id="sortable">
<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
</ol>
</div>
<script type="text/javascript" src="Utd.js"></script>
</body>
</html>
After making edits in browser, simply save the page as HTML with different file name. Your selected values will be saved.
I'm attempting to create a drop-down menu in javascript, html and css however when I run the code nothing is showing on canvas. Is it because the files aren't communicating with each other correctly?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>DropdownMenu</title>
<link rel='stylesheet' type='text/css' href='Stylesheetdropdown.css'/>
</head>
<body>
<canvas id="canvas" width="5000" height="5000">
</canvas>
<script type='text/javascript' src='DropdownMenu.js'></script>
</body>
<body>
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
</body>
</html>
Javascript:
function dropdown() {
document.getElementById("myMenu").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.drpdwnbtn')) {
var dropdowns = document.getElementsByClassName("drpdwncntnt"),
i,
openDropdown = dropdowns[i];
for (i = 0; i < dropdowns.length; i += 1) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
CSS:
.drpdwnbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.drpdwnbtn:hover, .drpdwnbtn:focus {
background-color: #E0FFFF;
}
.dropdown {
position: relative;
display: inline-block;
}
.drpdwncntnt {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.drpdwncntnt a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
Your canvas was over your menu div, your html should look like:
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
<canvas id="canvas" width="5000" height="5000">
</canvas>
, so here is a working fiddle:
https://jsfiddle.net/ahpook4p/
I have database generated menu with child menu items in my MVC4 web application which was working fine until I didn't implemented Jquery datepicker. As soon as I included datetimepicker.js and jqueryui bundle, my menu stopped expending. I had tried to change order of scripts and style but no success. I am fairly new to css so I am not be able to figure out whats going wrong here.
Here is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/Images/Company-logo/logo.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css","~/Content/themes/base", "~/Content/css")
<script src="~/Scripts/DatePickerReady.js"></script>
<link href="~/Content/indexView.css" rel="stylesheet" />
</head>
<body>
<header>
<div>
<img src="~/Images/Company-logo/header_bar.png" style="width:100%"/>
</div>
<div class="content-wrapper">
<div class="float-right">
#Html.Partial("Menu")
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
</footer>
<script src="#Url.Content("~/Scripts/dbGeneratedMenu.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/dbGeneratedMenu.css")" rel="stylesheet" type="text/css" />
#RenderSection("scripts", required: false)
</body>
<script type="text/javascript">
$m = jQuery.noConflict();
$m(document).ready(function () {
$m('.menu').dbGeneratedMenu();
});
</script>
</html>
Following is my css for menu:
.menu, .menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
line-height: 2.5em;
}
.menu a
{
text-decoration: none;
}
.menu > li
{
margin-left: 15px;
}
.menu > li:first
{
margin-left:0px!important;
}
.menu > li > a
{
padding: 0px 10px;
margin: 0;
width: 100%;
text-decoration: none;
color: #005D7C;
font-weight: bold;
}
div.box
{
position: absolute;
z-index: -1;
background-color: #75CDD2;
left: 0;
top: 0;
border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
}
li.pull-down
{
padding-right:6px;
}
li.pull-down > a
{
background-image: url(/Images/menu/darrow.png);
background-position: 96% 75%;
background-repeat: no-repeat;
padding-right: 20px;
}
li.right-menu > a
{
background-image: url(/Images/menu/rarrow.png);
background-position: 97% 45%;
background-repeat: no-repeat;
}
.menu a.selected
{
background-color: #75CDD2;
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
}
.menu li
{
float: left;
position: relative;
}
.menu ul
{
position: absolute;
display: none;
width: 200px;
top: 2.5em; /*padding-right: 10px;*/
background-color: #B8C402; /*-moz-opacity: .50; filter: alpha(opacity=50); opacity: .50;*/
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
}
.menu li ul a
{
width: 180px;
height: auto;
float: left;
color: #FFFFFF;
padding: 0 10px;
}
.menu li ul li
{
padding: 0;
margin: 0;
}
.menu ul ul
{
top: auto;
}
.menu li ul ul
{
left: 198px; /*margin: 0px 0 0 10px;*/
}
.menu-item-selected > a
{
background-color: #000000;
-moz-opacity: .50;
filter: alpha(opacity=50);
opacity: .50;
font-weight: bold;
}
a:hover {
background-color: #B8C402;
color: #FFFFFF !important;
}
.menu-item-selected > a:hover
{
background-color: #000000;
color: #FFFFFF !important;
}
This is JQuery fiddle for database generated menu:
(function ($) {
$.fn.extend({
dbGeneratedMenu: function () {
return this.each(function () {
//add class .drop-down to all of the menus having drop-down items
var menu = $(this);
var timeoutInterval;
if (!menu.hasClass('menu')) menu.addClass('menu');
$("> li", menu).each(function () {
if ($(this).find("ul:first").length > 0)
$(this).addClass('pull-down');
});
$("> li ul li ul", menu).each(function () {
$(this).parent().addClass('right-menu');
});
$("li", menu).mouseenter(function () {
var isTopLevel = false;
//if its top level then add animation
isTopLevel = $(this).parent().attr('class') === 'menu';
if (isTopLevel) {
clearTimeout(timeoutInterval);
var w = $(this).outerWidth();
// if ($(this).hasClass('pull-down')) w += 10;
var h = $(this).outerHeight();
var box = $('<div/>').addClass('box');
$('> li', menu).removeClass('selected');
$('>li div.box', menu).remove();
$('>li ul', menu).css('display', 'none').slideUp(0);
$(this).prepend(box);
$(this).addClass('selected');
box.stop(true, false).animate({ width: w, height: h }, 100, function () {
if ($(this).parent().find('ul:first').length == 0) {
timeoutInterval = setTimeout(function () {
box.stop(true, false).animate({ height: '+=5' }, 300, function () {
box.parent().find('ul:first').css('display', 'block').css('top', box.height()).stop(true, false).slideDown(100);
});
}, 10);
}
else {
timeoutInterval = setTimeout(function () {
box.stop(true, false).animate({ height: '+=0' }, 0, function () {
box.parent().find('ul:first').css('display', 'block').css('top', box.height()).stop(true, false).slideDown(100);
});
}, 10);
}
});
}
else {
$(this).find('ul:first').css('display','block').stop(true, false).slideDown(100);
}
}).mouseleave(function () {
isTopLevel = $(this).parent().attr('class') === 'menu';
if (isTopLevel) {
$(this).parent().find('div.box').remove();
}
$(this).find('ul').slideUp(100, function () {
$(this).css('display', 'none');
});
});
$('> li > ul li a', menu).hover(function () {
$(this).parent().addClass('menu-item-selected');
}, function () {
$(this).parent().removeClass('menu-item-selected');
});
});
}
});
})(jQuery);
Partial view for date:
#model DateTime?
#{
var value = "";
if (Model.HasValue) {
value = String.Format("{0:d}", Model.Value.ToString("dd-MM-yyyy"));
}
}
#Html.TextBox("", value, new { #class = "datefield", type = "date" })
model:
public class LEAVE_REQUEST
{
[Display(Name = "Id"), Required, DatabaseGenerated(DatabaseGeneratedOption.None)]
public long ALLOTMENT_REQUEST_ID { get; set; }
[Display(Name = "Request date"), Required]
public Nullable<System.DateTime> REQUEST_DATE { get; set; }
[Display(Name = "Leave start date"), Required(ErrorMessage="Leave start date not entered")]
[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd-mm-yyyy}")]
public Nullable<System.DateTime> LEAVE_START_DATE { get; set; }
}
View where I am implementing datetimepicker
#model TESTAPP.Models.LEAVE_REQUEST
#{
ViewBag.Title = "Create";
}
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
<fieldset>
<legend>LEAVE_REQUEST</legend>
<div class="editor-label">
#Html.LabelFor(model => model.LEAVE_START_DATE)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LEAVE_START_DATE)
#Html.ValidationMessageFor(model => model.LEAVE_START_DATE, "*")
</div>
#Html.ValidationSummary(false)
<p>
<input type="submit" value="Submit" class="submitButton"/>
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I really appreciate any help from you guys. Thanks
I finally solved my problem. I think something is conflicting in JQuery bundle with js file I'd used for menu navigation. I used jquery-1.8.2.min.js only instead of rendering entire bundle. and now its working as expected. However, I am still not be able to find what conflict with what :(