Reputation: 801

How to fix the window being resized when elements placed off the screen

While I m doing a project I wanted to add an effect to my page. So I placed elements off the screen. But when running the code the window get resized with scrollbars making it hard for mobile users

Here is the code I made that element off the screen for the effect.

    <!--html-->
    <div class="full-view cont" id="desc">
       <h1>What is IoT?</h1>
       <br /><br /><br /><br />
       <section>
       <div class="half-view">
           <img src="https://www.webyot.com/assets/site/img/iot.png" alt="" class="half-img"/>
       </div>
       <div class="half-view">
          <p class="p">
          The internet of things, or IoT, is a system of interrelated computing devices, mechanical and digital machines, objects, animals or people that are provided with unique identifiers (UIDs) and the ability to transfer data over a network without requiring human-to-human or human-to-computer interaction.
               </p>
            </div>
        </section>
    </div>

And In js I did this

//js
  $(".cont:nth-child(even)").animate({left:"-100%"},1);

I wanted to hide all of those divs without resizing the window, but it does with some untidy scroll bars. Does anybody knows how to fix it?

Here is the full code

//js
var conts;
window.onbeforeunload = () => {
  window.scrollTo(0, 0);
}
$(document).ready(() => {
  $(document).scrollTop(0);
  $(".full-view").css("height", window.innerHeight + "px");
  $(".p").css("max-height", window.innerHeight - 150 + "px");
  /*if($(".full-view").hasChild("half-view")) {
    $(".full-view").css({"display":"grid"});
  }*/
  $("body").prepend(`<nav class='main-nav'><ul><li> HOME </li><li> USAGE </li><li> ABOUT </li></ul><button class='burger fas fa-bars' value='false'></button></nav><div class='ddlsup full-view'></div><ul class='ddl full-view' ><i class='fas fa-times-circle' onclick="$('.burger').trigger('click')" style="
    position: relative;
    left: 90%;
    font-size: 20px;
"></i></ul>`);
  $('body').append(`<footer class='main-footer' style="height:` + window.innerHeight + `px">
      <div class='footer-cell logobar'>
        <img src="images/ioticon.png" alt="">
        <img src="images/ioticon.png" alt="">
      </div>
      <section class="contact">
      <div class="footer-cell">
        <a class="fab fa-facebook-square s-media" href="" > Find us on Facebook!</a><br>
        <a class="fab fa-twitter-square s-media" href=""> Follow us on Twitter</a><br>
        <a class="fab fa-google-plus-square s-media" href=""> Follow us on G+</a><br>
        <a class="fas fa-globe-americas s-media" href=""> Visit our website</a><br>

      </div>
      <div class="footer-cell">
        <input type="text" id="feed" placeholder="feedback"><button id="submit" onclick="sendMail()"><i class="fas fa-envelope"></i></button>
        <br><br><br><hr>
        &copy; Copyright MCICTS ` + new Date().getFullYear() + `
      </div>
      <!--/section-->
    </footer>`);
  conts = Array.prototype.slice.call($(".cont"));
  $(".cont:nth-child(even)").animate({
    left: "-100%"
  }, 1);
  $(".cont:nth-child(odd)").animate({
    left: "100%"
  }, 1);
  $(".cont").css("transition-duration", "4s");

  $(".burger").click(() => {
    $(".ddlsup").animate({
      "left": $(".burger").attr("value") == "false" ? "0%" : "100%"
    }, 400);
    $(".ddl").animate({
      "left": $(".burger").attr("value") == "false" ? "60%" : "100%"
    }, 400);
    $(".burger").css("color", $(".burger").attr("value") == "false" ? "black" : "white");
    $(".burger").attr("value", $(".burger").attr("value") == "false" ? "true" : "false");
  });

  $(".ddlsup").click(() => $(".burger").trigger("click"));
  $("#feed").on("change", () => sendMail());

  $(window).scroll(() => {
    $("#" + $(conts[Math.floor(((document.documentElement.scrollTop || document.body.scrollTop) + 50) / scroll)]).attr("id")).css({
      "left": "2.5%"
    });
    conts[Math.floor(((document.body.scrollTop || document.documentElement.scrollTop) + 50) / scroll)] = "";
  });
});

