Shifting elements up and left off screen in pure js

kertcvc · December 1, 2020

There are several blocks, when you click on each of them, the clicked block begins to grow to the full width of the container, shifting other blocks proportionally. For example, when you click on the center box, the left box moves to the left off the screen, the top box moves up, and the right box moves to the right, until the center box fits the full width of the container. The shift to the right and down seems to work, but how to shift the left and top blocks off the screen?

function classToggle() {
    this.classList.toggle('header__100');
}
document.querySelector('#header').addEventListener('click', classToggle);
function classToggle() {
    this.classList.toggle('header__100');
}
document.querySelector('#header2').addEventListener('click', classToggle);
function classToggle() {
    this.classList.toggle('header__100');
}
document.querySelector('#header4').addEventListener('click', classToggle);
function classToggle() {
    this.classList.toggle('header__100');
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
<body>
<div class="container">
  <div class="ratio16-9">
<div id="header3" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
<div id="header" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
<div id="header2" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div><br>
<div id="header4" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
  </div></div>


  </body>
</html>


#header {
  text-align: center;
  background: crimson;
  color: white;
  width: 20%;
}

#header2 {
  text-align: center;
  background: black;
  color: white;
  width: 20%;
  clear: both;

}

#header3 {
  text-align: center;
  background: red;
  color: white;
  width: 20%;
  clear: both;
}

#header4 {
  text-align: center;
  background: red;
  color: white;
  width: 20%;

}

.header {
  height: 20px;
  transition: width 10s, height 10s;
  transform: translate(-50%. -50%);
    display: inline-block;

}

.header__20 {
  height: 20px;

}

.header__100 {
  width: 1440px;
}

img {
  width: 100%;
}

.container {
  position: relative;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
  background: #000;
  max-width: 1440px;
  min-width: 1024px; 
    white-space: nowrap;

}

header {
  width: 100%;
  height: 20%;
  background: #000;
  padding: 0;
  margin: 0; 
}

.container .ratio16-9 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.container:before {
  content: '';
  display: block;
  padding-top: 56.25%;
  background: crimson;
}

dsonesuk · December 2, 2020

That's not easy, because thats how it works, content flows from left and move down and stacks. You could perhaps expand container outward 50% width/height of fully expanded element. But that could be challenge on its own.

Sign In

Shifting elements up and left off screen in pure js

Recommended Posts

kertcvc

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity