I am trying to have a video play before the site loads. After a few successful reloads, the video stopped playing and I cannot get it to work again. I am not sure why this is happening as it did work a couple times initially! I followed the instructions in this video but am not getting the same results (yes, my loader content is different than theirs). Please help! Thanks!
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>My Website</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="loaderWrap">
<span class="loader">
<span class="loader-inner">
<div class="content">
<video autoplay>
<source src="video_source.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</span>
</span>
</div>
<h1>HELLO WORLD</h1>
<script>
window.addEventListener("load",function () {
const loader = document.querySelector(".loader");
loader.loaderWrap += " hidden"; // class hidden loader
});
</script>
</body>
</html>
CSS:
h1 {
color: black;
font-family: sans-serif;
}
body {
background-color: black;
}
.content{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.loaderWrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.loader{
display: inline-block;
width: 100%;
height: 100%;
position: relative;
background-color: black;
animation: loader-inner 2s infinite ease-in;
}
.loader-inner{
vertical-align: top;
display: inline-block;
width: 100%;
background-color: black;
animation: loader-inner 2s infinite ease-in;
}
Related
I have been trying to fit an image inside of the text input to the left, i have tried using float, i have tried making it a div and wrapping it, i have tried making the background image to the image, and it either breaks it or doesn't make an difference. Not sure what to do.
body {
background-color: #141c2f;
}
.search {
background-color: #1d2c4c;
border: none;
border-radius: 10px;
text-align: center;
width: 500px;
height: 50px;
text-decoration: none;
}
.infoBox {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<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="./static/css/app.css">
<title>Github User Search App</title>
</head>
<body>
<div class="infoBox">
<input class="search" type="text" placeholder="Search..">
</div>
</body>
</html>
Assuming you want to put the image above input to the left (if you just want them side by side, use display: flex in class .infoBox). So You can use :before to get that, add this code to your:
.infoBox {
position: relative;
}
.infoBox:before {
content: '';
background: url('your image url') center center no-repeat;
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 10px 0 0 10px;
}
.search {
padding-left: 65px;
}
All attributes can be modify to your liking.
I am trying to build a card which when it is not hovered, you can see only the image.
When the image is hovered, it should grow up and a div pops to the right of the image presenting some information.
For some reason, when I hover the image, everything works fine. But when my mouse hovers to the div besides it, everything starts to shake as if the hover is not working well.
I've tried to change the hover effect both to the image and the parent div which contains both divs but nothing fixed it.
What should I do?
$(document).ready(function(){
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards{
display: flex;
}
.personCard{
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active{
transform: scale(1.5);
}
.imgCard{
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img{
height: 200px;
width: 130px;
}
.personalInfoCard{
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active{
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!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>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard" >
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
Change your target to be the card container so that when it grows, you'll still be hovering over it. As it is now, your target is the image - which when it animates left triggers the mouseout
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
}
.personCard {
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active {
transform: scale(1.5);
}
.imgCard {
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img {
height: 200px;
width: 130px;
}
.personalInfoCard {
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active {
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!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>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard">
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
I have the problem, that I want to create a page and there is one image over another and I want to make it go to different places on the second, larger image while you are scrolling.
So if you scroll down, the website should not go down, but on the second picture ( id="maps"
the first picture id="train" should move.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src = "images/maps.png" alt = "Maps" id="maps">
<img src="images/zug.png" alt= "Zug" id="train">
<h1>Meine Herausforderung</h1>
</body>
</html>
And the css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#maps {
width: 100%;
position: absolute;
}
#train {
position: absolute;
margin-left: 55%;
margin-top: 10%;
width: 3%;
}
Thanks for any help and sorry for my english.
Would be very happy to help you, if you provide more insight about the problem.
From the Problem statement I assume, you want to move a small image which is on top of a large image when you mouseover on it, without scrolling the body/window viewport.
Please check this helps you
const $train = $('#train')
document.addEventListener('scroll', function (event) {
$train.css({left: window.pageYOffset*10});
}, true /*Capture event*/);
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2
overscroll: scroll;
}
h1 {
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
#map-container {
width: 100%;
height: 100vh;
position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/9/95/World_map_green.png);
background-attachment: fixed;
background-size: cover;
}
#map, .inner-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow:scroll;
}
.inner-container {
background: transparent;
z-index: 2;
}
#train {
width:50px;
height:50px;
top: 20%;
position: absolute;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorstellung meiner Herausforderung</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map-container">
<!-- <img src = "" id="maps"> -->
<div class="inner-container">
<img src="https://png2.cleanpng.com/sh/0f45ce863aeba0805894dc22bf651040/L0KzQYm3UsAzN5Dqj5H0aYP2gLBuTgRzaZpzRdVqcoTyf7A0kvFqdF55itN3c4DygsW0kvVlNaV3edt3LUXkR4WCWcdiQGpmfNcBLkC3RIq6UMg3OWY2T6cEMEmzRoa9U8kveJ9s/kisspng-train-cartoon-rail-transport-red-train-5a74997a89ade6.0449308615175909065639.png" alt= "Zug" id="train">
</div>
</div>
<h1>Meine Herausforderung</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
It has been two days im trying to solve this and i cant.
I made a customized div that displays images in a kind of a bar that auto-adjusts itself and stays centered.
And i made it work here:
https://codepen.io/SCalmStorm/pen/povwaed
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div id="containerItem">
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>
And that is great. But as i worked on my other script i needed it inserted in another div with the class StandardSlide. But it completely breaks apart :(. And the only thing i understand is that it conflicts with the position:fixed. But when i turn it off, or change it to others it messes up my container. How can i solve this without messing it up? Or without changing the fixed? Why is the fix from this new container affecting the other divs :(, i know it has to do with the relative that inherits the parent style :(:
This one, it no longer adjusts the green bar to the images.
https://codepen.io/SCalmStorm/pen/xxbPqVw
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
.StandardSlide{
Position: fixed;
top: 10%;
background: rgba(75, 39, 73, 0.7);
left: 15%;
right: 15%;
/*width: 80%;*/
bottom: 5%;
/*background-color: white;*/
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 20;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div class="StandardSlide">
<div id="containerItem">
</div>
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
//alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>
clock face
I'm trying to make an analog clock using js/css/html .
The thing is that the clock's hand isn't working.
Rotating it from inside the js function dosn't seem to work. I tried changing the rotation degree manually from css, it worked.
The function is working I tried console-login the value of the seconds, it worked.
function ticktock() {
var time = new Date();
var second = time.getSeconds();
document.getElementsByClassName("clock-hand")[0].style.tranform = 'rotate(54deg)';
console.log(second);
setTimeout(ticktock, 1000);
}
ticktock();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid green;
position: relative;
}
.clock {
background-image: url(https://i.stack.imgur.com/t1y7j.jpg);
width: 300px;
height: 300px;
background-size: cover;
border: 2px solid orange;
position: relative;
}
.clock-hand {
position: absolute;
top: 49px;
left: 51px;
border: 2px solid violet;
height: 200px;
width: 200px;
}
<!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">
<link rel="stylesheet" href="clock-style.css">
<title>Document</title>
</head>
<body>
<h1>time teller</h1>
<div class="container">
<div class="clock">
<img src="https://i.stack.imgur.com/H0zgO.png" alt="clock-hand" class="clock-hand">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
</script>
<script src="clock-logic.js"></script>
</body>
</html>
clock hand
I voted to close the question because the issue is only a typo, but I still wanted to post this snippet with a working seconds hand as I had done it anyway...
function ticktock() {
var time = new Date();
var second = time.getSeconds();
document.getElementsByClassName("clock-hand")[0].style.transform = 'rotate(' + (second/60*360) + 'deg)';
console.log(second);
setTimeout(ticktock, 1000);
}
ticktock();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid green;
position: relative;
}
.clock {
background-image: url(https://i.stack.imgur.com/t1y7j.jpg);
width: 300px;
height: 300px;
background-size: cover;
border: 2px solid orange;
position: relative;
}
.clock-hand {
position: absolute;
top: 49px;
left: 51px;
border: 2px solid violet;
height: 200px;
width: 200px;
}
<!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">
<link rel="stylesheet" href="clock-style.css">
<title>Document</title>
</head>
<body>
<h1>time teller</h1>
<div class="container">
<div class="clock">
<img src="https://i.stack.imgur.com/H0zgO.png" alt="clock-hand" class="clock-hand">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
</script>
<script src="clock-logic.js"></script>
</body>
</html>