I read millons of time that if you define a bootstrap class in your own CSS stylesheet you will overwrite them so your created element will have your predefined style as you want.
While this is true to half of the page, my input button using the class form-control it just won't work, and I can't figure it out the reason why, as anybody else is having this problem.
Here's a snippet with my issue:
var searcher = document.getElementById('buscador');
searcher.addEventListener("click", function()
{
var master = searcher.parentNode;
searcher.removeChild(searcher.childNodes[0]);
searcher.style.animationName = "expandismo";
searcher.style.animationDuration = "1s";
setTimeout(function(){
master.removeChild(searcher);
var barraSearch = document.createElement('input');
barraSearch.setAttribute('type', 'text');
barraSearch.setAttribute('id', 'barraSearch');
barraSearch.setAttribute('class', 'form-control');
barraSearch.setAttribute('placeholder', 'Buscar...');
var spanCheto = document.createElement('span');
var botonCheto = document.createElement('button');
var secondSpan = document.createElement('span');
spanCheto.setAttribute('class', 'input-group-btn');
botonCheto.setAttribute('class', 'btn btn-default');
secondSpan.setAttribute('class', 'glyphicon glyphicon-search');
secondSpan.setAttribute('aria-hidden', 'true');
botonCheto.appendChild(secondSpan);
spanCheto.appendChild(botonCheto);
master.appendChild(barraSearch);
barraSearch.focus();
}, 1000);
}, false);
.container-fluid
{
text-align: center;
}
#toplane
{
color: white;
background-image: url(citybackground.jpg);
background-size: 100% 100%;
min-height: 400px;
}
#botlane
{
}
#headone
{
margin-top: 130px;
color: black;
text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 3px white, 0px 0px 5px white;
font-family: "Times New Roman", Times, monospace;
font-size: 60px;
}
#buscador
{
color: #595959;
width: 40px;
height: 40px;
border-radius: 18px;
background-color: lightgrey;
cursor: text;
}
#buscador:hover
{
background-color: lightgrey;
opacity: 1;
}
#buscador:active
{
background-color: white;
}
.input-group
{
width: 100%;
text-align: center;
}
.form-control
{
width: 70%;
border-radius: 18px;
background-color: lightgrey;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}
.form-control:focus
{
box-shadow: 0px 0px 5px #66d9ff;
box-shadow: 0px 0px 10px #66d9ff;
box-shadow: 0px 0px 8px #66d9ff;
box-shadow: 0px 0px 12px #66d9ff;
}
#keyframes expandismo
{
from{width: 40px}
to{width: 70%}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Price Surfer FAQ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="wean1.css">
</head>
<body>
<div class="container-fluid" id="toplane">
<h1 id="headone">PRICE SURFER FAQ</h1>
<div class="input-group">
<button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
<div class="container-fluid" id="botlane">
</div>
<script type="text/javascript" src="wean1.js"></script>
</body>
</html>
.container-fluid .input-group .form-control{
/* yous css*/
}
This is because the bootstrap get the .form-control with two clases and this type of selection .input-group .form-control is stronger then just .form-control
.input-group .form-control{
}
Use this website to calculate which selector is stronger .
Check this screenshot the first selectors have 3 points and the second has only two so doesn't matter where you place the first selectors are stronger than second. Every id has 100 points , classes have 10 points and tags have 1 point
You should add !important with the property that is not being picked.
Like:
.form-control
{
width: 70%!important;
border-radius: 18px!important;
background-color: lightgrey!important;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}
Related
I'm getting an error in console 'Uncaught TypeError: Cannot read property 'value' of undefined at HTMLInputElement.' at line 18. I couldn't find any error in my js code, also when alert fires it doesn't go in one go infact it appears 2-3 times. Also my script file is at the end of the body.Please help me find the error.
let editbox = document.getElementById('editbox');
let val = editbox.innerText;
let showAlert = document.getElementById('alrt');
let edit = document.getElementsByClassName('edit');
let cl = document.getElementsByClassName('input')
editbox.addEventListener('click', clicked);
function clicked() {
if (cl.length == 0) {
editbox.innerHTML = '<input type="text" class="input">';
cl[0].value = val
}
showAlert.style.visibility = 'visible';
cl[0].addEventListener('blur', function () {
if(cl[0].value.length > 0){
val = cl[0].value
editbox.innerHTML = `<div class="edit">${val}</div>`;
showAlert.style.visibility = 'hidden'
} else {
alert('You can not leave box empty')
}
})
}
#import url('https://fonts.googleapis.com/css2?family=Oswald&family=Raleway:wght#300&display=swap');
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container{
background-color: #83AF9B;
border: 4px solid black;
width: 80%;
margin: 50px auto;
padding: 5px;
color: rgb(0, 0, 0);
display: flex;
justify-content: center;
height: 100px;
border-radius: 10px;
box-shadow: 10px 10px 40px grey;
flex-direction: column;
}
.edit {
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
}
.alert{
margin-left: 10px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
visibility: hidden;
}
.input{
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
background: none;
color: black;
border: 1px solid black;
border-radius: 5px;
outline: none;
padding-left: 2px;
width: 97%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable div</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box" id="editbox">
<div class="edit">Click Here To Edit Me.</div>
</div>
<div class="alert" id="alrt">You can now edit it</div>
</div>
<script src="index.js"></script>
</body>
</html>
the "problem" is with the event listener inside of the big function
the event listener is activated when there is a change in cl[0] and naturally you overwrite editbox.innerHTML when this listener is activated so it gets activated again (asynchronous logic)
the solution is simply saying if(cl[0] != undefined) {do rest of function}
my example is below (also prevents overlap of listeners)
let editbox = document.getElementById('editbox');
let val = editbox.innerText;
let showAlert = document.getElementById('alrt');
let edit = document.getElementsByClassName('edit');
var cl = document.getElementsByClassName('input')
editbox.addEventListener('click', clicked);
function clicked() {
if (cl.length == 0) {
editbox.innerHTML = '<input type="text" class="input">';
cl[0].value = val
}
showAlert.style.visibility = 'visible';
function theEditor () {
if(cl[0] != undefined){
if(cl[0].value.length > 0){
val = cl[0].value;
editbox.innerHTML = `<div class="edit">${val}</div>`;
showAlert.style.visibility = 'hidden'
} else {
alert('You can not leave box empty')
}
}
}
cl[0].removeEventListener('blur', theEditor)
cl[0].addEventListener('blur', theEditor)
}
#import url('https://fonts.googleapis.com/css2?family=Oswald&family=Raleway:wght#300&display=swap');
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container{
background-color: #83AF9B;
border: 4px solid black;
width: 80%;
margin: 50px auto;
padding: 5px;
color: rgb(0, 0, 0);
display: flex;
justify-content: center;
height: 100px;
border-radius: 10px;
box-shadow: 10px 10px 40px grey;
flex-direction: column;
}
.edit {
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
}
.alert{
margin-left: 10px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
visibility: hidden;
}
.input{
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
background: none;
color: black;
border: 1px solid black;
border-radius: 5px;
outline: none;
padding-left: 2px;
width: 97%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable div</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box" id="editbox">
<div class="edit">Click Here To Edit Me.</div>
</div>
<div class="alert" id="alrt">You can now edit it</div>
</div>
<script src="index.js"></script>
</body>
</html>
I need your help, I am using the Leaflet library, I would like to put the address search, but not the search inside the map, but yes, with an input, outside the map:
enter image description here
However, I saw that it can be done, Nominatim even uses it (https://nominatim.openstreetmap.org/), but there are no explanations on how to do it.
The Code looks like this
var target = document.getElementById('map');
document.addEventListener('DOMContentLoaded', function(e){ //executa o código somente após carregar o DOM
var optionsMap = {
center: [-21.511263, -51.434978],
zoom: 15
}
// criação do mapa
let map = new L.map(target, optionsMap);
map.doubleClickZoom.disable();
//adicionar uma camada de bloco do OpenStreetMap
let basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}); basemap.addTo(map);
});
/*Imports*/
#import 'reset.css';
#import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
#import 'https://unpkg.com/leaflet#1.6.0/dist/leaflet.css';
#import 'popup.css';
/*Geral*/
body{
background-color: rgb(109, 164, 182);
font-family: Arial, Helvetica, sans-serif;
}
.titulo{
padding: 0.5em;
color: white;
text-align: center;
font-size: 3em;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/*Section*/
.campo{
padding: 1em;
background-color: rgba(255, 255, 255, 0.5);
width: 80%;
height: 80%;
border-radius: 1em;
box-shadow: 0px 2px 6.35px 0.35px rgba(0, 0, 0, 0.3);
}
.pesquisa{
border: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 92%;
padding: 10px;
}
.btn{
border: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 10px;
margin-left: 0em;
margin-top: 0em;
}
.btn:hover{
background-color: rgb(90, 136, 221, 0.3);
}
#map{
width: auto;
height: 500px;
border: none;
border-radius: 1em;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
}
/*Footer*/
footer{
padding: 1em;
text-align: center;
color: white;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover{
font-weight: bold;
}
<!DOCTYPE html>
<html lang="pt-Br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet - Nominatim</title>
<link rel="stylesheet" href="css/estilos.css">
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div class="container">
<header>
<h1 class="titulo">Maps Leaflet - Nominatim</h1>
</header>
<section class="campo container">
<div class="container">
<input class="pesquisa" type="text"><input class="btn" type="button" value="Ok!">
</div>
<br>
<div id="map" class="container"></div>
</section>
<footer>cortelucas</footer>
</div>
<script src="js/map.js"></script>
</body>
</html>
I sincerely ask for your help!
As I said yesterday I prepared a working example working on the GeoJSON format. I slightly modified autosuggest my application.
I have connected with the nominatim and also added the option of working on a static GeoJSON file.
I prepared a branche - autosuggest+nominatim and the working example nominatim-leaflet-search
Of course, as much as I could test in a short time, but you have to reckon with the fact that there may be some errors. Gzip code, weighs around 8KB so it's not bad.
UPDATE
I prepared a project on github Leaflet.Autocomplete showing the work of the plugin and as much as I could explain how it works.
I have been trying to build a search engine using HTML and CSS and JS, but IE11 just doesn't seem to like text boxes. The dropdown items overlap the text field and is never displayed properly (Screenshot attached).Works fine in google Chrome and Edge. But NEVER works in IE11. That said, java script renders super slow too
Any help would be Highly appreciated.
CODEPENLINK
Image 1 - Internet Explorer
Image 2 - Google Chrome
var testVals = ["What are your primary job responsibilitiasasasasases?",
"What experience did you have to get your job?",
"How long have you worked here?",
"What is your own background and experience?",
"What is a typical work day like?",
"How long is your work day?",
"How much variety is there in your work?",
];
$(document).ready(function () {
elementList = document.getElementById("testListDummy");
//Search Box Function
$(".search-text").on("input", function () {
if ($('.search-text').val() == '') {
$('.search-text').removeAttr('style');
elementList.innerHTML = " ";
} else {
$(".search-text").css({"width": "350px", "padding": "0 6px"});
var a="";
a = $(".search-text").val().toUpperCase();
a.replace(/[_\s]/gi, "").toUpperCase();
console.log(a);
var entry = document.createElement('li');
var arrayVal = ""
elementList.innerHTML = " ";
for(i=0;i<=testVals.length;i++){
arrayVal = testVals[i].toUpperCase();
if(arrayVal.includes(a)){
console.log(testVals[i])
$('#testListDummy').append('<li>'+testVals[i]+'</li>');
console.log(document.getElementById('testListDummy'));
}
}
}
});
});
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.5s;
line-height: 40px;
width: 0px;
height: 50px;
}
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
width: 90%;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
font-weight: bold;
}
<!-- Search Box -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
</head>
<body>
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
</body>
There're two issues in your code. First, includes is not defined in IE. You need to add polyfill to make it supported in IE 11. Second, you need to give a width value to .search-box to make it have a correct width in IE when animation. You could add these two lines in your script:
if ($('.search-text').val() == '') {
...
$('.search-box').removeAttr('style');
...
} else {
...
$(".search-box").css({ "width": "410px" });
...
}
The code sample is like below:
//polyfill for includes
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
'use strict';
if (search instanceof RegExp) {
throw TypeError('first argument must not be a RegExp');
}
if (start === undefined) {
start = 0;
}
return this.indexOf(search, start) !== -1;
};
}
var testVals = ["What are your primary job responsibilitiasasasasases?",
"What experience did you have to get your job?",
"How long have you worked here?",
"What is your own background and experience?",
"What is a typical work day like?",
"How long is your work day?",
"How much variety is there in your work?",
];
$(document).ready(function() {
elementList = document.getElementById("testListDummy");
//Search Box Function
$(".search-text").on("input", function() {
if ($('.search-text').val() == '') {
$('.search-text').removeAttr('style');
$('.search-box').removeAttr('style');
elementList.innerHTML = " ";
} else {
$(".search-text").css({
"width": "350px",
"padding": "0 6px"
});
$(".search-box").css({
"width": "410px"
});
var a = "";
a = $(".search-text").val().toUpperCase();
a.replace(/[_\s]/gi, "").toUpperCase();
console.log(a);
var entry = document.createElement('li');
var arrayVal = ""
elementList.innerHTML = " ";
for (i = 0; i <= testVals.length; i++) {
arrayVal = testVals[i].toUpperCase();
if (arrayVal.includes(a)) {
console.log(testVals[i])
$('#testListDummy').append('<li>' + testVals[i] + '</li>');
console.log(document.getElementById('testListDummy'));
}
}
}
});
});
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.5s;
line-height: 40px;
width: 0px;
height: 50px;
}
.search-box>ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box>ul li {
left: -10px;
margin: 0 0 10px 0;
width: 90%;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box>ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box>ul li:hover {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy"></ul>
</div>
</div>
I want to make input tag(currently height=0) popup when I press the plus button,and remove it when I press it again.
How can I remove the gap between the "to do list" div and "dfsdfs" li without removing any html tags?
If I remove the input tag id = "searchBox" (currently height = 0) the problem get solved, but I need the input tag.
Just cant find the problem why I cant fit them whithout any space.
$("ul").on("click","span",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})
body{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 100px auto;
box-shadow: 5px 5px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 0;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}
span{
text-align: center;
color: white;
width: 0;
height: 45px;
display: inline-block;
background: rgb(248, 46, 46);
margin-right:12px;
border: 0;
opacity: 0;
}
li:hover span{
width: 45px;
transition:.2s linear ;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li>dsfsdfs</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>
Instead of setting the input's width or height to 0, use display: none to remove it from the layout flow entirely.
Have you tried executing a script to manipulate the display:
if( element.style.display === 'block') {
document.getElementById("searchBox").style.display = 'none';
}
else {
document.getElementById("searchBox").style.display = 'block';
}
I have built out a to-do list and am hoping to source some assistance in figuring out why my submissions are over-writing the existing to-do item in the local storage.
I have also been unable to set the local storage so it brings back the previous session saved information
Link to the full program in JS Fiddle:
https://jsfiddle.net/rogueathletic/ak0tj3xe/3/
var complete;
var accomplished;
var count = 0;
var value;
var items;
$("#add-to-do").on("click", function (event) {
value = $('#to-do').val().trim(),
localStorage.setItem("value", JSON.stringify(value));
$("#to-do").text(JSON.parse(localStorage.getItem("value")));
event.preventDefault();
value = $('#to-do').val()
oneClick = items
items = $("<p>");
items.attr("id", "item" + count);
items.html(value);
complete = $("<button>");
complete.attr("data-to-do", count);
complete.addClass("checkbox");
complete.append( " √ " );
items = items.prepend(complete);
$("#to-dos").prepend(items);
$("#to-do").val("");
count++;
if (event.list) {
localStorage.setItem('to-do-list', JSON.stringify(event));
if (localStorage.getItem('to-do-list')) {
list = localStorage.getItem('to-do-list');
x = JSON.parse(list);
console.log('event', event.list);
} else {
alert('you may want a better computer');
}
}
$('#to-do-item').text(event.list)
$(document.body).on('click', '.checkbox', function () {
$(this).closest("p").remove();
localStorage.removeItem('value');
});
});
#add-to-do {
border-radius: 20px;
padding: 2px;
padding-left: 15px;
padding-right: 15px;
color: white;
background-color: darkslategray;
box-shadow: inset 3px 3px 5px RGBa(255, 255, 255, .5), 3px 3px 5px RGBa(0, 0, 0.1);
}
#add-to-do:hover {
border-radius: 20px;
padding: 2px;
padding-left: 15px;
padding-right: 15px;
color: rgb(206, 205, 205);
background-color: darkslategray;
box-shadow: inset 3px 3px 5px RGBa(255, 255, 255, .5);
}
.jumbotron {
position: absolute;
min-width: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
z-index: 55;
box-shadow: inset 9px 9px 14px RGB(0, 0, 0);
border: 7px solid darkslategray;
}
#to-do:hover {
border: 2px solid rgba(0, 0, 0, .2);
}
.text-center {
color: darkslategray;
font-weight: 200;
font-size: 8pt;
}
.display-4 {
text-align:center;
font-weight: 500;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
margin-top: -10%;
}
.display-4:hover {
font-weight: 500;
background-color: #565656;
color: transparent;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
margin-top: -10%;
}
#to-do {
border-radius: 15px;
}
#body{
background-color: radial-gradient(white, silver, grey);
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="./assetts/style.css">
</head>
<body id="body">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">To Do List</h1>
<p class="lead">
<form>
<!-- form field for the to do list app -->
<span id="todo-item">Items:
<input id="to-do" placeholder=" your to-do's..." type="text">
<!-- button to add listed items to DOM when clicked -->
<input id="add-to-do" value="Add Item" type="submit">
</span>
<div id="completed"></div>
</form>
<hr>
<!-- To-Do List -->
<div id="to-dos"></div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Script -->
<script src="./assetts/app.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</div>
</div>
<nav class="navbar-center fixed-bottom navbar-light bg-light">
<a class="navbar-center" href="mailto:jason#rogueathletic.com" target="_blank">
<p class="text-center"><br>© 2019 | Jason Schutz</p>
</a>
</nav>
</body>
</html>
Value is overwrite every time. Make value an array and then try.
var value=[];
var items;
$("#add-to-do").on("click", function (event) {
value.push($('#to-do').val().trim()),
localStorage.setItem("value", JSON.stringify(value));
$("#to-do").text(JSON.parse(localStorage.getItem("value"))); //Here the full array will be received. Take the index and then add it to the element
event.preventDefault();
value.push($('#to-do').val())
For removing
var a=localStorage.getItem(value);
a.pop(item)
localStorage.setItem('a');