I'm trying to make an infinite image slider with limited items. The logic is that - after scrolling when one item has been scrolled past through and is no longer visible on screen, it will be added at the end of list. This way the nodelist will never end. However this only works for first element and instead of remaining in it's place and having a copy at end (making a total of (6+1) items, the first item is removed and placed at the end. Also if you know a better way to do this, please let me know. Application
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>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="project-container">
<div class="project">1</div>
<div class="project">2</div>
<div class="project">3</div>
<div class="project">4</div>
<div class="project">5</div>
<div class="project">6</div>
</div>
</body>
</html>
JavaScript:
var container = document.querySelector(".project-container")
console.log(container.childNodes[0])
var scrolled = 0;
container.addEventListener("scroll", e => {
console.log(scrolled)
if (container.scrollLeft - scrolled >= 395) {
scrolled += 395;
nodeItem = container.childNodes[0];
container.appendChild(nodeItem);
}
})
CSS:
*, *::before, *::after{
margin:0px;
padding:0px;
box-sizing: border-box;
font-size:100px;
}
.project-container{
/* display: flex; */
width:1500px;
height:400px;
background-color: rgb(15, 207, 224);
margin:auto;
margin-top:60px;
white-space: nowrap;
overflow: auto;
}
.project{
margin:40px;
display: inline-block;
height:300px;
width:350px;
background-color:white;
}
Related
I am trying to make a search bar type of thing , by seeing youtube video : https://youtu.be/TlP5WIxVirU?t=471
but got stuck don't know why
the stack overflow is executing and getting the desired output but my pc doesnot
what could be the reason ??
I want to get the output as : Output
but while I execute this code, I'm getting the error as :
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content')
at script.js:7:39
please help me
const userCardTemplate = document.querySelector("[data-user-template]")
fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json()).then(data => {
const card = userCardTemplate.content.cloneNode(true).children[0]
console.log(card)
})
.search-wrapper{
display: flex;
flex-direction: column;
}
input {
font-size: 1rem;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
gap: .25 re,;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5 rem;
}
.card .header{
margin-bottom: .25 rem;
}
.card .body {
font-size: .8rem;
}
.hide{
display: none;
}
<!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">
<title>Search Engine</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="search-wrapper">
<label for="search">Search Users</label>
<input type="search" id ="search">
</div>
<div class="user-cards" >
</div>
<template data-user-template>
<div class="card">
<div class="header">
</div>
<div class="body">
</div>
</div>
</template>
</body>
</html>
The error says exactly what you needed to read. userCardTemplate was not found in the DOM. The reason being the moment in which you trigger the <script> execution. And that's in head. At the moment the parser stopped to read the current DOM there was no such element.
Instead you have two solutions:
Use the defer attribute:
<script src="script.js" defer></script>
in order to defer your script execution, or
place the SCRIPT right before the closing BODY tag:
<script src="script.js"></script>
</body>
I am working on building a basic to-do list.
I have a list of elements with delete option for each element next to it.
I am facing issues with having proper spacing between the list elements namely "to-do text" and "Delete" icon.
Note: I'm new to Web programming.
You could set a fixed width on the container element and then use flex box:
<!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" />
<title>Document</title>
<style>
.container {
display: flex;
background-color: grey;
border: 1px solid darkGrey;
width: 300px;
padding: 10px 15px;
}
.title {
flex: 1;
padding-right: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">sample text</div>
<div>delete icon</div>
</div>
<div class="container">
<div class="title">long sample text for illustration purposes.</div>
<div>delete icon</div>
</div>
</body>
</html>
I am new at web development and facing some problem in creating a web page. Actually, I was creating a loading bar animation at the top of the window and set its width to 100vw but it is taking more space than it should take. Here's a picture to demonstrate:
As you can see in the top-right corner it is overflowing the window. Why is that so?
Here's my code:
<!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">
<title>Loading Bar</title>
<style>
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
Thanks in advance!!
Try adding max-width: 100% to your progress bar css, according to https://caniuse.com/viewport-units
there is a known issue on firefox in which the 100vw considers the entire length of the page including the vertical scrollbar as its width. This vertical scrolls is what making your webpage have an horizontal overflow.
<!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">
<title>Loading Bar</title>
<style>
body{ overflow-x: hidden; }
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
I have this CSS project I am working on and now I am in the phase where I will start to embelish it with some effects and nice colors. However I just realized that there is a small issue with it: the beige container won't adjust its height as the blue cells move around. Could anyone help please? Here it is my code:
HTML
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer">
<div id="oepanel" class="OEItems">
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell"></div>
<div id="oecell4" class="OECell"></div>
</div>
</body>
</html>
CSS
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width:250px;
text-align:center;
float: left;
margin: 5px;
}
#media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
}
JS
// config
var __OECELLS = 4; // the total of oecells in HTML (oecell1, oecell2...)
var __CELLWIDTH = 250; // the width of cells in pixels
var __MAXSCREENWIDTH = 1130; // the maximum width of screen in pixels
var __MAXCELLS = parseInt(__MAXSCREENWIDTH/__CELLWIDTH);
var __ADJUSTMENT = (__CELLWIDTH-30)/2;
var __CELLSPERROW;
$(function() {
RedefinePanel();
});
$(window).resize(function() {
RedefinePanel();
});
function RedefinePanel() {
var viewportWidth = $(window).width();
let __CELLSPERROW = parseInt((viewportWidth-__ADJUSTMENT)/__CELLWIDTH);
document.getElementById("oepanel").style.width = ((__CELLSPERROW)*__CELLWIDTH+(__CELLSPERROW*17)) + "px";
Thanks!
You need a clearfix for the container of your floated items.
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.clearfix::after { /* clearfix class to expand the element back to its normal height */
content: '';
display: block;
clear: both;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width:250px;
text-align:center;
float: left;
margin: 5px;
}
#media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
}
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer">
<div id="oepanel" class="OEItems clearfix"> <!-- clearfix class added here -->
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell"></div>
<div id="oecell4" class="OECell"></div>
</div>
</body>
</html>
When you use floats for all of the children of an element - it will collapse 0 height ( minus padding and margins etc ) unless you force it to expand to the size of it's children with a clearfix. Essentially it's a bug/quirk in browsers that's been persistent for a while.
Although this answers your questions I would advise against using floats wherever possible and use flexbox instead. Overall a lot less messy than floats in my opinion.
Well, I have this box container class which is a CSS Grid container. As you can see, it's dynamic because of using repeat(auto-fit, minmax(340px, 1fr))
.box-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 100px;
}
.box:nth-child(odd) {
background-color: lightblue;
border: 1px solid #000;
}
.box:nth-child(even) {
background-color: aquamarine;
border: 1px solid #000;
}
<!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>Document</title>
</head>
<body>
<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Resizing the viewport's width, we can get to this situation:
I want that last element to occupy two columns instead of just one, but I can't manage to set that dynamically.
So this is what I expect once I get to that point resizing the viewport's width:
But I only know how to do that statically, spanning that last child. And it's not what I want because I only want it to span the two columns in that point of the viewport's width, and setting it up not dynamically would make it to span ALWAYS the two columns.
You get the required behaviour easily by using flex. The flex-wrap propery will take care of adjusting the items inside the container.
So, when you have small screen device, flex-wrap will move the items those overflows to a new row. Hence, we use flex-grow to tell the items to grow based on the space available.
And the flex-basis will tell the items to limit the minimun width it can shrink.
Here is the working example.
.box-container {
height: 150px;
display: flex;
flex-wrap: wrap;
}
.box{
display: flex;
flex-grow: 1;
flex-basis: 150px;
}
.box:nth-child(odd) {
background-color: lightblue;
border: 1px solid #000;
}
.box:nth-child(even) {
background-color: aquamarine;
border: 1px solid #000;
}
<!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>Document</title>
</head>
<body>
<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Codepen which demostrated above example.