i want to position items dynamically using javascript but i really don't know how to do this i am still learning javascript , i want to add for example 4 icons 1 in the top and 1 in the bottom and 1 in the left and right but using css when you need to add more items you have to add more css code and position statically , here is the code :
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: white;
}
.container-circle {
text-align: center;
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
transition: all 1s ease;
}
.container-circle .container-circle-img {
height: 250px;
width: 250px;
border-radius: 50%;
object-fit: cover;
}
.container-circle::before {
content: '';
position: absolute;
top: -3;
left: -3;
right: -3;
bottom: -3;
border-radius: 50%;
z-index: -1;
background-image: linear-gradient(180deg, red, blue, yellow, green);
animation: rotate 3s linear infinite;
}
.container-circle-icons {
text-align: center;
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border-radius: 60%;
animation: rotate 10s linear infinite;
padding: 0;
margin: 0;
}
.container-circle-icons .ico {
width: 50px;
height: 50px;
}
.container-circle-icons .ico1 {
content: '';
position: absolute;
top: -20%;
left: 35%;
}
.container-circle-icons .ico2 {
content: '';
position: absolute;
top: 50%;
right: -30%;
}
.container-circle-icons .ico3 {
content: '';
position: absolute;
left: 35%;
bottom: -30%;
}
.container-circle-icons .ico4 {
content: '';
position: absolute;
top: 50%;
left: -60%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="container-circle">
<img class="container-circle-img" src="picture.jpg" alt="pic1">
<div class="container-circle-icons">
<img src="icon1.png" class="ico ico1" alt="">
<img src="icon2.png" class="ico ico2" alt="">
<img src="icon3.png" class="ico ico3" alt="">
<img src="icon4.png" class="ico ico4" alt="">
</div>
</div>
The position of the elements will end up being dictated by the CSS, but if you want to add the elements dynamically and move them around, you can set that CSS using javascript.
Lets say you insert a new element with id='test'
You can dynamically change its position by doing this:
const newElement = document.getElementById('test');
element.style.left = '150%' // whatever value you want
element.style.top= '75px' // make sure you include units
Related
I am trying to create a linear animation with pipes just like the flappy bird game. When I have one single pipe, I see a random gap and it works well, but when I clone all the pipes, there is no longer a gap at a random position.
How can I give the gaps in the pipe a random position when I have multiple pipes, and why is it not working as expected?
var block = document.getElementById("block");
//clone the pipe multiples times
var blockClone;
for (var i = 0; i < 4; i++) {
blockClone = block.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
block.appendChild(blockClone);
//remove animtion from clones
blockClone.style.animationName = "none";
}
//gap inbetween each pipe
var hole = document.getElementById("hole");
var holeClone;
for (var i = 0; i < 4; i++) {
holeClone = hole.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
blockClone.appendChild(hole);
block.appendChild(hole);
//remove animtion from clones
holeClone.style.animationName = "none";
hole.addEventListener('animationiteration', () => {
var random = -((Math.random() * 300) + 150);
hole.style.top = random + "px";
});
}
body {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
}
* {
padding: 0;
margin: 0;
}
#game {
width: 100%;
height: 500px;
border: 1px solid red;
margin: auto;
overflow: hidden;
}
/* pipe version 1 */
#block {
width: 60px;
height: 500px;
background-color: green;
background-image: url("https://l.dropbox.com/s/4jz7uq4e25o8su5/sketch-1664244879.png?dl=0");
background-size: cover;
position: absolute;
left: 100px;
animation: block 5s infinite linear;
}
#hole {
width: 60px;
height: 210px;
background-color: red;
position: absolute;
left: 0px;
top: -10px;
/* animation: block 5s infinite
linear;*/
background-image: url("https://dldropbox.com/s/j7enawgtuepj7au/sketch-166428805830.png?dl=0");
background-size: cover;
}
#character {
width: 40px;
height: 40px;
background-color: none;
position: absolute;
top: 100px;
left: 40px;
border-radius: ;
z-index: 1;
background-color: red;
}
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
cursor: none;
opacity: 0.3;
text-align: center;
}
/* used to prevent user from tapping even after the game has ended*/
.mainoverlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: none;
opacity: 0;
}
#blokhold {
animation: block 5s infinite linear;
}
#keyframes block {
0% {
left: 350px
}
100% {
left: -890px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game">
<div id="blokhold">
<div id="block">
<div id="hole"></div>
</div>
</div>
<div id="character"></div>
</div>
I am setting up a custom scrollbar that works across browsers, but my problem is that it is only being applied to the body (which is static), instead of the div scroll area, listed as 'content'. I believe the problem is in the javascript that lies at the end of the HTML, but I cannot unravel it.
The HTML is as follows:
<body>
<div class="banner">
<video autoplay="" muted="false" loop="">
<source src="Media/BackgroundClip.mp4" type="video/mp4">
</video>
<div class="content">
<header> <img src="Media/DOE_TMP.gif"> </header>
<div class="content-wrapper">
<div id="progressbar"></div>
<div id="scrollPath"></div>
<img src="Media/Dialogue4.png">
<div class="text-wrapper">
>>>CONTENT
</div>
</div>
</div>
<script type="text/javascript">
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
let progressHeight = (window.pageYOffset / totalHeight) * 100;
progress.style.height = progressHeight + "%";
}
</script>
</body>
And the CSS used looks like:
::-webkit-scrollbar{
width: 0;
}
#scrollpath {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
#progressbar {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
animation: animate 5s linear infinite;
}
#keyframes animate {
0%,100%
{
filter: hue-rotate(0deg);
}
50%
{
filter: hue-rotate(360deg);
}
}
#progressbar:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(10px);
}
#progressbar:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(30px);
}
Thanking you in advance,
Betty.
you are using the position : 'fixed' for the progressbar. It should be absolute and the parent (.content) must be none static element (ex: relative). You can check it here: custom scrollbar
::-webkit-scrollbar{
width: 0;
}
#scrollpath {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
#progressbar {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
animation: animate 5s linear infinite;
}
#keyframes animate {
0%,100%
{
filter: hue-rotate(0deg);
}
50%
{
filter: hue-rotate(360deg);
}
}
#progressbar:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(10px);
}
#progressbar:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(30px);
}
.content {
position: relative
}
I have a pop-up div that is able to stream video or show a document/image depending on the file attachment.
The issue I'm having is ensuring that it is centered vertically and horizontally, both for Desktop and mobile browsers/app.
I've been trying different attributes, but it's like I change from what I already have and suddenly it's just off the page.
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><img id="VideoLauncher" width="600" src="'+file+'" onclick="lightbox_close()"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "pdf" || extension === "doc" || extension === "docx"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><iframe src="https://docs.google.com/gview?url='+file+'&embedded=true" style="height:800px; width:600px;" frameborder="0"></iframe></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
var BoxCloseEle = document.querySelector("#boxclose");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -200px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';
Ideally, what I'm looking for is the styling that will dynamically center the light element, horizontally and vertically, though the light element will be a different size depending on the file it is to show. Because of this I can't simply hard code the height and width.
There are two ways to doing this:
.lightbox {
margin: 0 auto;
}
This only centers horizontally within the parent component. It is a very simple way if that's what you want to do.
If not, try this:
.lightbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
A popular approach to vertically and horizontally center elements is to use:
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
You can use this with absolute or fixed positioning . top and left moves the top left corner to the center of the screen while translate( -50%, -50% ) moves the element back to the left and top 50% of the elements width/height, placing the center of the element at the center of the page.
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
/* For Demo */
width: 75vw;
height: 75vh;
background-color: #ccc;
}
<div class="box"></div>
Use Flexbox:
main {
background-color: teal;
}
.modal-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
}
.modal {
display: block;
max-width: 300px;
width: 90%;
max-height: 300px;
height: 90%;
background-color: white;
}
<main>
<div class="modal-container">
<div class="modal">
<h2>yes</h2>
</div>
</div>
</main>
i am trying to create a web presentation and wanted to a add a little Animation of 2 Halfes which moves up and down on a Click (which works so far) but i also want them to stay there after the click.
standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg
0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg
after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg
This is my Code for that: HTML
<body>
<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>
</div></a>
and then made the animation with:
#btn_logo:active #up
and
#btn_logo:active #down
How could i make the animation toggled after it ended?
What you should do is have it animate on a CSS class, and then simply add or remove a CSS class on click.
Like so: https://jsfiddle.net/8troo8bw/1/
(or so with your exact html): https://jsfiddle.net/8troo8bw/2/
The key here being the animation:
#up, #down {
background: #000;
position:absolute;
right:0;
left:0;
width:100%;
height:25px;
transition: top 0.25s;
}
#up.moveUp {
top: 25px;
}
#down.moveDown {
top: 100px;
}
And the relevent JS to add the class:
$('#click').on('click', function(){
$('#up').addClass('moveUp');
$('#down').addClass('moveDown');
});
Do something like this:
$(document).ready(function(){
$('#animation').on('click', function() {
$('.up,.down').addClass('animated');
});
});
#animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: yellow;
}
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
margin: 0 auto;
}
.up {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
background: green;
}
.down {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.up.animated {
bottom: 100%;
top: -50%;
transition: all 1s linear;
}
.down.animated {
top: 100%;
bottom: -50%;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animation">
<div class="up"> </div>
<div class="down"> </div>
<div class="logo"> </div>
</div>
When i hover once, transition is proper, but on second time, transition becomes wierd, as if the perspective: 800px starts working after transition has taken place.
Please also tell how can i set rotation about an edge except center.
I know about transform-origin but nothing such as transform-axis.
I want that when i hover over the , these images should open like a window.
var left=document.getElementById("left");
var right=document.getElementById("right");
function curtain() {
left.style.transform="rotateY(70deg)";
right.style.transform="rotateY(-70deg)";
}
function back() {
left.style.transform="rotateY(0deg)";
right.style.transform="rotateY(0deg)";
}
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
<html>
<head>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
<script src="script/script.js"></script>
</body>
</html>
There seems to be an issue with perspective and the onmouseout. back() (in onmouseout) and curtain() (in onmouseover) are called quite inconsistently. onmouseout is called whenever the mouse moves outside the element (#animate in this case) or its children (the images). The children are animated - they move - and the onmouseout is thereby called multiple times.
I wouldn't recommend onmouseover / onmouseout for this - instead I would use CSS :hover.
That aside, transform-origin defines the center of rotation.
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
#animate {
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position: absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: left;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: right;
}
<div id = 'animate'>
<div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div>
<div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div>
</div>
I don't know the origin of the problem, but it works ok if you are using CSS hover instead of JS hover.
And the transform origin is the way to go, it does what your wanted transform-axis would do.
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: left center;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: right center;
}
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>