Skip to content

Instantly share code, notes, and snippets.

@avermeulen

avermeulen/left.html

Created March 12, 2025 05:49
Show Gist options
  • Save avermeulen/e2434b13d428265c887931cb9dfeb2db to your computer and use it in GitHub Desktop.
Save avermeulen/e2434b13d428265c887931cb9dfeb2db to your computer and use it in GitHub Desktop.
Download ZIP
Raw
left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 100%;
/* height: 100vh; */
display: flex;
justify-content: flex-end;
/* align-items: center; */
}
.text {
color: #090909;
padding: 5px;
/* border: 1px solid #ccc; */
margin: 1px;
/* flex: 1; */
}
.text:hover {
background-color: #ccc;
/* # show cursor as pointer */
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<p class="text">Right-aligned text 1</p>
<p class="text">Right-aligned text 2</p>
<p class="text">Right-aligned text 3</p>
</div>
<div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, voluptates modi. Eaque at, sed suscipit, sunt excepturi dolorem, dolor rerum fuga id reiciendis eius adipisci accusantium est eveniet voluptatem neque?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia recusandae iusto voluptatem aperiam suscipit? Labore ipsum quam saepe illum nam sed consequatur, et ex culpa unde, enim temporibus. Inventore, voluptates!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, voluptates porro numquam, animi ullam molestiae at natus vero, explicabo id quae veritatis repellendus voluptatibus laudantium doloribus totam recusandae aut temporibus!
</div>
</body>
</html>
Raw
scroll.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container-wrapper {
position: relative;
width: 100vw;
overflow: hidden;
/* Hide default scrollbar */
}
.container {
/* display: flex; */
overflow-x: auto;
/* Enables horizontal scrolling */
/* white-space: nowrap; */
/* Prevents wrapping */
width: 100vw;
/* Takes full width of the viewport */
padding-bottom: 20px;
}
.inner-container {
display: flex;
/* min-width: 16 * 150px; */
/* Ensures enough width for 16 blocks */
}
.block {
width: 150px;
height: 150px;
background-color: lightblue;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
/* border: 1px solid #000; */
flex-shrink: 0;
font-size: 24px;
border-radius: 5px;
/* add a shadow */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
/* Prevents shrinking */
}
.block:nth-child(odd) {
/* background-color: lightcoral; */
}
.block:hover {
background-color: lightgreen;
cursor: pointer;
}
.scroll-btn {
position: absolute;
top: 40%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.25);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 20px;
border-radius: 50%;
z-index: 10;
}
.scroll-btn.left {
left: 10px;
display: none;
/* Initially hidden */
}
.scroll-btn.right {
right: 10px;
}
select {
appearance: none;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="blue" d="M0 0l5 6 5-6z"/></svg>') no-repeat right 10px center;
background-size: 12px;
padding: 10px;
padding-right: 30px;
/* Add space after the arrow */
color: dodgerblue;
font-size: 16px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class="container-wrapper">
<div class="container" id="scrollable-container">
<button class="scroll-btn left" onclick="scrollContainer(-200)">&#10094;</button>
<div class="inner-container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
<div class="block">16</div>
</div>
<button class="scroll-btn right" onclick="scrollContainer(200)">&#10095;</button>
</div>
</div>
<script>
const container = document.getElementById("scrollable-container");
const leftBtn = document.querySelector(".scroll-btn.left");
const rightBtn = document.querySelector(".scroll-btn.right");
function scrollContainer(amount) {
container.scrollBy({ left: amount, behavior: "smooth" });
}
// Show or hide arrows based on scroll position
function updateArrows() {
leftBtn.style.display = container.scrollLeft > 0 ? "block" : "none";
rightBtn.style.display =
container.scrollLeft + container.clientWidth < container.scrollWidth
? "block"
: "none";
}
// Update arrows on scroll
container.addEventListener("scroll", updateArrows);
// Initial check to hide the left arrow
updateArrows();
</script>
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
</body>
</html>
Raw
select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
select {
appearance: none;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="blue" d="M0 0l5 6 5-6z"/></svg>') no-repeat right 10px center;
background-size: 12px;
padding: 10px;
padding-right: 30px;
/* Add space after the arrow */
color: dodgerblue;
font-size: 16px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment