Width changing unlike function logic

Asked

Viewed 75 times

0

I am creating a page, the goal is whenever I click to expand the menu the resolution of the div decrease a little and whenever I click again this resolution increase pro normal size.

My logic was the following: I put an onclick on the label that triggers a function that checks the resolution that is in the id, if it equals 100% it will put to 76.5% (because it would indicate that the menu was closed and would open) and if I was different from 100% it would put at 100% (It would indicate that the menu was open and would close)

But something unexpected happened, it is totally the opposite, when I click to open the menu it increases the div and when I click to close it decreases, where I am missing?

HTML 

    <body>
    <input type="checkbox" id="check">
    <label id="icone" for="check" onclick="resolucao()"><img src="../../icones/menu.png"></label>

    <div class="barrasuperior">

    </div>

    <div class="barra">
        <div id="caracteristicas">

        </div>
        <nav>
            <input type="text" placeholder="Pesquise uma aula" class="pesquisar">
            <a href=""><div class="link">Módulo 1:</div></a>
            <a href=""><div class="link">Módulo 2:</div></a>
            <a href=""><div class="link">Módulo 3:</div></a>
            <a href=""><div class="link">Módulo 4:</div></a>
            <a href=""><div class="link">Módulo 5:</div></a>
        </nav>
    </div>

    <div id="conteudo">

        <div class="opcoes">
            <div class="anterior">
                <a href="" style="color:white;"><span>Aula Anterior</span></a>
            </div>

            <div class="proximo">
               <a style="color:white;" href=""><span>Próxima Aula</span></a>
            </div>
        </div>

        <div class="aula">

        </div>
        <h2 id="titulo">TITULO DA AULA</h2>
        <button onclick="materiais()">Materiais da Aula</button>

    </div>

    <script>
        function materiais(){
            document.location.href = 'https://google.com/'
        }
    </script>
</body>

CSS

    * {
    margin: 0;
    padding: 0;
}

body {
    background-color:#f9f9f9;
}

a {
    text-decoration: none;
}

.barrasuperior {
    width: 100%;
    height:60px;
    background-color: black;
}

#check {
    display:none;
}

#icone {
    cursor:pointer;
    padding:15px;
    position: absolute;
    z-index: 1;
}

.barra {
    background-color:black;
    height:100%;
    width: 300px;
    position: absolute;
    transition: all .2s linear; 
    left: -300px;
}

nav {
    width: 100%;
    position: absolute;
    top: 60px;
}

nav a {
    text-decoration: none;
}

.pesquisar {
    width: 284px;
    margin-top:10px;
    margin-bottom:10px;
}

.link {
    background-color:#494950;
    padding:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    transition: all .2s linear;
    color: #f4f4f9;
    border-bottom: 2px solid #222;
}

.link:hover {
    background-color: #050542;
}

#check:checked ~ .barra {
    transform: translateX(300px)
}

#check:checked ~ .barra nav a .link {
    opacity: 1;
    margin-top:0;
}

#conteudo {
    width:100%;
    height:500px;
    background-color:#191919;
    float:right;
}

#conteudo2 {
    width:76.5%;
    height:500px;
    background-color:#191919;
    float:right;
}

.opcoes {
    width:100%;
    border:1px solid #2c2c2c;
    display:flex;
    justify-content:space-between; 
}

.anterior {
    display:inline;
    padding:10px;
}

.proximo {
    display:inline;
    padding:10px;
}

.aula {
    width: 700px;
    height: 300px;
    margin:20px auto;
    border:1px solid #0b47ca;
    box-shadow:0px 0px 5px #28bcf4;
}

#titulo {
    color: #f3f3f3;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 1.2rem;
    font-family: inherit;
}


button{
    display:block;
    margin:20px auto;
    padding:15px 40px; 
    background-image: linear-gradient(198deg,#28bcf4,#0b47ca);
    border-radius: 30px;
    border:none;
    color:white;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Titillium Web';
    font-size:12px;             
    cursor:pointer;
}

JS 

function resolucao(){
var reso = document.getElementById('conteudo').style.width
comparar = '100%'
if(reso == comparar){
    document.getElementById('conteudo').style.width = '76.5%'
} else {
    document.getElementById('conteudo').style.width = '100%'
}

}

javascript html css

  • I think you got that phrase mixed up e se estive-se diferente de 100% ele colocaria em 100% or was that right?

  • 1

    Hi Hugo, that’s right but I don’t think I could explain it very well, I meant like this: The default value of width is 100%, when you open the page it is already at this value, so when you click the first time would give True because 100% is equal to 100% and it would be 76.5%. Already with the open menu (in this case the standard would be 76.5%) it would be different from 100%, then it would put back in the 100% because this would symbolize the closed menu again

2 answers

0


The problem is that the property .style.width does not take the value of the property width defined in CSS. It returns the value that is in the attribute style of the element:

<div style="width: 100%;"></div>

As initially the element does not have the attribute style, when calling the function for the first time, the value of .style.width will be empty, causing it to fall straight into the else of if.

No need to declare another variable with the value of 100%. Put the value "100%" right in the if, and create another condition by checking if the variable reso is empty. The if will look like this:

if(reso == "100%" || !reso){

the operator "or" (||) will cause it to be verified whether one of the conditions is true, ie whether reso is equal to 100% or is empty (!reso).

And since the menu is 300px wide (set in CSS), do not use the value of 76.5%, because this value will never equal the total width of the screen less the width of the menu 300px. Instead, use the function calc() CSS. Just subtract 100% - 300px, like this:

document.getElementById('conteudo').style.width = 'calc(100% - 300px)';

As long as you’re learning Javascript, make it a point-and-comma (;) at the end of the instructions.

Your code will look like this:

function resolucao(){
   var reso = document.getElementById('conteudo').style.width;
   if(reso == "100%" || !reso){
       document.getElementById('conteudo').style.width = 'calc(100% - 300px)';
   } else {
       document.getElementById('conteudo').style.width = '100%';
   }
}
* {
    margin: 0;
    padding: 0;
}

body {
    background-color:#f9f9f9;
}

a {
    text-decoration: none;
}

.barrasuperior {
    width: 100%;
    height:60px;
    background-color: black;
}

#check {
    display:none;
}

#icone {
    cursor:pointer;
    padding:15px;
    position: absolute;
    z-index: 1;
}

