CSS transition within JavaScript not working

CSS transition within JavaScript not working - javascript

Here is my HTML, CSS, JS
const Col = document.querySelectorAll('.col')
function onCol() {
Col.forEach(function(el, idx) {
el.style.transition = '0s';
el.style.height = '0%';
el.style.transition = '0.9s';
el.style.height = '100%';
});
}
onCol()
.work {
display: flex;
height: 140px
}
.col {
background: red;
width: 20px;
height: 100%;
margin-left: 5px;
max-height: 0
}
<div class="work">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
I think that columns should become bigger SMOOTHLY WITH TRANSITION 0.9 !!!
but they do not.
If I type the word with el.style.height = '100%'; into setTimeOut, it will work.
but I don't want to make this in callback queue.
I just want to solve this in the call stack.
and I want to know why doesn't this work now.
i changed this with for loop. but not works

Gloomy Young
set the intial height to 0, run function only after body is loaded and set desired transition duration and target height in func,
css
.work {display: flex; height: 140px}
.col {
background: red;
width: 20px;
margin-left: 5px;
height: 0;
}
javascript
window.onload = () => {
document.querySelectorAll('.col').forEach(i => {
i.style.transition = '1s';
i.style.height = '100%';
});
}
If you want not to use javascript. You can achieve this only using css animations.

I would modify your code to do this mostly in CSS, using classes on the parent element to toggle the effect. Here I've used setInterval just to give an idea of what's happening.
Below that is a way of making it so that each bar animates in its own time.
const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 1500);
.work {
display: flex;
height: 140px;
}
.col {
background: red;
width: 20px;
height: 100%;
margin-left: 5px;
transition: height 0.9s;
}
.work.hide .col {
height: 0;
}
<div class="work">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 5000);
.work {
display: flex;
height: 140px;
}
.col {
background: red;
width: 20px;
height: 140px;
margin-left: 5px;
}
.col:nth-child(1) {
transition: height 0.9s 0s;
}
.col:nth-child(2) {
transition: height 0.9s 1s;
}
.col:nth-child(3) {
transition: height 0.9s 2s;
}
.col:nth-child(4) {
transition: height 0.9s 3s;
}
.col:nth-child(5) {
transition: height 0.9s 4s;
}
.work.hide .col {
height: 0;
}
<div class="work hide">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Related

Animated Sidebar

I am trying to create an animated sidebar. Initially i have a top navbar, a sidebar and a content div. Sidebar and content divs are inside a container div which has display flex row property. I am confused about transition. I want the sidebar show and hide when nav home is clicked which has a sliding effect. Right now I have a sliding sidebar but the content div is not getting full width of its parent when sidebar hides. How can I do this? Should I apply transition on flex or on transform? Any help is appreciated.
<body>
<nav>
<ul>
<li><button id="home">Home</button></li>
<li><button>Services</button></li>
<li><button>Operations</button></li>
<li><button>About</button></li>
<li><button>Contact</button></li>
</ul>
</nav>
<div class="container">
<div id="sidebar" class="sidebar visible">
<ul>
<li><button>Inventories</button></li>
<li><button>Employees</button></li>
<li><button>Feedback</button></li>
<li><button>Projects</button></li>
</ul>
</div>
<div class="content" id="content">
LOrem issum dolor sit amet
</div>
</div>
</body>
nav{
width: 100%;
display: flex;
justify-content : center;
}
.container{
display: flex;
flex-direction: row;
}
.sidebar{
flex:1;
background-color: rgb(40,100,250);
height: 100vh;
transition: transform 0.5s linear;
transform: translatex(-100%);
}
.visible{
transform: translatex(0);
flex: 1;
}
.content{
background-color: rgb(33,31,31);
flex: 5;
text-align: center;
color: #fff;
transition: flex 0.5s ease-in-out;
}
.afterContent{
flex: 10;
}
const homeButton = document.getElementById("home");
const sidebarDiv = document.getElementById("sidebar");
const content = document.getElementById("content");
homeButton.addEventListener("click", () => {
if (sidebarDiv.classList.contains("visible")) {
sidebarDiv.classList.remove("visible");
if(!content.classList.contains("afterContent")){
content.classList.add("afterContent");
}
} else {
sidebarDiv.classList.add("visible");
if(content.classList.contains("afterContent")){
content.classList.remove("afterContent");
}
}
});

Problem is that you just transform element, transforming will not change layout structure, it only affects element that you apply transform to and all its children.
Usually to achieve the result you want padding and position: absolute.
You have your sidebar element, that is position: absolute; top: 0; bottom: 0; left: 0;. To hide it you just transform it to the left. And then you have your content element that offsets menu with padding-left.
Here is a simple demo:
<html>
<head>
<style>
html, body {margin: 0; padding: 0}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.body {
position: relative;
}
.sidebar {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
width: 300px;
transition: transform 0.2s;
}
.content {
padding-left: 300px;
min-height: 500px;
background-color: teal;
transition: padding-left 0.2s;
}
.menu-closed > .sidebar {
transform: translateX(-300px);
}
.menu-closed > .content {
padding-left: 0px;
}
</style>
</head>
<body>
<div class="header">header menu</div>
<div id="body" class="body">
<nav class="sidebar">sidebar menu</nav>
<div class="content"><button onclick="menu()">nav</button> content</div>
<div>
<script>
const body = document.getElementById("body");
let menuClosed = false;
function menu() {
menuClosed ? body.classList.remove("menu-closed") : body.classList.add("menu-closed");
menuClosed = !menuClosed;
}
</script>
</body>
</html>

Animate a div to full screen from its position

I want to expand a div to full screen on clicking on it. Just like
this Fiddle js link here
I want to animate the same from its position. if I click the box it feels like expanding from its position please help me to achieve that
$('.myDiv').click(function(e){
$(this).toggleClass('fullscreen');
});
.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}
.myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
my div
<button>Full Screen</button>
</div>
<div class="myDiv">
my div 2
<button>Full Screen</button>
</div>

Fullscreen animation
Now making a element fullscreen is pretty simple. It could be done with css alone.
.content {
display: inline-grid;
width: 150px;
height: 100px;
background-color: cornflowerblue;
border-radius: 3px;
transition: width 2s, height 2s;
margin: 10px;
}
.content button {
display: inline-block;
justify-self: center;
align-self: center;
height: 2em;
}
.content:hover {
width: 100vw;
height: 1200vh;
}
<div class="container">
<div class="content">
<button>Fullscreen</button>
</div>
</div>
<div class="content"></div>
Just adding a transition will make the element brake the layout.
To not break a layout you need:
Replace the element. (Below the Visibility : hidden element).
Give it an Absolute position.
Then set its width to fullscreen and animate its position so it can cover it.
Added an animation, transition
//Function is run on page load
$(function() {
var full = $(".fullscreen");
//Loops over all elements that have the class fullscreen
full.each(function(index, elem) {
$(elem).click(fullscreenClick);
});
function fullscreenClick() {
//The button is this
//We want to clone the parent
var box = $(this).parent();
//create a holder box so the layout stays the same
var holder = $(box).clone(false, true);
//and make it not visible
$(holder).css({
"visibility": "hidden"
});
//Get its position
var pos = $(box).position();
//Substitute our box with our holder
$(box).before($(holder));
//Set the position of our box (not holder)
//Give it absolute position (eg. outside our set structure)
$(box).css({
"position": "absolute",
"left": pos.left + "px",
"top": pos.top + "px",
});
//Set class so it can be animated
$(box).addClass("fullscreen");
//Animate the position
$(box).animate({
"top": 0,
"left": 0,
}, 3000);
}
});
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
.container .element {
display: inline-block;
background-color: cornflowerblue;
margin: 5px;
padding: 10px;
width: 70px;
height: 30px;
transition: width 3s, height 3s;
;
}
.container .element.fullscreen {
width: calc(100vw - 30px);
height: calc(100vh - 30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
</div>

You can add animation on all styles changes adding next properties to myDiv class:
/* Animate all changes */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
I will show the changes on your example:
$('.myDiv').click(function(e)
{
$(this).toggleClass('fullscreen');
});
.myDiv{
background:#cc0000;
width:100px;
height:100px;
float:left:
margin:15px;
/*Animations*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
my div 1
<button>Full Screen</button>
</div>
<div class="myDiv">
my div 2
<button>Full Screen</button>
</div>

It's a bit of a complicated task, but this should give you an idea of how it's done. This code will run into some issues (clicking quickly will stack setTimeout) but does the basics.
The idea is that you calculate the current position of the element with getBoundingClientRect() and set initial position values with that, so that when you adjust the position to fixed, it will look as though it's still in the same spot - then when you override those values with the .fullscreen css, the transition property will allow them to animate.
The biggest issue here, which you'll notice if you click on the first div, is that it disappears from the layout and causes the second div to jump up to where it was, you'd probably need a way of preserving the layout. Hopefully this is helpful as a starting point anyway.
function getPosition(elem){
const rect = elem.getBoundingClientRect()
return {
top: rect.top,
left: rect.left,
width: rect.width,
height: rect.height
}
}
function toPx(val){
return [val, 'px'].join('')
}
$('.myDiv').click(function(e){
if(this.classList.contains('fullscreen')){
this.classList.remove('fullscreen')
setTimeout(e => this.style.position = 'static', 1000)
//close
} else {
//open
let pos = getPosition(this)
this.style.width = toPx(pos.width)
this.style.height = toPx(pos.height)
this.style.top = toPx(pos.top)
this.style.left = toPx(pos.left)
console.log(pos)
this.classList.add('fullscreen')
this.style.position = 'fixed'
}
});
.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}
.myDiv.fullscreen{
z-index: 9999;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
}
.animateTransitions {
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv animateTransitions">
my div
<button>Full Screen</button>
</div>
<div class="myDiv animateTransitions">
my div 2
<button>Full Screen</button>
</div>

Here's how i made it:
JQuery: 3.6.0
Css preprocessor: SCSS
CSS Framework: Bootstrap 5.1.0
See it in action:
https://codepen.io/illegalmexican/pen/NWYNVvg
Please note that i was answering a JQuery post. The fowlloing could be made in Vanilla Javascript for better performance. Also keep in mind that this could also be improved in terms of Accessibility standars by having a close button.
Html:
<div class="myDiv-Container">
<div class="row">
<div class="col-6">
<div class="d-flex flex-wrap position-relative">
<div class="myDiv w-50">
<div class="front bg-primary top-left">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-success top-right">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-danger bottom-left">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-warning bottom-right">
<h1>Hello<br>World</h1>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS:
.myDiv-Container {
height: 500px;
width: 500px;
position: relative;
}
.front {
position: relative;
text-align: center;
display: flex;
&.position-absolute {
z-index: 1;
}
&.top-left {
top: 0;
left: 0;
}
&.bottom-left {
bottom: 0;
left: 0;
}
&.top-right {
top: 0;
right: 0;
}
&.bottom-right {
bottom: 0;
right: 0;
}
}
JQuery:
document.addEventListener('DOMContentLoaded', function () {
jQuery('.myDiv').each(function () {
var frontElem = jQuery(this).find('.front');
jQuery(this).on("click", function () {
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery(frontElem).animate(
{
width: jQuery(this).width(),
height: jQuery(this).height(),
},
500, function() {
jQuery(frontElem).removeClass('position-absolute');
jQuery(frontElem).css({
width: '100%',
height: '100%',
});
});
} else {
jQuery(frontElem).css({
width: jQuery(this).width(),
height: jQuery(this).height(),
});
jQuery(frontElem).addClass('position-absolute');
jQuery(this).addClass('active');
jQuery(frontElem).animate({
'width': '100%',
'height': '100%',
}, 500);
}
});
});
});

Resize sidebar on content scroll

Im trying to achieve this example for my layout.
https://youtu.be/itV7jvKpWXc
when i scroll content horizontally, my sidebar should change in width for the same amount of horizontal scroll till i reach min-width of sidebar ?
Any easy way to approach it ?

Add to your main-content onscroll
<div class="main-content" onscroll="resizeSidebar()"></div>
In your javascript add the function:
function resizeSidebar(){
document.getElementById("sidebar").style.width = "50px";
}
you can add to the sidebar css:
.sidebar {
transition: 0.5s;
}
It makes the animation for open with slide

this is plus minus what i was trying to achieve, tho it have smull ugly bug when i use horizontal scroll when sidebar reduces in size it makes scrollbar jump also :D
$('.content').scroll(function() {
var scrolling = $(".content").scrollLeft();
console.log(scrolling);
if (scrolling >= 50) {
if(!$(".sidebar").hasClass('SmallSidebar')){
$(".sidebar").addClass("smallSidebar");
}
}
else{
$(".sidebar").removeClass("smallSidebar");
}
if (scrolling >= 50) {
if(!$(".content").hasClass('smallContent')){
$(".content").addClass("smallContent");
}
}
else{
$(".content").removeClass("smallContent");
}
});
$(function(){
var curDown = false,
curYPos = 0,
curXPos = 0;
$('.content').mousemove(function(m){
if(curDown === true){
$('.content').scrollTop($('.content').scrollTop() + (curYPos - m.pageY));
$('.content').scrollLeft($('.content').scrollLeft() + (curXPos - m.pageX));
}
});
$('.content').mousedown(function(m){
curDown = true;
curYPos = m.pageY;
curXPos = m.pageX;
});
$('.content').mouseup(function(){
curDown = false;
});
})
var width = 0;
$('.inner-content').each(function() {
width += $(this).outerWidth( true );
});
$('.block').css('width', width);
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100vh;
}
.sidebar {
width: 33.33333%;
float: left;
background: blue;
height: 100vh;
transition: width 0.2s;
}
.sidebar.smallSidebar {
width: 80px;
}
.content {
width: 66.66666%;
float: left;
background: #171717;
height:100%;
overflow-y:hidden;
height: 100vh;
transition: width 0.2s;
position: relative;
}
.content.smallContent {
width: calc(100% - 80px);
}
.inner-content {
height: 100%;
padding: 50px 0px;
box-sizing: border-box;
display: flex;
align-items: center;
transition: width 0.2s;
position: absolute;
}
.block {
background: yellow;
max-width: 320px;
height: 400px;
float: left;
width: 100%;
margin: 0 20px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="sidebar"></div>
<div class="content">
<div class="inner-content">
<div style="background: #c39eb2;" class="block"></div>
<div style="background: #a4af93" class="block"></div>
<div style="background: #0fe7ad;" class="block"></div>
<div style="background: #f75f31;" class="block"></div>
<div style="background: #9473c0;" class="block"></div>
<div style="background: #46087f;" class="block"></div>
<div style="background: #f59000;" class="block"></div>
<div style="background: #22e318;" class="block"></div>
<div style="background: #71454e;" class="block"></div>
<div style="background: #7eb544;" class="block"></div>
<div style="background: #2fe218;" class="block"></div>
<div style="clear: both;"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>

Fullscreen expand transform and Set element style as a child

English is not my first language so It's hard to explain details but I'll try hard as I can. I'm really really sorry about that.
I'm making thumbnail expanding fullscreen transition.
like google photos, thumbnail should expand to fullscreen and transform animation should apply too.
My method is make a clone of clicked element, then set initial style(top and left, width and height, etc) same as original element and add class which sets position to zero, and make full expanding. width:100vw and height:100vh, top:0 left:0, position:fixed(class .fullscreen) is it.
I borrowed some idea on http://jsfiddle.net/a7nzy6w6/299/ here.
but in setting styles,
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
This approach will replace all child classes's top, left and height width. even it will ignore "fullscreen" class too.
So it won't transform or expand and remain original style. If I'm not setting styles, transform animation will not apply.
How am I apply fullscreen expand transform animation? Is there any better solution? or How am I Set element's initial style as a child style without replacing added classes in javascript?
again, I'm really sorry for my english. I tried as I can
by the way, I don't know why element.style is not working in snippet
function handler(element)
{
var type = element.getAttribute("data-type")
switch(type)
{
case "image":
transition_fullscreen(element);
break;
default:
break;
}
}
function transition_fullscreen(element)
{
var img = element.getElementsByClassName('el_view')[0];
var rect = img.getBoundingClientRect();
var clone = img.cloneNode(true);
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
clone.classList.add('fullscreen');
var ap = document.getElementById('form').appendChild(clone);
}
#form
{
width: 100%;
text-align:center;
}
#form .element
{
display:inline-block;
float:left;
width: 10%;
height: 20%;
margin: 1.9em;
cursor: default;
transition: background .1s ease-in-out;
animation:animatezoom 0.5s;
}
#form .highlight
{
padding:14px;
transition: transform .1s ease-out;
padding-top:auto;
/*border: 1px solid #ddd;
border-radius: 4px;*/
}
#form .highlight:hover { transform: translateY(-0.5rem) scale(1.0125);
box-shadow: 0 0.5em 1.9rem -1rem rgba(0,0,0,0.5); }
#form .highlight:active { transform:scale(0.8); }
#form .el_img { max-height: 124px; vertical-align: middle; }
#form .el_img img { max-width: 88px; max-height: 124px; margin-top: 5%; border-radius:5px; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); border-radius:5px;
opacity: 1;
transition: all 3s;
}
#form .el_img .fullscreen
{
z-index:9999;
max-width:100vw;
max-height:100vh;
width:100vw;
height:100vh;
position:fixed;
top:1%;
left:1%;
transition: all 3s;
}
<div id="form">
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/oKsgcsHtHu_nIkpNd-mNCAyzUD8xo68laRPOfvFuO0hqv6nDXVNNjEMmoiv9tIDgTj8=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
somefile.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/hYQO8ekNvsPWMSzMe6IZdCAT6p8qq-SlzA0jiZstV7qBcWg5kn-39qHY0ZaBPqd3usc=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
blahblah.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300">
</div>
<div id="el_name#somefile.exe" class="el_name">
mehhhhh.cool
</div>
</div>
</div>
</div>
</div>

