How to Get elements to change class with smooth transition?

Question

I am having trouble with the Javascript of this code, I want to resize the image by changing its width when the menu is clicked (by adding classname "im2" to img tag with classname "im"). but the menu part works fine, the image won't move... I think I missed an error or I'm doing this wrong, can anyone please help, I'm new to javascript...!!

function changefu() {
    if (document.getElementById("sidenav").classList == "menu" && document.getElementsByClassName("im").className == "im") {
        document.getElementById("sidenav").classList.toggle("menu2");
        document.getElementsByClassName("im").className = "im im2";
    } else {
        document.getElementById("sidenav").className = "menu";
        document.getElementsByClassName("im").className = "im";
    }
}

*{
  margin:0;
  padding:0;
}

body{
  display:block;
  overflow-x:hidden;
}

.large{
  display:inline-block;
  height:100%;
  width:100%;
  transition-duration: 1s;
  transition-property: all;
}

//.large2{
  display:inline-block;
  height:100%;
  width:94.7%;
}

.menu{
  float:left;
  z-index:11111;
  width:200px;
  height:100%;
  text-align:center;
  display:block;
  position:fixed;
  border-right: 2px solid gray;
  background:white;
  transition-duration: 1s;
  transition-property: all;
  transform: translateX(-202px) translateY(0px) translateZ(0px);
}
.menu2{
  transform: translateX(0px) translateY(0px) translateZ(0px);
}
ul{
  margin:0;
  list-style:none;
}
li{
  padding:10px;
  font-family:arial;
  font-weight:bold;
  font-size:18px
}

.bgimg{
  float:left;
  //max-width:1900px;
  position:relative;
  width:100%;
  top:122px;
}
#logop{float:left;}

.im{
  width:100%;
  float:right;
  display:block;
  z-index:99;
  transition-duration: 1s;
  transition-property: all;
}

.im2{
  width:89.5%;
}

.topnav{
  heigth:100px;
  position:fixed;
  border-bottom: 2px solid gray;
  width:100%;
  background-color:white;
  z-index:99991 !important;
}

.topnav img{
  height:80px;
  width:50px;
  padding-left:25px;
  padding-top:20px;
  padding-bottom:20px;
  padding-right:25px;
  display:block;
}

.menubtn{
  font-size:30px; font-family:arial; display:block; padding-left:100px;
  padding-top:60px;
  width:120px;
  
}

<body>
  <div class="topnav">
    <img id="logop" src="http://logolagoon.com/wp-content/uploads/2013/11/Puppy-Logo.png" alt="logo">
    <div class="menubtn" onclick="changefu()"><a style="text-decoration:none; color:black;" href="javascript:void(0);">☰ Menu</a></div>
  </div>
  <div id="large" class="large">
    <div id="sidenav" class="menu">   
      <ul>
        <li style="padding-top:300px;"><a style="text-decoration:none; color:black; z-index:1002;" href="#">Home</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Cats</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Dogs</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Monkey</a></li>
      </ul>
    </div>
    <div id="bgimg" class="bgimg">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
    </div>
  </div>
</body>

`document.getElementsByClassName("im")` will return array like collection. And why did you tagged it jQuery — Satpal, Dec 28 '16 at 12:16
[`classList` also does not return a String](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)... — André Dion, Dec 28 '16 at 12:17
And beware that the collection returned by `getElementsByClassName` is **live**, so if you change an element's class list such that it should be added to that collection or removed from it, that happens right away, which can be tricky if you're looping through. Consider `querySelectorAll` instead, which returns a snapshot, or if only *removing* elements from the collection by changing their class, you can just loop from the end forward. — T.J. Crowder, Dec 28 '16 at 12:19
@user2777 I'm added an snippet below,don't forget to tick it if it's useful :P — ADH - THE TECHIE GUY, Dec 28 '16 at 12:30
i decided to directly change the width instead, it works fine now with that, but the specified width doesn't work well when the screen is resized document.getElementById("bgimg").style.width = "89.5%"; document.getElementById("bgimg").style.width = "100%"; — JKhan, Dec 28 '16 at 12:42

Deep · Accepted Answer · 2016-12-28T12:35:01.440

Since getElementsByClassName return a node list toy can not use .className with it.

You can use querySelector here to get the image. it will give the first element satisfying the selector.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

function changefu() {
  
    document.getElementById("sidenav").classList.toggle("menu2");
    if (document.querySelector(".im2") == null) {
        document.querySelector(".im").className = "im im2";
    } 
    else
    {  
        document.querySelector(".im").className = "im";
    }
}

*{
  margin:0;
  padding:0;
}

body{
  display:block;
  overflow-x:hidden;
}

.large{
  display:inline-block;
  height:100%;
  width:100%;
  transition-duration: 1s;
  transition-property: all;
}

//.large2{
  display:inline-block;
  height:100%;
  width:94.7%;
}

