how to avoid this unnecessary height in responsive view?
i tried everything but still not getting
and if possible can anyone suggest me how to make it responsive where both top headers are in left in column which must appear on clicking a hamburger
var main = document.getElementById('main');
function clicked() {
main.classList.toggle("mystyle");;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 12px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
}
.header1 {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: transparent;
color: aliceblue;
}
.main {}
.info {
display: flex;
flex-direction: column;
padding: 20px;
}
.header2 {
width: 100%;
display: flex;
color: aliceblue;
justify-content: space-around;
align-items: center;
background-color: transparent;
height: 60px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.navbar {}
.navbar ul {
display: flex;
flex-direction: row;
list-style: none;
position: relative;
}
.navbar ul ul {
top: 70px;
width: fit-content;
padding: 0 30px 0 30px;
display: none;
font-size: 1rem;
line-height: .01px;
z-index: 10;
transition: all 2s ease;
background-color: white;
}
.navbar ul ul li a {
color: black;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
}
a {
text-decoration: none;
color: aliceblue;
}
li {
padding: 30px;
}
.sicons {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.sicons img {
display: block;
padding: 5px;
}
.text {
z-index: 1;
position: relative;
top: 0;
width: 50%;
display: flex;
margin-left: 50px;
flex-direction: column;
margin-top: 60px;
height: auto;
line-height: 8rem;
background-color: transparent;
font-weight: 600;
}
.st1 {
font-size: 1.6rem;
color: white;
}
.nd2 {
font-size: 8rem;
color: crimson;
}
.th3 {
font-size: 8rem;
color: white;
}
.btn button {
left: 0;
width: 220px;
height: 70px;
background-color: transparent;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid white;
padding: 15px;
}
.active,
.navbar ul li:hover {
border-bottom: 1px solid crimson;
}
.mystyle {
display: none;
}
/* mediaqueries */
<!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>sample</title>
</head>
<body>
<div id="main">
<div id="header1" class="header1">
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
<div class="info">
<span style="color: crimson;">HOURS</span><span>Mon - Sat
8.00 - 18.00</span>
</div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
<div class="info">
<span style="color: crimson;">Call</span>+91 878778777</span>
</div>
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
<div class="info">
<span style="color: crimson;">Address</span><span>India</span>
</div>
</div>
<hr style="color: crin;">
<div id="header2" class="header2">
<div class="navbar">
<ul class="mt">
<li class="active">Home</li>
<li class="">About</li>
<li class="">Programs
<ul>
<li> School Program</li>
<hr>
<li> Single Program</li>
<hr>
<li> Schedule</li>
<hr>
<li> Workshop and events</li>
<hr>
<li> Get Quote</li>
</ul>
</li>
<li class="">Blog</li>
<li class="">Shop</li>
<li class="">Elements</li>
</ul>
</div>
<div class="sicons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
</div>
</div>
</div>
<div class="text">
<div class="st1">ENROLL TODAY</div>
<div class="nd2">Learn To</div>
<div class="th3">Play Guitar </div>
<div class="btn">
<button onclick="clicked()"> START NOW </button>
</div>
</div>
</body>
</html>
Your .text has margin-top: 60px; and line-height: 8rem is this the unneccessary height you were looking for?
You can use Browser development tools to find where stylings come from:
As for your question about the hamburger menu button... you can search stackoverflow for examples. Just type "how to make burger button" or something in the search bar at the top.
One result here: Javascript hamburger menu toggle (this is about an error someone had but you can copy&paste the correct source code from there if you also read the solution).
You can also search the internet for tutorials on this. One tutorial found here:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0
Related
I'm very new to coding but I decided to make a personal practice website. My page looks fine on my computer but when I view it on a phone or resize my page vertically, all of my content starts to overlap. How can I prevent it from overlapping?
I've read that it might be an issue with having position: absolute; in my code but I'm not sure how I would replace that.
<head>
<style>
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.lower-center {
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
line-height: 18px;
text-align: center;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
position: absolute;
bottom: 0;
width: 97%;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}
</style>
</head>
<body>
<div class="centered logosize">
<p class="logo" id="typewriter">daniel m.</p>
</div>
<div class="lower-center location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
</body>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
</html>
It's better to add all title elements inside the vertically centered <div> to prevent overlap.
As you resize the screen, the centered <div> will reposition itself according to the changes made. But what's inside the <div> will be unchanged. Think of it like a component or a piece of a puzzle, you structure it as you desire and then the piece responds as a whole to the external changes.
Try the following snippet:
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.centered {
display:inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.lower-center {
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
line-height: 18px;
text-align: center;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
position: absolute;
bottom: 0;
width: 97%;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}
<body style="vertical-align: middle;">
<!--------- centered element -------->
<div class="centered">
<div class="logosize">
<span class="logo" id="typewriter">daniel m.</span>
</div>
<div class="location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
</div>
<!----------------------------------->
</body>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
First, make sure you have the below lines in the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
These enable responsiveness.
Then, in the <body> tag:
<div class="logosize">
<span class="logo" id="typewriter">daniel m.</span>
</div>
<div class="lower-center location-text">
<span>
<span style='font-size:13px;'>📍</span>
las vegas
</span>
<span>web developer _ creator</span>
</div>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
Notice, that <footer> should also be in the <body>. The rest code here is same, except that I've removed some unnecessary tags.
And finally changes in the CSS:
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
/* Instead of display: block; Add the below lines: */
height: 100vh; /* So body will have the full screen height */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* And the tags inside the body i.e. 2 divs and 1 footer - these will be aligned in a column and will be centered horizontally and vertically */
}
.centered {} /* No need of this */
.lower-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* With this, the 2 span's in this div will be aligned in a column and will be centered horizontally and vertically. */
}
Since you are aware of display: flex I would use that. It is definitely better than the position absolute approach because items in a flex box will not collide.
Here is the solution I came up with using Flexbox, note a few things:
the .centered css declaration
I added a <div class="centered"> around the two divs that originally had a centered class
Just a note: it's best practice to have everything that is visible to the user or a user might interact with (i.e. Javascript) within the <body> tag, so I moved the <footer> inside the body
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}
<html>
<head>
</head>
<body>
<section class="centered">
<div class="logosize">
<p class="logo" id="typewriter">daniel m.</p>
</div>
<div class="location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
</section>
</body>
</html>
I am working on a school project I want to do a responsive text which is similar to the picture below and further when it switch to mobile view the text have to change its position and fit below the hero image.
how to change the size according to the screen size?
I am a beginner trying to learn things on my own.
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
font-family: Raleway;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.img-hover-zoom {
height: 500px;
overflow: hidden;
float: left;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.5);
}
.hero-text {
grid-area:auto;
overflow: hidden;
text-align: left;
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: rgb(0, 0, 0);
}
h1 {
text-align: left;
text-transform: uppercase;
font-family: Agency FB, Helvetica, sans-serif;
font-size: 2em;
}
p {
font-size: 3vh;
font-family: Arial, Helvetica, sans-serif;
}
#media (max-width: 650px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css" />
<link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="img-hover-zoom">
<img src="/img/hero.jpg" alt="This zooms-in really well and smooth" width="500px" height="500px">
</div>
<div class="hero-text">
<h1>Travel around the World</h1>
<br><br>
<p>Traveling is a very crucial part of life as it is the best way to get out of the busy schedule.
It is also to experience life in different ways.Traveling is actually a good remedy for stress, anxiety
and depression. It also improves the mental and physical health. We only have one life and
we should thank it for making us more advanced creature on this planet. Not only do we get to
experience the beauty of nature, different geographies ,topographies, and people.
</p>
</div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
</html>
on my website
Below are the HTML, CSS, and JS code in which I am facing the problem, and not able to attain the functionality that I am supposed to.
//This is where I think the prblem is but I am not able to figure out how to correct it
window(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
}
})
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
position: fixed;
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
*background: #ffffff;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="src=" https://code.jquery.com/jquery-3.5.1.min.js ""></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
While scrolling down the background of the nav-bar should turn white but it's not behaving in that way it should be behaving. What would be the easier way to attain this functionality if I am not supposed to do it this way.
Is there any problem if the navbar is always fixed?
Add background-color: white; to the .navbar class and check if that is satisfactory. This allows you to make the navbar background white and the page text goes behind the navbar on scrolling. If that satisfies you, then you can even remove the jquery code.
Try like this:
//This is where I think the prblem is but I am not able to figure out how to correct it
(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
})
})();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
background: #ffffff;
position: fixed;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Fixed HTML syntax (<script> src), JavaScript syntax (})()) and CSS syntax (background without *)
In the JavaScript, remove the class again when the condition is not met
In the CSS, set position: fixed; when the .sticky class is present, not the other way around
Look at position: sticky for a pure CSS way to do this, e.g.:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
background: #ffffff;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar sticky">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
I want to use a .js script in my html file, but unfortunately my script does not work the right way :(. I build a responsive Navbar for my website with a "hamburger Menu" on small screensizes.
I managed it to show the "Hamburger Menu" on a smaller screensize but my navbarlinks don't show up if I click on it. Here my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
here my css:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
and the important part I guess, my javascript:
const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
Sry for the lot of code, but I want to find the mistake with your help so I post all of my code. Thanks
it will be toggle-button not toggleButton in
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
I am creating a trello like web app for practising so i have completed the cards with drag drop features but i want now to add content to the li items of an ul tag that can even be edited by user too
I want it to be in javascript
HTML COde
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trello</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Masthead -->
<header class="masthead">
<div class="boards-menu">
<div class="board-search">
<input type="search" class="board-search-input" aria-label="Board Search">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="logo">
<h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
</div>
<div class="user-settings" style="height: 20px;margin-bottom:35px;">
<a href="profile.html">
<img src="https://img.icons8.com/wired/64/000000/settings.png">
</a>
</div>
</header>
<!-- Lists container -->
<section class="lists-container">
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card1">
<h3 class="list-title">Completed Tasks</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<button class="add-list-btn btn">Add a list</button>
</section>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script/script.js">
</script>
</body>
</html>
Javascript
$(function () {
$("#parent, #parent1").sortable({
connectWith: ".list-items"
}).disableSelection();
});
document.getElementById('button').onclick = repeat;
var i = 0;
var original = document.getElementById('repeatTHIS');
function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatTHIS" + ++i;
original.parentNode.appendChild(clone);
}
my css as follows
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
:focus {
outline-color: #fa0;
}
:root {
font-size: 11px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Masthead */
.masthead {
flex-basis: 4rem;
display: flex;
align-items: center;
padding: 0 0.8rem;
margin: -8px -8px 0 -8px;
background-color: #0067a3;
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}
.masthead .btn {
background-color: #4c94be;
border-radius: 0.3rem;
transition: background-color 150ms;
}
.masthead .btn:hover {
background-color: #3385b5;
}
.boards-menu {
display: flex;
flex-shrink: 0;
}
.boards-btn {
flex-basis: 9rem;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
margin-right: 0.8rem;
padding: 0.6rem 0.8rem;
}
.boards-btn-icon {
font-size: 1.7rem;
padding-right: 1.2rem;
}
.board-search {
flex-basis: 18rem;
position: relative;
}
.board-search-input {
height: 3rem;
border: none;
border-radius: 0.3rem;
background-color: #4c94be;
width: 100%;
padding: 0 3rem 0 1rem;
color: #fff;
}
.board-search-input:hover {
background-color: #66a4c8;
}
.search-icon {
font-size: 1.5rem;
position: absolute;
top: 50%;
right: 0.8rem;
transform: translateY(-50%) rotate(90deg);
color: #fff;
}
.logo {
flex: 1;
font-family: "Courgette", cursive;
font-size: 2.2rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
margin: 0 2rem;
transition: color 150ms;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.logo:hover {
color: rgba(255, 255, 255, 0.8);
}
.logo-icon {
padding-right: 0.4rem;
}
.user-settings {
display: flex;
height: 1.5rem;
color: #fff;
}
.user-settings-btn {
font-size: 1.5rem;
width: 3.5rem;
margin-right: 1.5rem;
}
/* Board info bar */
.board-info-bar {
flex-basis: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.8rem 0;
padding: 0 1rem;
color: #f6f6f6;
}
sboard-info-bar .btn {
font-size: 1.4rem;
font-weight: 400;
transition: background-color 150ms;
padding: 0 0.6rem;
border-radius: 0.3rem;
height: 3rem;
}
.board-info-bar .btn:hover {
background-color: #006aa8;
}
.private-btn-icon,
.menu-btn-icon {
padding-right: 0.6rem;
white-space: nowrap;
}
.board-title h2 {
font-size: 1.8rem;
font-weight: 700;
white-space: nowrap;
}
/* Lists */
.lists-container::-webkit-scrollbar {
height: 2.4rem;
}
.lists-container::-webkit-scrollbar-thumb {
background-color: #66a3c7;
border: 0.8rem solid #0079bf;
border-top-width: 0;
}
.lists-container {
display: flex;
align-items: start;
padding: 0 0.8rem 0.8rem;
overflow-x: auto;
height: calc(100vh - 8.6rem);
margin-top: 60px;
}
.list {
flex: 0 0 27rem;
display: flex;
flex-direction: column;
background-color: #e2e4e6;
max-height: calc(100vh - 11.8rem);
border-radius: 0.3rem;
margin-right: 1rem;
}
.list:last-of-type {
margin-right: 0;
}
.list-title {
font-size: 1.4rem;
font-weight: 700;
color: #333;
padding: 1rem;
}
.list-items {
flex: 1;
display: flex;
flex-direction: column;
align-content: start;
padding: 0 0.6rem 0.5rem;
overflow-y: auto;
}
.list-items::-webkit-scrollbar {
width: 1.6rem;
}
.list-items::-webkit-scrollbar-thumb {
background-color: #c4c9cc;
border-right: 0.6rem solid #e2e4e6;
}
.list-items li {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.3;
background-color: #fff;
padding: 0.65rem 0.6rem;
color: #4d4d4d;
border-bottom: 0.1rem solid #ccc;
border-radius: 0.3rem;
margin-bottom: 0.6rem;
word-wrap: break-word;
cursor: pointer;
}
.list-items li:last-of-type {
margin-bottom: 0;
}
.list-items li:hover {
background-color: #eee;
}
.add-card-btn {
display: block;
font-size: 1.4rem;
font-weight: 400;
color: #838c91;
padding: 1rem;
text-align: left;
cursor: pointer;
}
.add-card-btn:hover {
background-color: #cdd2d4;
color: #4d4d4d;
text-decoration: underline;
}
.add-list-btn {
flex: 0 0 27rem;
display: block;
font-size: 1.4rem;
font-weight: 400;
background-color: #006aa7;
color: #a5cae0;
padding: 1rem;
border-radius: 0.3rem;
cursor: pointer;
transition: background-color 150ms;
text-align: left;
margin-left: 15px;
}
.add-list-btn:hover {
background-color: #005485;
}
.add-card-btn::after,
.add-list-btn::after {
content: '...';
}
$(function () {
$("#parent, #parent1").sortable({
connectWith: ".list-items"
}).disableSelection();
});
document.getElementById('button').onclick = repeat;
var i = 0;
var original = document.getElementById('repeatTHIS');
function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatTHIS" + ++i;
original.parentNode.appendChild(clone);
}
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
:focus {
outline-color: #fa0;
}
:root {
font-size: 11px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Masthead */
.masthead {
flex-basis: 4rem;
display: flex;
align-items: center;
padding: 0 0.8rem;
margin: -8px -8px 0 -8px;
background-color: #0067a3;
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}
.masthead .btn {
background-color: #4c94be;
border-radius: 0.3rem;
transition: background-color 150ms;
}
.masthead .btn:hover {
background-color: #3385b5;
}
.boards-menu {
display: flex;
flex-shrink: 0;
}
.boards-btn {
flex-basis: 9rem;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
margin-right: 0.8rem;
padding: 0.6rem 0.8rem;
}
.boards-btn-icon {
font-size: 1.7rem;
padding-right: 1.2rem;
}
.board-search {
flex-basis: 18rem;
position: relative;
}
.board-search-input {
height: 3rem;
border: none;
border-radius: 0.3rem;
background-color: #4c94be;
width: 100%;
padding: 0 3rem 0 1rem;
color: #fff;
}
.board-search-input:hover {
background-color: #66a4c8;
}
.search-icon {
font-size: 1.5rem;
position: absolute;
top: 50%;
right: 0.8rem;
transform: translateY(-50%) rotate(90deg);
color: #fff;
}
.logo {
flex: 1;
font-family: "Courgette", cursive;
font-size: 2.2rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
margin: 0 2rem;
transition: color 150ms;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.logo:hover {
color: rgba(255, 255, 255, 0.8);
}
.logo-icon {
padding-right: 0.4rem;
}
.user-settings {
display: flex;
height: 1.5rem;
color: #fff;
}
.user-settings-btn {<!DOCTYPE html>
<html lang="en">
<head>
<title>Trello</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Masthead -->
<header class="masthead">
<div class="boards-menu">
<div class="board-search">
<input type="search" class="board-search-input" aria-label="Board Search">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="logo">
<h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
</div>
<div class="user-settings" style="height: 20px;margin-bottom:35px;">
<a href="profile.html">
<img src="https://img.icons8.com/wired/64/000000/settings.png">
</a>
</div>
</header>
<!-- Lists container -->
<section class="lists-container">
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card1">
<h3 class="list-title">Completed Tasks</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<button class="add-list-btn btn">Add a list</button>
</section>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script/script.js">
</script>
</body>
</html>
font-size: 1.5rem;
width: 3.5rem;
margin-right: 1.5rem;
}
/* Board info bar */
.board-info-bar {
flex-basis: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.8rem 0;
padding: 0 1rem;
color: #f6f6f6;
}
sboard-info-bar .btn {
font-size: 1.4rem;
font-weight: 400;
transition: background-color 150ms;
padding: 0 0.6rem;
border-radius: 0.3rem;
height: 3rem;
}
.board-info-bar .btn:hover {
background-color: #006aa8;
}
.private-btn-icon,
.menu-btn-icon {
padding-right: 0.6rem;
white-space: nowrap;
}
.board-title h2 {
font-size: 1.8rem;
font-weight: 700;
white-space: nowrap;
}
/* Lists */
.lists-container::-webkit-scrollbar {
height: 2.4rem;
}
.lists-container::-webkit-scrollbar-thumb {
background-color: #66a3c7;
border: 0.8rem solid #0079bf;
border-top-width: 0;
}
.lists-container {
display: flex;
align-items: start;
padding: 0 0.8rem 0.8rem;
overflow-x: auto;
height: calc(100vh - 8.6rem);
margin-top: 60px;
}
.list {
flex: 0 0 27rem;
display: flex;
flex-direction: column;
background-color: #e2e4e6;
max-height: calc(100vh - 11.8rem);
border-radius: 0.3rem;
margin-right: 1rem;
}
.list:last-of-type {
margin-right: 0;
}
.list-title {
font-size: 1.4rem;
font-weight: 700;
color: #333;
padding: 1rem;
}
.list-items {
flex: 1;
display: flex;
flex-direction: column;
align-content: start;
padding: 0 0.6rem 0.5rem;
overflow-y: auto;
}
.list-items::-webkit-scrollbar {
width: 1.6rem;
}
.list-items::-webkit-scrollbar-thumb {
background-color: #c4c9cc;
border-right: 0.6rem solid #e2e4e6;
}
.list-items li {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.3;
background-color: #fff;
padding: 0.65rem 0.6rem;
color: #4d4d4d;
border-bottom: 0.1rem solid #ccc;
border-radius: 0.3rem;
margin-bottom: 0.6rem;
word-wrap: break-word;
cursor: pointer;
}
.list-items li:last-of-type {
margin-bottom: 0;
}
.list-items li:hover {
background-color: #eee;
}
.add-card-btn {
display: block;
font-size: 1.4rem;
font-weight: 400;
color: #838c91;
padding: 1rem;
text-align: left;
cursor: pointer;
}
.add-card-btn:hover {
background-color: #cdd2d4;
color: #4d4d4d;
text-decoration: underline;
}
.add-list-btn {
flex: 0 0 27rem;
display: block;
font-size: 1.4rem;
font-weight: 400;
background-color: #006aa7;
color: #a5cae0;
padding: 1rem;
border-radius: 0.3rem;
cursor: pointer;
transition: background-color 150ms;
text-align: left;
margin-left: 15px;
}
.add-list-btn:hover {
background-color: #005485;
}
.add-card-btn::after,
.add-list-btn::after {
content: '...';
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trello</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Masthead -->
<header class="masthead">
<div class="boards-menu">
<div class="board-search">
<input type="search" class="board-search-input" aria-label="Board Search">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="logo">
<h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
</div>
<div class="user-settings" style="height: 20px;margin-bottom:35px;">
<a href="profile.html">
<img src="https://img.icons8.com/wired/64/000000/settings.png">
</a>
</div>
</header>
<!-- Lists container -->
<section class="lists-container">
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card1">
<h3 class="list-title">Completed Tasks</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<button class="add-list-btn btn">Add a list</button>
</section>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script/script.js">
</script>
</body>
</html>
You could use the HTML Attribute called contenteditable, this will allow the users to edit html content on the element!
But if you need to save the changes, you have to add some javascript AJAX request into your PHP page that may save the changes into a database or a file or whatever else.
Hope my answer would be useful for you!
window.isEditingALi=false;
document.addEventListener("click", function(e){ //Of course you can merge this EventListener with the next one but I am separing them just to make things clear for you !
const elementsIdSelector="editableLi";
e=(e||window.event);
e.preventDefault();
const path=e.path;
for(var i=0;i<path.length-4;i++){
if(path[i].tagName=="LI"&&path[i].id==elementsIdSelector){
//Found a Li element with the id required ( Even dynamically created li would fires ! )
//Do whatever you want there
path[i].addEventListener("click", function(){
if(this.getAttribute("contenteditable")!="true"){
const wantEdit=window.confirm("You want to edit this element content ?");
if(wantEdit){
this.setAttribute("contenteditable", true);
window.isEditingALi=this;
this.focus();
}else{
window.isEditingALi=false;
}
}
});
}
}
});
document.addEventListener("click", function(e){
e=(e||window.event);
e.preventDefault();
const path=e.path;
let canGetReset=true;
for(var i=0;i<path.length-4;i++){
if(path[i]==window.isEditingALi) canGetReset=false;
}
if(canGetReset&&window.isEditingALi){
window.isEditingALi.removeAttribute("contenteditable");
//Here you can add your Ajax request or whatever function you want to do after the user finish editing the li ..
alert("Li has been changed successfully !");
window.isEditingALi=false;
}
});
//This is just an additional function to test if the dynamically created element would work or not !
function createEditableLi(){
const ul=document.querySelector("ul");
const newLi=document.createElement("li");
newLi.setAttribute("id", "editableLi");
newLi.innerHTML="New Li (Created dynamically)";
ul.appendChild(newLi);
}
body{
font-family: Arial, sans-serif;
font-size: 14px;
}
You can actually edit these Li by clicking and apply any changes you want ! (Even dynamically created elements are supported now!)
<br>
<ul>
<li id="editableLi"> First Li</li>
<li id="editableLi"> Second Li</li>
<li id="editableLi"> Third Li</li>
<li id="editableLi"> Another Li</li>
<li id="editableLi"> More Li</li>
</ul>
<br>
<button onclick="createEditableLi()">Create a New Li Dynamically</button>