I founded it:
In your CSS you search for your image like:
#form .el_img .fullscreen
This searches elements in #form that are in .el_img and they have a fullsceen class.
But not an element that is in #form and has el_img and fullscreen classes at the same time.
So you need the remove the the space before .el_img from your selection so it looks like this:
#form .el_img.fullscreen {
/* Rest of your code */
And it will work.
Demo: https://www.w3schools.com/code/tryit.asp?filename=FOBUOKP41CYW

I just made it like Google photos.
By adding some HTML, CSS and JS.
This works with all of your products.
Demo:
let modal = document.getElementById('myModal'),
modalImg = document.getElementById('img01'),
captionText = document.getElementById('caption');
function handler(e) {
switch (e.getAttribute('data-type')) {
case 'image':
transition_fullscreen(e);
}
}
function transition_fullscreen(e) {
modal.style.display = 'block',
modalImg.src = e.children[0].children[0].children[0].children[0].src, captionText.innerHTML = e.children[0].children[0].children[1].innerHTML;
}
const close_btn = document.getElementsByClassName('close')[0];
close_btn.onclick = function() {
modal.style.display = 'none';
},
window.onclick = function(e) {
e.target == modal && (modal.style.display = 'none');
};
#myImg,
.close {
transition: .3s;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#myImg {
border-radius: 5px;
cursor: pointer;
}
#myImg:hover {
opacity: .7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #000;
background-color: rgba(0, 0, 0, .9);
}
#caption,
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
#caption,
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: .6s;
animation-name: zoom;
animation-duration: .6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
#keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: 700;
}
.close:focus,
.close:hover {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width:700px) {
.modal-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="form">
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/oKsgcsHtHu_nIkpNd-mNCAyzUD8xo68laRPOfvFuO0hqv6nDXVNNjEMmoiv9tIDgTj8=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
somefile.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/hYQO8ekNvsPWMSzMe6IZdCAT6p8qq-SlzA0jiZstV7qBcWg5kn-39qHY0ZaBPqd3usc=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
blahblah.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300">
</div>
<div id="el_name#somefile.exe" class="el_name">
mehhhhh.cool
</div>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>
</html>

even spacing of html elements along timeline

I am trying to build a timeline that will scale, and add evenly spaced markers along side the 'timeline' so that the user can add additional times within an admin panel.
for instance, if there was 4 markers they would automatically split across 1/4 of the timeline regardless of width.
So like this <--|--|--|--|-->
Here is the code:
<style>
body {
background: black;
}
#timeline {
width:49.5%;
background: url(http://brendonwells.co.uk/CPD/ice-training/img/timeline.png) center center no-repeat;
background-size: 100%;
height: 30px;
position: relative;
}
.checkpoint {
position: absolute;
width: 1px;
height: 13px;
top: 13px;
margin-left: auto;
margin-right: auto;
background: white;
cursor: pointer;
}
.checkpoint:hover {
background: white;
}
.checkpoint p {
position: absolute;
height: 30px;
width:0;
bottom: -35px!important;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
}
.checkpoint:hover p {
opacity: 1;
}
</style>
<div id="timeline">
<div class="checkpoint" >
<div class="rel">
<p>5 Minutes</p>
</div>
</div>
<div class="checkpoint" >
<p>10 Minutes</p>
</div>
<div class="checkpoint" >
<p>15 Minutes</p>
</div>
<div class="checkpoint" >
<p>20 Minutes</p>
</div>
<div class="checkpoint" >
<p>25 Minutes</p>
</div>
<div class="checkpoint" >
<p>30 Minutes</p>
</div>
<div class="checkpoint" >
<p>35 Minutes</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
//Set slide times
var time1 = 300;
var time2 = 600;
var time3 = 900;
var time4 = 1200;
var time5 = 1500;
var time6 = 1800;
var time7 = 2100;
//Array to keep all the times
var times = [time1, time2, time3, time4, time5, time6, time7];
//variable to iterate through all of them
var chosenTime = 0;
//placement needs multiplier
var multiplier = 1;
function deliverTimes() {
$('.checkpoint').each(function() {
$(this).data("time", times[chosenTime]);
//console.log("The data is " + $(this).data('time'));
chosenTime++;
//console.log('running');
placement($(this));
});
}
//Call the function
deliverTimes();
//Clicking checkpoints
$('.checkpoint').click(function() {
video.currentTime = $(this).data("time");
});
//place the checkpoints
function placement($div) {
var width = $('#timeline').width();
var margin = ((width/$('.checkpoint').length) - 10) * multiplier;
console.log(margin);
$div.css("left", margin + "px");
multiplier++;
}
</script>
http://brendonwells.co.uk/timeline.html
I also prepared a link so that the CSS could be messed with etc..
Thanks

You can achieve your desired look utilizing CSS3 flexbox to handle the spacing and width. Add and remove checkpoints in the html and css will handle the rest. No JS required.
HTML
<div id="timeline">
<div class="checkpoint">
<div class="rel">
<p>5 Minutes</p>
</div>
</div>
<div class="checkpoint" >
<p>10 Minutes</p>
</div>
<div class="checkpoint" >
<p>15 Minutes</p>
</div>
<div class="checkpoint" >
<p>20 Minutes</p>
</div>
<div class="checkpoint" >
<p>25 Minutes</p>
</div>
<div class="checkpoint" >
<p>30 Minutes</p>
</div>
<div class="checkpoint" >
<p>35 Minutes</p>
</div>
</div>
CSS
body {
background: #000;
}
#timeline {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
color: #fff;
height: 30px;
display: flex;
position: relative;
}
#timeline::after {
content: "";
position: absolute;
width: 100%;
border-top: 1px dashed #fff;
top: 50%;
left: 0;
}
#timeline .checkpoint {
flex: 1;
position: relative;
height: 50%;
margin-top: 15px;
border-right: 1px solid #fff;
}
#timeline .checkpoint:last-child {
border-right: none;
}
#timeline .checkpoint p {
width: 0;
margin: 0;
cursor: pointer;
opacity: 0;
transition: all .3s ease;
}
#timeline .checkpoint p:hover {
opacity: 1;
}
https://jsfiddle.net/s5rL5eja/

You may be able to use this system here Responsivegrid.css to evenly space them, otherwise, you could use a function that sets the width for each of the checkpoints to a percentage of 100%. So if you have 5 checkpoints the width may be 19% per checkpoint/child, with a margin that is 1% of the total width, and then you would just give either the checkpoint:first-child or checkpoint:last-child a margin of 0% (I am not sure what class each of your checkpoints has but you just replace checkpoint with whatever class)
TLDR: Give each checkpoint a percentage of the entire width based on a js function. Make either the first or last checkpoint have a 0% margin.

We Keep Coding

JavaScript is the programming language of the Web.

CSS transition within JavaScript not working - javascript

Related

Animated Sidebar

Animate a div to full screen from its position

Resize sidebar on content scroll

Fullscreen expand transform and Set element style as a child

even spacing of html elements along timeline

Categories

Resources