.menu{
  float:left;
  z-index:11111;
  width:200px;
  height:100%;
  text-align:center;
  display:block;
  position:fixed;
  border-right: 2px solid gray;
  background:white;
  transition-duration: 1s;
  transition-property: all;
  transform: translateX(-202px) translateY(0px) translateZ(0px);
}
.menu2{
  transform: translateX(0px) translateY(0px) translateZ(0px);
}
ul{
  margin:0;
  list-style:none;
}
li{
  padding:10px;
  font-family:arial;
  font-weight:bold;
  font-size:18px
}

.bgimg{
  float:left;
  //max-width:1900px;
  position:relative;
  width:100%;
  top:122px;
}
#logop{float:left;}

.im{
  width:100%;
  float:right;
  display:block;
  z-index:99;
  transition-duration: 1s;
  transition-property: all;
}

.im2{
  width:89.5%;
}

.topnav{
  heigth:100px;
  position:fixed;
  border-bottom: 2px solid gray;
  width:100%;
  background-color:white;
  z-index:99991 !important;
}

.topnav img{
  height:80px;
  width:50px;
  padding-left:25px;
  padding-top:20px;
  padding-bottom:20px;
  padding-right:25px;
  display:block;
}

.menubtn{
  font-size:30px; font-family:arial; display:block; padding-left:100px;
  padding-top:60px;
  width:120px;
  
}

<body>
  <div class="topnav">
    <img id="logop" src="http://logolagoon.com/wp-content/uploads/2013/11/Puppy-Logo.png" alt="logo">
    <div class="menubtn" onclick="changefu()"><a style="text-decoration:none; color:black;" href="javascript:void(0);">☰ Menu</a></div>
  </div>
  <div id="large" class="large">
    <div id="sidenav" class="menu">   
      <ul>
        <li style="padding-top:300px;"><a style="text-decoration:none; color:black; z-index:1002;" href="#">Home</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Cats</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Dogs</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Monkey</a></li>
      </ul>
    </div>
    <div id="bgimg" class="bgimg">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
    </div>
  </div>
</body>

score 0 · Answer 2 · answered Dec 28 '16 at 12:18

0

You will have to use array index, use it like this:

document.getElementsByClassName("im")[0]

answered Dec 28 '16 at 12:18

Shashi

474
6
21

ADH - THE TECHIE GUY · Answer 3 · 2016-12-28T12:27:12.077

you can't directly apply style to a group elements using getElementsByClassName you need to store that in to an array and access one by one instead.

function changefu() {
  var k = document.getElementsByClassName("im");
  for(i=0;i < k.length; i++){ 
    if (document.getElementById("sidenav").classList == "menu" && k[i].className == "im") {
        document.getElementById("sidenav").classList.toggle("menu2");
        k[i].className = "im im2";
    } else {
        document.getElementById("sidenav").className = "menu";
k[i].className = "im";
        
    }
    }
}

*{
  margin:0;
  padding:0;
}

body{
  display:block;
  overflow-x:hidden;
}

.large{
  display:inline-block;
  height:100%;
  width:100%;
  transition-duration: 1s;
  transition-property: all;
}

//.large2{
  display:inline-block;
  height:100%;
  width:94.7%;
}

.menu{
  float:left;
  z-index:11111;
  width:200px;
  height:100%;
  text-align:center;
  display:block;
  position:fixed;
  border-right: 2px solid gray;
  background:white;
  transition-duration: 1s;
  transition-property: all;
  transform: translateX(-202px) translateY(0px) translateZ(0px);
}
.menu2{
  transform: translateX(0px) translateY(0px) translateZ(0px);
}
ul{
  margin:0;
  list-style:none;
}
li{
  padding:10px;
  font-family:arial;
  font-weight:bold;
  font-size:18px
}

.bgimg{
  float:left;
  //max-width:1900px;
  position:relative;
  width:100%;
  top:122px;
}
#logop{float:left;}

.im{
  width:100%;
  float:right;
  display:block;
  z-index:99;
  transition-duration: 1s;
  transition-property: all;
}

.im2{
  width:89.5%;
}

.topnav{
  heigth:100px;
  position:fixed;
  border-bottom: 2px solid gray;
  width:100%;
  background-color:white;
  z-index:99991 !important;
}

.topnav img{
  height:80px;
  width:50px;
  padding-left:25px;
  padding-top:20px;
  padding-bottom:20px;
  padding-right:25px;
  display:block;
}

.menubtn{
  font-size:30px; font-family:arial; display:block; padding-left:100px;
  padding-top:60px;
  width:120px;
  
}

<body>
  <div class="topnav">
    <img id="logop" src="http://logolagoon.com/wp-content/uploads/2013/11/Puppy-Logo.png" alt="logo">
    <div class="menubtn" onclick="changefu()"><a style="text-decoration:none; color:black;" href="javascript:void(0);">☰ Menu</a></div>
  </div>
  <div id="large" class="large">
    <div id="sidenav" class="menu">   
      <ul>
        <li style="padding-top:300px;"><a style="text-decoration:none; color:black; z-index:1002;" href="#">Home</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Cats</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Dogs</a></li>
        <li><a style="text-decoration:none; color:black;" href="#">Monkey</a></li>
      </ul>
    </div>
    <div id="bgimg" class="bgimg">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
      <img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
    </div>
  </div>
</body>

How to Get elements to change class with smooth transition?

3 Answers3