I'm trying to create a draggable slider with JavaScript. But it is not working on my one. I have tried the same JS code on a built-in HTML, from W3 School and that worked fluently. I can't understand what's the problem with my code!
I've tried almost everything on my concern. But still facing the same problem
let lists = document.querySelector("#lists");
let cursorRunningPosition;
let cursorStartingPosition;
let cursorMoved;
let scrollLeft;
let isdown = false;
lists.addEventListener("mousedown", (e) => {
isdown = true;
cursorStartingPosition = e.pageX;
lists.style.cursor = "grabbing";
if (isdown === true) {
scrollLeft = lists.scrollLeft;
}
})
lists.addEventListener("mouseup", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mouseleave", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mousemove", (g) => {
g.preventDefault();
if (isdown === true) {
cursorRunningPosition = g.pageX;
cursorMoved = cursorRunningPosition - cursorStartingPosition;
lists.scrollLeft = scrollLeft - cursorMoved;
}
})
li{
list-style-type: none;
background-color: lightcoral;
padding: 5px 10px 5px 10px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
#lists {
display: flex;
width: 157%;
justify-content: space-between;
}
.container {
width: 100%;
background-color: yellow;
height: 37vh;
overflow: hidden;
margin-left: 20%;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Test file</title>
</head>
<body>
<div class="container">
<div id="lists">
<li class="li-list">Home</li>
<li class="li-list">About</li>
<li class="li-list">Contact</li>
<li class="li-list">Portfolio</li>
<li class="li-list">Testimonials</li>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
const lists = document.querySelector(".container");
let cursorRunningPosition;
let cursorStartingPosition;
let cursorMoved;
let scrollLeft;
let isdown = false;
lists.addEventListener("mousedown", (e) => {
isdown = true;
cursorStartingPosition = e.pageX;
lists.style.cursor = "grabbing";
if (isdown === true) {
scrollLeft = lists.scrollLeft;
}
})
lists.addEventListener("mouseup", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mouseleave", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mousemove", (g) => {
g.preventDefault();
if (isdown == true) {
cursorRunningPosition = g.pageX;
cursorMoved = cursorRunningPosition - cursorStartingPosition;
lists.scrollLeft = scrollLeft - cursorMoved;
}
})
li{
list-style-type: none;
background-color: lightcoral;
padding: 5px 10px 5px 10px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
#lists {
display: flex;
width: 157%;
justify-content: space-between;
}
.container {
width: 80%;
background-color: yellow;
height: 37vh;
margin-left: 20%;
overflow: auto;
}
.container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Test file</title>
</head>
<body>
<div class="container">
<div id="lists">
<li class="li-list">Home</li>
<li class="li-list">About</li>
<li class="li-list">Contact</li>
<li class="li-list">Portfolio</li>
<li class="li-list">Testimonials</li>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I played around with this and const worked better then var or let and the css for the container:
.container {
width: 80%;
background-color: yellow;
height: 37vh;
margin-left: 20%;
overflow: auto;
}
width to 80% and margin-left to 20% and 'overflow: auto' that enables scrolling. then remove scroll bar:
.container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
PS: Click the 'Expand snippet' to see it better!
I'm making a To-Do List and trying to remove an item when I click a trash bin icon
image
not only the item but also its data from local storage.
However, when I click the icon, only one data is removed.
If I remove another 'li' tag, I have to refresh my page and then click it.
I want to remove items and data, do not refresh it
What is the problem with my page?
Thank you.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TO DO LIST</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q"
crossorigin="anonymous"
/>
<script src="main.js" defer></script>
<!-- <script src="data_storage.js" defer></script> -->
</head>
<body>
<section class="container">
<h1>TO DO LIST</h1>
<ul></ul>
<div class="footer">
<input type="text" placeholder="Title..." />
<button class="enter">Enter</button>
</div>
</section>
</body>
</html>
CSS
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #ecf0f1;
}
.container {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid green;
border-radius: 15px 15px 0 0;
}
h1 {
margin: 10px 20px;
padding-bottom: 15px;
text-align: center;
font-size: 42px;
color: #98e3a1;
border-bottom: 1px dotted #5e7361;
}
ul {
font-size: 24px;
padding-bottom: 10px;
list-style-type: none;
}
li {
position: relative;
padding-bottom: 8px;
margin-bottom: 3px;
margin-right: 20px;
border-bottom: 1px solid grey;
}
.footer {
display: block;
position: relative;
}
input {
position: relative;
width: 93%;
padding: 10px 0;
border: none;
outline: none;
}
.enter {
position: absolute;
padding: 0;
width: 7%;
height: 100%;
outline: none;
background-color: greenyellow;
border: none;
color: grey;
}
.fas {
font-size: 20px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
transition: transform 200ms ease-in;
}
.fas:hover {
color: red;
transform: scale(1.1);
}
JavaScript
const ul = document.querySelector("ul");
const input = document.querySelector("input");
const enterBtn = document.querySelector(".enter");
const LIST_LS = "lists";
function filterFn(toDo) {
return toDo.id === 1;
}
let lists = [];
function saveStorage() {
localStorage.setItem(LIST_LS, JSON.stringify(lists));
}
function deleteStorage(event) {
const trashBtn = event.target;
const li = trashBtn.parentNode;
ul.removeChild(li);
const cleanStorage = lists.filter((toDo) => {
return toDo.id !== parseInt(li.id);
});
lists = cleanStorage;
saveStorage();
}
function loadStorage() {
const loadStorage = localStorage.getItem(LIST_LS);
if (loadStorage !== null) {
const parsedList = JSON.parse(loadStorage);
parsedList.forEach((list) => {
createItem(list.text);
});
}
}
function onAdd() {
const text = input.value;
if (text === "") {
input.focus();
return;
}
createItem(text);
input.value = "";
input.focus();
}
function createItem(text) {
const itemRow = document.createElement("li");
const newId = lists.length + 1;
itemRow.setAttribute("class", "item__row");
itemRow.innerHTML = `${text} <i class="fas fa-trash-alt" data-id=${itemRow.id}></i>`;
ul.appendChild(itemRow);
itemRow.id = newId;
const delBtn = document.querySelector(".fa-trash-alt");
delBtn.addEventListener("click", deleteStorage);
const listObj = {
text: text,
id: newId,
};
lists.push(listObj);
saveStorage();
return itemRow;
}
loadStorage();
enterBtn.addEventListener("click", () => {
onAdd();
});
input.addEventListener("keypress", (event) => {
if (event.key === "Enter") onAdd();
});
Your problem is this line:
const delBtn = document.querySelector(".fa-trash-alt");
This means it will always select the first trash icon.
You have to write:
const delBtn = itemRow.querySelector(".fa-trash-alt");
Working example here:
https://codesandbox.io/s/damp-morning-csiny
I am not quite sure how to phrase my question, so please forgive me. My plan was to create giant images of letters that make up the words "Hello World". I wanted to have these words nest inside of the big boxes and later decided to have each word be inside a smaller box. In the picture, I have created a small box (the sized has not been permanently set, I was just testing). But when I created the second small box, it flew out of the big box. In my index.html file, the <div> for the second small box was nested inside the big box div.
Here is the code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class = "box">
<div class = "hello-box"></div>
<div class = "h-left"></div>
<div class = "h-mid"></div>
<div class = "h-right"></div>
</div>
<div class = "world-box">
</div>
</div>
</body>
</html>
STYLE.CSS
body {
background-color: skyblue;
}
.box {
position: relative;
margin: auto;
margin-top: 15%;
display: block;
border: 3px solid black;
width: 800px;
height: 500px;
}
.hello-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.world-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
RESULT
Any help would very appreciated!!!
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="flex-container">
<div>H</div>
<div>E</div>
<div>L</div>
<div>L</div>
<div>O</div>
<div>W</div>
<div>O</div>
<div>R</div>
<div>L</div>
<div>D</div>
<div>!</div>
</div>
</body>
</html>
using flexbox
Assuming you're able to modify the HTML, the easiest way to fix this would be to simply shift your .world-box <div> to be inside of your .box <div>:
body {
background-color: skyblue;
}
.box {
position: relative;
margin: auto;
margin-top: 15%;
display: block;
border: 3px solid black;
width: 800px;
height: 500px;
}
.hello-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.world-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
<body>
<div class="box">
<div class="hello-box"></div>
<div class="h-left"></div>
<div class="h-mid"></div>
<div class="h-right"></div>
<div class="world-box"></div>
</div>
</body>
I would actually create a function that would put anything you want into some kind of wrapper, like so:
/* js/external.js */
//<![CDATA[
var doc, bod, M, I, S, Q, special, unspecial, shuffle, ReaderBoard, autoBoard, randBoard; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
special = function(str){
return str.replace(/&/g, '&').replace(/'/g, ''').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
unspecial = function(str){
return str.replace(/&/g, '&').replace(/'/g, "'").replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
shuffle = function(array){
var a = array.slice(), l = a.length;
a.sort(function(b, c){
return 0.5 - Math.random();
});
return a;
}
ReaderBoard = function(outputElement){
this.output;
var t = this;
this.setOutput = function(element){
this.output = element;
return this;
}
this.setOutput(outputElement);
this.setText = function(text){
this.output.innerHTML = '';
for(var i=0,a=text.split(''),s,d,l=a.length; i<l; i++){
d = M('div'); s = a[i];
if(s === ' ')d.className = 'space';
d.innerHTML = special(s); this.output.appendChild(d);
}
return this;
}
}
autoBoard = function(outputElement, textArray, interval, noLoop){
var rb = new ReaderBoard(outputElement), i = 0, r, l = textArray.length;
var v = interval || 1500;
rb.setText(textArray[0]);
r = setInterval(function(){
i++;
if(i === l){
if(noLoop){
clearInterval(r); r = undefined;
return;
}
else{
i = 0;
}
}
rb.setText(textArray[i]);
}, v);
}
randBoard = function(outputElement, textArray, interval, noLoop){
var rb = new ReaderBoard(outputElement), i = 0, r, a = shuffle(textArray), l = a.length;
var v = interval || 1500;
rb.setText(a[0]);
r = setInterval(function(){
i++;
if(i === l){
if(noLoop){
clearInterval(r); r = undefined;
return;
}
else{
a = shuffle(a); i = 0;
}
}
rb.setText(a[i]);
}, v);
}
var rb = new ReaderBoard(I('readerboard'));
rb.setText('Hello World!');
autoBoard(I('autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?']);
autoBoard(I('noloop_autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?'], 2000, true);
randBoard(I('randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice']);
randBoard(I('noloop_randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice'], 3500, true);
});
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
.flex_text{
display:flex;
}
.flex_text>div{
flex:1; background:#fff; font:bold 30px Arial, Helvetica, sans-serif; text-align:center; margin:3px;
}
.flex_text>.space{
background:#ccc; margin:0;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div class='flex_text' id='readerboard'></div>
<hr />
<div class='flex_text' id='autoboard'></div>
<hr />
<div class='flex_text' id='noloop_autoboard'></div>
<hr />
<div class='flex_text' id='randboard'></div>
<hr />
<div class='flex_text' id='noloop_randboard'></div>
</body>
</html>
Just a thought.
I am trying to build a simple toggle button using JavaScript, not jQuery, to translate the element back and forth. I did my best a newbie (for JavaScript) but cannot figure it out. The main idea is that the side menu should show from the side when clicked on the button and should hide back to the same place when it is clicked again.
Please help.
function toggleNavBar() {
var nav = document.getElementById("sideNav"),
button = document.getElementById("checkButton"),
check = "hidden";
if (check == "hidden") {
nav.style.transform = "translate(0px)";
check = "shown";
} else if (check == "shown") {
nav.style.transform = "translate(-290px)";
check = "hidden";
}
}
body {
margin: 0 auto;
padding: 0;
}
#sideNav {
background-color: #96e6b3;
display: inline-block;
width: 20%;
position: fixed;
height: 100vh;
z-index: 2;
overflow: hidden;
-webkit-transform: translate(-290px);
/* Safari */
transform: translate(-290px);
*/
}
nav ul {
list-style-type: none;
font-family: Junction, "Times New Roman", sans-serif;
font-size: 1.9em;
margin-top: 24%;
}
nav ul li {
margin-top: 1%;
padding-top: 4.7%;
margin-left: -50px;
text-align: center;
}
nav a {
text-decoration: none;
color: #000000;
}
nav li:hover {
background-color: #34cf6d;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="font.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="styleCheck.css">
<style>
<!--very specific small CSS for this document--> #toggler {
text-decoration: underline;
}
#toggler:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="o-content">
<div class="o-container">
<div class="o-grid">
<button id="checkButton" class="c-hamburger c-hamburger--htx" onclick="toggleNavBar()">
<span>toggle menu</span>
</button>
</div>
</div>
</div>
</div>
<div id="sideNav">
<nav>
<ul>
<li>Home
</li>
<li>Items
</li>
<li>XML
</li>
</ul>
</nav>
</div>
<!--side Nav-->
</body>
</html>
You should only declare your check variable once:
var check = "hidden";
function toggleNavBar() {
var nav = document.getElementById("sideNav"),
button = document.getElementById("checkButton");
if (check == "hidden") {
nav.style.transform = "translate(0px)";
check = "shown";
} else if (check == "shown") {
nav.style.transform = "translate(-290px)";
check = "hidden";
}
}
A few optimizations (assuming this is done after document is ready):
var toggleNavBar = (function() {
var check = "hidden";
var nav = document.getElementById("sideNav");
var button = document.getElementById("checkButton");
return function() {
if (check == "hidden") {
nav.style.transform = "translate(0px)";
check = "shown";
} else {
nav.style.transform = "translate(-290px)";
check = "hidden";
}
}
})();
I need to create an animation with JavaScript. I can't use CSS3. When one loads the page the progress bar should increase in width to the given parameter x.
I'm having trouble implementing it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#progressbar
{
background-color: black;
border-radius: 13px;
padding: 3px;
width:100%;
}
#progressbar2
{
background-color: orange;
width: 15%;
height: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
</style>
<script>
function func(x)
{
var result = x;
document.getElementById("progressbar2").style.width=result+"%";
document.getElementById("progressbar2").innerHTML=result +"%";
}
</script>
</head>
<body onload="func(50);">
<div id="progressbar">
<div id="progressbar2"></div>
</div>
</body>
</html>
You can use requestAnimationFrame() to accomplish what you're looking for. You can wrap up it all up in a function, like this:
// Move the progress bar to the given `n` over `overMs` ms.
function progressBarTo(id, n, overMs) {
function progressToStep(x) {
var result = x;
document.getElementById(id).style.width = result + "%";
document.getElementById(id).innerHTML = result.toFixed(2) + "%";
}
var start;
function animateBar(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
progressToStep((progress / overMs) * n);
if (progress < overMs) {
requestAnimationFrame(animateBar);
} else {
progressToStep(n);
}
}
requestAnimationFrame(animateBar);
}
progressBarTo("bar1", 20, 5000);
progressBarTo("bar2", 40, 2500);
progressBarTo("bar3", 60, 1500);
progressBarTo("bar4", 80, 750);
.outer-bar {
background-color: black;
border-radius: 13px;
padding: 3px;
width: 100%;
}
.inner-bar {
background-color: orange;
width: 0%;
height: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
<div class="outer-bar">
<div id="bar1" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar2" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar3" class="inner-bar"></div>
</div>
<div class="outer-bar">
<div id="bar4" class="inner-bar"></div>
</div>