How to Get elements to change class with smooth transition?

Question

How to Get elements to change class with smooth transition?

2.3k Views Asked by JKhan At 19 October 2024 at 19:42

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>

Original Q&A

There are 3 best solutions below

Shashi On 28 December 2016 at 12:18

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

document.getElementsByClassName("im")[0]

ADH - THE TECHIE GUY On 28 December 2016 at 12:21

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>

**Deep** · Accepted Answer

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>

How to Get elements to change class with smooth transition?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in GETELEMENTSBYCLASSNAME

Trending Questions

Popular # Hahtags

Popular Questions