const sendMail = () => {
  window.location = ("mailto:[email protected]?subject=mcicts iot feedback&body=" + $("#feed").val());
}

  body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

#home {
  width: 105%;
  font-family: 'Roboto', sans-serif;
  top: -1px;
  color: white;
  font-weight: bold;
  background-image: url("https://www.gsma.com/iot/wp-content/uploads/2018/05/Paper_MobileIoT_5GFuture_1300x640.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.burger {
  position: absolute;
  top: 0px;
  right: 2%;
  z-index: 11;
  width: 45px;
  height: 45px;
  font-size: 18px;
  color: blue;
  background-color: transparent;
  border: none;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 3px;
  transition-duration: .4s;
}

.burger:hover {
  color: #dddddd;
  background-color: rgba(250, 250, 250, 0.2);
}

.burger:active {
  color: #cccccc;
  background-color: rgba(250, 250, 250, 0.3);
}

nav.main-nav {
  position: fixed;
  z-index: 8;
  width: 100%;
  background-color: #dddddd;
  color: blue;
  height: 55px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 8px;
  transition-duration: .4s;
  top: 0px;
}

.main-nav>ul {
  list-style-type: none;
  z-index: 9;
}

.main-nav>ul>li {
  display: inline-block;
  padding-left: 5px;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
}

.half-img {
  width: 80%;
  height: 80%;
  margin: auto;
}

#ex>div>img {
  left: 40%;
  width: 20%;
}


/* #mainti {
           left: 100%;
           position: relative;

         }*/


/*@-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }*/

.ddl {
  width: 40%;
  left: 160%;
  position: fixed;
  z-index: 8;
  list-style-type: none;
  background-color: white;
  padding: 10px;
  height: 100% !important;
}

.ddl>li {
  position: relative;
  top: 45px;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px solid blue;
  height: 50px;
  text-align: center;
  align: bottom;
  padding-top: 35px;
  text-decoration: none;
}

.ddl>li>a {
  text-decoration: none;
}

.ddl>li>a:hover {
  text-decoration: underline;
}

.ddl>li>a:active {
  text-decoration: none;
}

.ddl>li>a:visited {
  position: relative;
  top: 45px;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px solid blue;
  height: 50px;
  text-align: center;
  align: bottom;
  padding-top: 35px;
  text-decoration: none;
}

.ddlsup {
  width: 60%;
  left: 100%;
  height: 100%;
  background-color: black;
  position: fixed;
  z-index: 7;
  background-color: rgba(10, 10, 10, 0.6);
}

img {
  position: relative;
}

img::after {
  content: "CRASHED IMAGE";
  position: absolute;
  font-size: 9px;
  padding: 10px;
  border: 2px dashed black;
}

.p {
  position: relative;
  font-size: 20px;
  letter-spacing: 3px;
  margin: 0;
  display: inline-block;
  font-family: 'Roboto';
}

.full-view {
  margin: 1px;
}

.full-view>section {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column: 2;
}

.half-view>* {
  font-size: 200%;
  letter-spacing: 8px;
  line-height: 130%;
  overflow-y: scroll;
  margin: auto;
}

.examples {}

.footer-cell {
  overflow: hidden;
  border: 0.1px solid black;
  color: white;
  padding: 5%;
}

.main-footer {
  position: relative;
  width: 100%;
  background-color: #02447e;
  top: 15px;
  display: grid;
  grid-template-columns: 33% 66%;
}

#feed {
  width: 75%;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid blue;
  height: 35px;
  font-size: 20px;
  color: white;
  outline: none;
  transition-duration: 1s;
}

#submit {
  height: 35px;
  width: 20%;
  font-size: 25px;
  background-color: transparent;
  border: 1px solid transparent;
  outline: transparent;
  text-align: left;
  vertical-align: bottom;
  color: white;
  transition-duration: .5s;
  cursor: pointer;
}