.barra {
    background-color:black;
    height:100%;
    width: 300px;
    position: absolute;
    transition: all .2s linear; 
    left: -300px;
}

nav {
    width: 100%;
    position: absolute;
    top: 60px;
}

nav a {
    text-decoration: none;
}

.pesquisar {
    width: 284px;
    margin-top:10px;
    margin-bottom:10px;
}

.link {
    background-color:#494950;
    padding:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    transition: all .2s linear;
    color: #f4f4f9;
    border-bottom: 2px solid #222;
}

.link:hover {
    background-color: #050542;
}

#check:checked ~ .barra {
    transform: translateX(300px)
}

#check:checked ~ .barra nav a .link {
    opacity: 1;
    margin-top:0;
}

#conteudo {
    width:100%;
    height:500px;
    background-color:#191919;
    float:right;
}

#conteudo2 {
    width:76.5%;
    height:500px;
    background-color:#191919;
    float:right;
}

.opcoes {
    width:100%;
    border:1px solid #2c2c2c;
    display:flex;
    justify-content:space-between; 
}

.anterior {
    display:inline;
    padding:10px;
}

.proximo {
    display:inline;
    padding:10px;
}

.aula {
    width: 700px;
    height: 300px;
    margin:20px auto;
    border:1px solid #0b47ca;
    box-shadow:0px 0px 5px #28bcf4;
}

#titulo {
    color: #f3f3f3;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 1.2rem;
    font-family: inherit;
}


button{
    display:block;
    margin:20px auto;
    padding:15px 40px; 
    background-image: linear-gradient(198deg,#28bcf4,#0b47ca);
    border-radius: 30px;
    border:none;
    color:white;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Titillium Web';
    font-size:12px;             
    cursor:pointer;
}
<input>
<input type="checkbox" id="check">
 <label id="icone" for="check" onclick="resolucao()"><img src="../../icones/menu.png"></label>

 <div class="barrasuperior">

 </div>

 <div class="barra">
     <div id="caracteristicas">

     </div>
     <nav>
         <input type="text" placeholder="Pesquise uma aula" class="pesquisar">
         <a href=""><div class="link">Módulo 1:</div></a>
         <a href=""><div class="link">Módulo 2:</div></a>
         <a href=""><div class="link">Módulo 3:</div></a>
         <a href=""><div class="link">Módulo 4:</div></a>
         <a href=""><div class="link">Módulo 5:</div></a>
     </nav>
 </div>

 <div id="conteudo">

     <div class="opcoes">
         <div class="anterior">
             <a href="" style="color:white;"><span>Aula Anterior</span></a>
         </div>

         <div class="proximo">
            <a style="color:white;" href=""><span>Próxima Aula</span></a>
         </div>
     </div>

     <div class="aula">

     </div>
     <h2 id="titulo">TITULO DA AULA</h2>
     <button onclick="materiais()">Materiais da Aula</button>

 </div>

  • Thank you, Sam, thank you! after posting I had placed an Alert with the variable and I realized that the first time was empty even, but I did not know how to proceed, really worth, it was a great help!

-1

Hello, your code was with some syntax errors, and it was one of the reasons your function didn’t work properly. Always remember to put ';' at the end of the instructions and close the functions' {}' keys, and put the keyword var before declaring the variable.

As you had already assigned to content a variable, I used it to change the CSS value.

function resolucao(){
     var reso = document.getElementById('conteudo').style.width;
     var comparar = '100%';

     if(reso == comparar){
          reso = '76.5%';
     }

     document.getElementById('conteudo').style.width = '100%';
}

As you only have two conditions, it is not necessary to use the Else, because, if your if is not true, Javascript will jump and read the next instruction.

I hope it helped.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.