Sofiaml Boo

Sofiaml Boo

1581907485

How to Create List Segmented Control with JavaScript and CSS

First I have created the main div with an ID name container and placed a list inside it. Inside the list, I have placed 3 texts as list items and 2 divs for the active and slide effect. Also in the HTML file, I have linked other files like CSS, JavaScript, and jQuery CDN.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like width, height, position, etc to the elements. After that, I gave color values and the layout based on the grid. There I have used calc( ) command to calculated and pass exact values.

JavaScript handling the active and slide feature in this program. First JS fetched elements using document.querySelector command and stored in conts. There I have used JS if{} else{} statements and declared the conditions, and used let command for functioning. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Segmented Control Interaction | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
  <link rel="stylesheet" href="style.css">
 
</head>
<body>
<div id="container">
	<ul>
		<li>About</li>
		<li>Contact</li>
		<li>Pricing</li>
		<div class="focus first"></div>
		<div class="focus second"></div>
		
	</ul>
</div>
 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
  <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ff3636;
  overflow: hidden;
}
 
#container {
  width: 350px;
  height: 350px;
  display: grid;
  place-items: center;
}
#container ul {
  position: relative;
  width: 350px;
  height: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
#container ul li {
  list-style: none;
  display: grid;
  place-items: center;
  font-family: "montserrat";
  color: #ff3636;
  z-index: 10;
  cursor: pointer;
}
#container ul .focus {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / 3);
  height: 100%;
  border-radius: 35px;
  background: #fff;
  box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.015), 0 100px 80px rgba(0, 0, 0, 0.03);
}
#container ul .focus.second {
  left: calc(-100% / 3);
}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

console.clear();
 
const liContainer = document.querySelector("ul");
const liEls = [...document.querySelectorAll("ul li")];
const slideEl_1 = document.querySelector(".focus.first");
const slideEl_2 = document.querySelector(".focus.second");
 
gsap.defaults({
	ease: "ease.inOut",
});
let tl = gsap.timeline();
 
let liRect = liContainer.getBoundingClientRect();
let slideEl_1_DefaultWidth = slideEl_1.getBoundingClientRect().width;
let slideEl_1_DefaultLeft = slideEl_1.getBoundingClientRect().left;
let slideEl_2_DefaultLeft = slideEl_2.getBoundingClientRect().left;
 
let startPosIndex = 1;
let reachedEnd = false;
let activeIndex = startPosIndex;
 
let animationDuration = 0.2;
 
liEls.forEach((el, index) => {
	let elRect = el.getBoundingClientRect();
 
	el.addEventListener("mousedown", () => {
		if (reachedEnd && index + 1 == startPosIndex) {
		tl.to(slideEl_1, animationDuration, { left: `${liRect.width}px` });
		tl.to(
		slideEl_2,
		animationDuration,
		{ left: `${elRect.left - liRect.left}px` },
		`-=${animationDuration}`
		);
		tl.set(
		slideEl_1,
		{ left: `${slideEl_1_DefaultLeft - liRect.left}px` },
		`+=${animationDuration}`
		);
		tl.set(
		slideEl_2,
		{ left: `${slideEl_2_DefaultLeft - liRect.left}px` },
		`+=${animationDuration}`
		);
		}
 
		let timesWidth = index + 1 - activeIndex + 1 <= 0 ? 1 : index + 1 - activeIndex + 1;
		activeIndex = index + 1;
 
		tl.to(slideEl_1, animationDuration, { width: `${timesWidth * slideEl_1_DefaultWidth}px` });
		if (index + 1 != startPosIndex || reachedEnd == false) {
		tl.to(slideEl_1, animationDuration, {
		left: `${elRect.left - liRect.left}px`,
		width: `${slideEl_1_DefaultWidth}px`,
		});
		}
 
		if (index + 1 == liEls.length) {
		reachedEnd = true;
		} else {
		reachedEnd = false;
		}
	});
});

That’s It. Now you have successfully created Segmented Control With JavaScript and CSS, List Based Segmented Control. If you have any doubt or question then comment down below.

Thanks for Visiting, Keep Visiting.

#javascript #css #jQuery

What is GEEK

Buddha Community

How to Create List Segmented Control with JavaScript and CSS
Sofiaml Boo

Sofiaml Boo

1581907485

How to Create List Segmented Control with JavaScript and CSS

First I have created the main div with an ID name container and placed a list inside it. Inside the list, I have placed 3 texts as list items and 2 divs for the active and slide effect. Also in the HTML file, I have linked other files like CSS, JavaScript, and jQuery CDN.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like width, height, position, etc to the elements. After that, I gave color values and the layout based on the grid. There I have used calc( ) command to calculated and pass exact values.

JavaScript handling the active and slide feature in this program. First JS fetched elements using document.querySelector command and stored in conts. There I have used JS if{} else{} statements and declared the conditions, and used let command for functioning. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Segmented Control Interaction | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
  <link rel="stylesheet" href="style.css">
 
</head>
<body>
<div id="container">
	<ul>
		<li>About</li>
		<li>Contact</li>
		<li>Pricing</li>
		<div class="focus first"></div>
		<div class="focus second"></div>
		
	</ul>
</div>
 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script>
  <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ff3636;
  overflow: hidden;
}
 
#container {
  width: 350px;
  height: 350px;
  display: grid;
  place-items: center;
}
#container ul {
  position: relative;
  width: 350px;
  height: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
#container ul li {
  list-style: none;
  display: grid;
  place-items: center;
  font-family: "montserrat";
  color: #ff3636;
  z-index: 10;
  cursor: pointer;
}
#container ul .focus {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / 3);
  height: 100%;
  border-radius: 35px;
  background: #fff;
  box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.015), 0 100px 80px rgba(0, 0, 0, 0.03);
}
#container ul .focus.second {
  left: calc(-100% / 3);
}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

console.clear();
 
const liContainer = document.querySelector("ul");
const liEls = [...document.querySelectorAll("ul li")];
const slideEl_1 = document.querySelector(".focus.first");
const slideEl_2 = document.querySelector(".focus.second");
 
gsap.defaults({
	ease: "ease.inOut",
});
let tl = gsap.timeline();
 
let liRect = liContainer.getBoundingClientRect();
let slideEl_1_DefaultWidth = slideEl_1.getBoundingClientRect().width;
let slideEl_1_DefaultLeft = slideEl_1.getBoundingClientRect().left;
let slideEl_2_DefaultLeft = slideEl_2.getBoundingClientRect().left;
 
let startPosIndex = 1;
let reachedEnd = false;
let activeIndex = startPosIndex;
 
let animationDuration = 0.2;
 
liEls.forEach((el, index) => {
	let elRect = el.getBoundingClientRect();
 
	el.addEventListener("mousedown", () => {
		if (reachedEnd && index + 1 == startPosIndex) {
		tl.to(slideEl_1, animationDuration, { left: `${liRect.width}px` });
		tl.to(
		slideEl_2,
		animationDuration,
		{ left: `${elRect.left - liRect.left}px` },
		`-=${animationDuration}`
		);
		tl.set(
		slideEl_1,
		{ left: `${slideEl_1_DefaultLeft - liRect.left}px` },
		`+=${animationDuration}`
		);
		tl.set(
		slideEl_2,
		{ left: `${slideEl_2_DefaultLeft - liRect.left}px` },
		`+=${animationDuration}`
		);
		}
 
		let timesWidth = index + 1 - activeIndex + 1 <= 0 ? 1 : index + 1 - activeIndex + 1;
		activeIndex = index + 1;
 
		tl.to(slideEl_1, animationDuration, { width: `${timesWidth * slideEl_1_DefaultWidth}px` });
		if (index + 1 != startPosIndex || reachedEnd == false) {
		tl.to(slideEl_1, animationDuration, {
		left: `${elRect.left - liRect.left}px`,
		width: `${slideEl_1_DefaultWidth}px`,
		});
		}
 
		if (index + 1 == liEls.length) {
		reachedEnd = true;
		} else {
		reachedEnd = false;
		}
	});
});

That’s It. Now you have successfully created Segmented Control With JavaScript and CSS, List Based Segmented Control. If you have any doubt or question then comment down below.

Thanks for Visiting, Keep Visiting.

#javascript #css #jQuery

Lyda White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

Anissa Beier

Anissa Beier

1626171645

Email Validation in Javascript | Create Email Validation with HMTL CSS & Javascript

#emailvalidationinjavascript

Email Validation in Javascript | Create Email Validation in Javascript | With Source Code

Source Code: https://codepen.io/codenameyesse/pen/GRmqwWz

#javascript #hmtl #css #javascript

Anissa Beier

Anissa Beier

1626233640

Javascript Projects | How to Create Search Bar with Autosuggest in HTML CSS and JavaScript

#searchbar #autosuggestsearchbar #javascript

Javascript Projects | How to Create Search-Bar with Autosuggest in HTML CSS and JavaScript.

Source Code: https://codepen.io/codenameyesse/pen/ZEeomwR
More Projects: https://youtube.com/playlist?list=PLzEPSUliNrtfjU2KUUtjK_b6WThe_K8vR

#javascript #css #javascript

hourly developer

hourly developer

1596530868

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css