.s-media {
  color: white;
  margin: 12px;
  font-size: 19px;
  font-weight: bold;
  text-decoration: none;
  transition-duration: .3s;
  position: relative;
  top: 10px;
  left: 20px;
}

.s-media:hover {
  border-bottom: 1px solid white;
}

#feed:focus {
  border-bottom: 3px solid #09b0f0;
}

#submit:hover {
  outline: none;
  color: #aaaaaa;
}

.logobar {
  display: grid;
  grid-row: 1;
}

.logobar>img {
  margin: auto;
  border-radius: 50%;
}

.main-footer>section {
  display: grid;
  grid-template-columns: 50% 50%;
}


/*for small devices (mobile phones, etc.) */

@media only screen and (max-width: 600px) {
  .main-nav>ul>li {
    width: 100%;
    border-bottom: 1px solid black;
    padding-bottom: 2px;
    padding-top: 2px;
    position: relative;
  }
  .main-nav {
    height: 80px !important;
    display: inline-table;
    left: 0px !important;
  }
  .main-nav>ul {
    padding: 0px;
  }
  .half-view>* {
    width: 100% !important;
    font-size: 17px !important;
    letter-spacing: normal !important;
    line-height: normal !important;
  }
  .half-view>.examples {
    width: 50%;
  }
  .half-view {
    display: block;
    width: 100% !important;
    height: 49% !important;
    padding: 1px;
  }
  .main-footer {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: none;
    grid-template-rows: 30% 70%;
  }
  .contact {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  .logobar {
    grid-row: auto;
    grid-template-columns: 50% 50%;
  }
  .logobar>img {
    width: 70%;
    height: 70%;
    margin: auto;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Internet of Things</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--jQuery-->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <!--google fonts-->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <script src="script.js"></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="icon" href="images/ioticon.png" />
  <!--font awesome-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    #home>h1 {
      font-size: 100px;
      top: 20%;
      position: absolute;
      left: 20px;
    }
    
    #desc,
    #hist,
    #ex,
    #pnc {
      width: 95%;
      left: 2.5%;
      position: relative;
    }
    
    #pnctbl>tbody>tr>td:nth-child(odd) {
      background-color: #2ecb71;
    }
    
    #pnctbl>tbody>tr>td:nth-child(even) {
      background-color: tomato;
    }
    
    #pnctbl {
      width: 100%;
      top: 20px;
      position: relative;
    }
    
    #pnctbl>tbody>tr>td {
      width: 50%;
      padding: 15px;
      font-size: 20px;
      font-weight: bold;
      border-radius: 8px;
      text-align: center;
    }
  </style>
</head>

<body>


  <div id="home" class="full-view">
    <br />
    <h1 id="mainti">Internet of <br>Things</h1>

  </div>
  <div class="full-view cont" id="desc">
    <h1>What is IoT?</h1>
    <br /><br /><br /><br />
    <section>

      <div class="half-view">
        <img src="https://www.webyot.com/assets/site/img/iot.png" alt="" class="half-img" />
      </div>
      <div class="half-view">
        <p class="p">
          The internet of things, or IoT, is a system of interrelated computing devices, mechanical and digital machines, objects, animals or people that are provided with unique identifiers (UIDs) and the ability to transfer data over a network without requiring
          human-to-human or human-to-computer interaction.
        </p>
      </div>
    </section>

  </div>
  <div class="full-view cont" id="hist">
    <h1>History</h1>
    <section>

      <div class="half-view">
        <p class="p">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="half-view">
        <img alt="" src="https://aggregate.tibbo.com/v3_images/heading-backgrounds/development-background-image.png" />
      </div>
    </section>

  </div>
  <div class="full-view cont" id="ex">

    <h1>Day-to-Day Examples</h1>

    <div style="overflow-y:scroll;max-height:90%;">
      <h3>Internet</h3>
      <img src="http://icons.iconarchive.com/icons/dtafalonso/modern-xp/512/ModernXP-68-Internet-icon.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>

      <h3>Connected Security Systems</h3>
      <img src="https://www.vcnewsnetwork.com/wp-content/uploads/2017/08/14004-thumb.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <h3>Smart Cars</h3>
      <img src="https://blogs.intel.com/iot/files/2016/01/connectedCar1.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <h3>Personal Assistants</h3>
      <img src="https://www.acelerartech.com/wp-content/uploads/2017/01/Virtual-AccountingAssistant.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <h3>Smart Environments and Houses</h3>
      <img src="http://vnits.vn/wp-content/uploads/2014/04/smarthome.png" alt="" />
      <p>
        Internet is something, dont ask me about that just refer to wikipedia XD: jk; under construction!!!!! Please be patient!!!!!
      </p>
      <a href="#">Read more >></a>
    </div>

  </div>
  <div class="full-view cont" id="pnc">

    <header style="text-align:center"><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/sign-check-icon.png" alt="" style="display:inline-block;" />
      <h1 style="display:inline-block;"> PROS and CONS </h1><img style="display:inline-block;" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/sign-error-icon.png" alt="" /></header>
    <table id="pnctbl">
      <tr>
        <td>Cost Savings</td>
        <td>Over Dependency on Technology</td>
      </tr>
      <tr>
        <td>Information</td>
        <td>Losing Security on Privacy</td>
      </tr>
      <tr>
        <td>Communication</td>
        <td>Lesse Employment Prospects</td>
      </tr>
      <tr>
        <td>Automation and Control</td>
        <td>Complexity
        </td>
      </tr>
      <tr>
        <td>More Available Information Makes Life Easier to Manage.</td>
        <td>Compatability Issues</td>
      </tr>
      <tr>
        <td>Track Inventories or People Easier</td>
        <td>More Opportunities to Fail</td>
      </tr>
      <tr>
        <td>Make Products and Services More Affordable</td>
        <td>Health and Fitness Issues</td>
      </tr>
      <tr>
        <td>Socio-Economic Issues Could Finally be Addressed</td>
        <td>High Potential to Eliminate Jobs</td>
      </tr>
      <tr>
        <td>Instant Access for Data and Information</td>
        <td>Reduce Human Skills</td>
      </tr>
    </table>

  </div>

  <script>
    const scroll = 500;
    $(document).ready(() => {

      //makes the nav bar moves also
      //$("#mainti").animate({"left":"0%"},3000,"linear");
      $(".main-nav").css({
        "color": "white",
        "backgroundColor": "transparent"
      });
      $(".burger").css({
        "color": "white",
        "backgroundColor": "transparent"
      });
      $(".main-nav>ul>li:nth-child(1)").css("border-bottom", "2px solid white");
      $(".ddl").append(`
            <li><a href="#desc" onclick="$('.burger').trigger('click')">What is IOT?</a></li>
            <li><a href="#hist" onclick="$('.burger').trigger('click')">History</a></li>
            <li><a href="#ex" onclick="$('.burger').trigger('click')">Day to Day Examples</a></li>
            <li><a href="#pnc" onclick="$('.burger').trigger('click')">Pros and Cons</a></li>
          `);
    })
    $(document).scroll(() => {
      if (document.body.scrollTop > 784 || document.documentElement.scrollTop > 784) {
        $(".main-nav").css({
          "color": "blue",
          "backgroundColor": "#dddddd"
        });
        $(".burger").css({
          "color": "blue",
          "backgroundColor": "#dddddd"
        });
        $(".main-nav>ul>li:nth-child(1)").css("border-bottom", "2px solid blue");

      } else {
        $(".main-nav").css({
          "color": "white",
          "backgroundColor": "transparent"
        });
        $(".burger").css({
          "color": "white",
          "backgroundColor": "transparent"
        });
        $(".main-nav>ul>li:nth-child(1)").css("border-bottom", "2px solid white");

      }
    })
  </script>

</body>

</html>

Upvotes: 0