TechQA.

How to Get elements to change class with smooth transition?

2.3k views Asked by At

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>

javascript jquery html css getelementsbyclassname
Original Q&A
3

There are 3 answers

0
Deep On BEST 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>

0
Shashi On

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

document.getElementsByClassName("im")[0]
0
ADH - THE TECHIE GUY On

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>

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in GETELEMENTSBYCLASSNAME

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions