Nicolas Gomez Nicolas Gomez - 5 months ago 9
HTML Question

JavaScript, Divs not moving back to initial position

I have 3 links on the center of the page that when you click on them it makes a div appear on the right and the links move to the left of the page. I want the links to move back to the center of the page once all of the divs display is equal hidden. Also, is there any way that I can make the divs appear on the 1st click instead of the second click.

Here is the fiddle: https://jsfiddle.net/tk8gkrho/1/

This is my HTML:

<div class="link">
<ul>
<li><a id="box1"> box1 </a></li>
<li><a id="box2"> box2 </a></li>
</ul>
</div>

<div id="display1">
<img src="http://globalgamejam.org/sites/default/files/styles/game_sidebar__normal/public/game/featured_image/promo_5.png?itok=9dymM8JD">
</div>

<div id="display2">
<img src="https://s-media-cache-ak0.pinimg.com/564x/a1/e3/6b/a1e36bcb8ce179bd8cc8db28ff4ef6fb.jpg">
</div>


This is my JavaScript:

var link = document.getElementsByClassName("link")
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");


var display1 = document.getElementById("display1");
var display2 = document.getElementById("display2");

function movingLeft(){
for( var i = 0; i < link.length ; i++)
{
link[i].style.float = "left";
link[i].style.paddingLeft = "20px";
link[i].style.position = "fixed";
}
};

function backToCenter(){
if( (display1.style.display === "none") &&
(display2.style.display === "none") )
{
for( var i = 0; i < link.length; i++)
link[i].style.float = "";
link[i].style.position = "initial";
}
}

box1.addEventListener("click", function(){
if(display1.style.display === "none"){
display1.style.display = "block";
display1.style.float = "right";
movingLeft();
}
else{
display1.style.display = "none";
backToCenter();
}
});

box2.addEventListener("click", function(){
if(display2.style.display === "none"){
display2.style.display = "block";
display2.style.float = "right";
movingLeft();
}
else{
display2.style.display = "none";
backToCenter();
}
});


This is my CSS:

.link{
width: 30%;
height: 100%;
margin: 0 auto;
}

ul {
padding: 0;
list-style-type: none;
overflow: hidden;
}

li{
height: 13vh;
padding-bottom: 5%;
}

li a {
height: 75%;
border: 1px solid white;
border-radius: 5px 5px 5px 5px;
background-color: rgba(79,87,89,0.9);
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
line-height: 10vh;
transition: background-color 0.9s;
}

li a:hover{
background-color: black;
border: 2px solid white;
font-weight: bold;
}

#display1{
display: none;
float:right;
background-color: rgba( 0, 0, 0, 0.8);
color: white;
width: 60%;
margin-right: 30px;
}

#display1 img{
width: 80%;
height: 30%;
}

#display2{
display: none;
float:right;
background-color: rgba( 0, 0, 0, 0.8);
color: white;
width: 60%;
margin-right: 30px;
}

#display2 img{
width: 80%;
height: 30%;
}


Here is the fiddle: https://jsfiddle.net/tk8gkrho/1/

I'm sorry it's kind of long, I'm still learning.

Answer

You can center those links using only css no need to center them in you javascript code , to do this I used display:inline-block and add a container to all you html and made its text-align:center;

and also fixed the problem of showing the divs on first click by toggle active class on links click

https://jsfiddle.net/tk8gkrho/2/

Your html after adding the container :

<div class="myContainer">
  <div class="link">
    <ul>
      <li><a id="box1"> box1 </a></li>
      <li><a id="box2"> box2 </a></li>
    </ul>
  </div>

  <div id="display1">
    <img src="http://globalgamejam.org/sites/default/files/styles/game_sidebar__normal/public/game/featured_image/promo_5.png?itok=9dymM8JD">
  </div>

  <div id="display2">
    <img src="https://s-media-cache-ak0.pinimg.com/564x/a1/e3/6b/a1e36bcb8ce179bd8cc8db28ff4ef6fb.jpg">
  </div>
</div>

and css:

.myContainer{
  text-align:center;
}
.link{
    width: 30%;
    display:inline-block;
}

ul {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

li{
    height: 13vh;
    padding-bottom: 5%;
}

li a {
    height: 75%;
    border: 1px solid white;
    border-radius: 5px 5px 5px 5px;
    background-color: rgba(79,87,89,0.9);
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    line-height: 10vh;
    transition: background-color 0.9s;
}

li a:hover{
    background-color: black;
    border: 2px solid white;
    font-weight: bold;
}

#display1{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display1 img{
    width: 80%;
    height: 30%;
}

#display2{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display2 img{
    width: 80%;
    height: 30%;
}

#display1.active, #display2.active{display:block;}

and the script :

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var display1 = document.getElementById("display1");
var display2 = document.getElementById("display2");

box1.addEventListener("click", function(){
    display1.classList.toggle('active');
});

box2.addEventListener("click", function(){
    display2.classList.toggle('active');
});
Comments