Bug : Overlay loading automatically (bootstrap) (laravel 5.2)

Question

I am using chart.js in laravel 5.2. When I go to my page ,all the charts are automatically loaded (but this should not happen). Also,i am not using window.load or window.onload function.

It should open only on the click(here ,on clicking pic)

jsfiddle link: https://jsfiddle.net/Lxdhhj7j/

<div class="container-fluid">
  <div id="myNav1" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">×</a>
  <div class="overlay-content">

<script>
    

    var year1 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
    var data_viewer = <?php echo $viewer; ?>;
    var data_viewer1 = <?php echo $viewer1; ?>;
    var data_viewer2 = <?php echo $viewer2; ?>;
    var data_viewer3 = <?php echo $viewer3; ?>;
    var data_viewer4 = <?php echo $viewer4; ?>;
    var data_viewer5 = <?php echo $viewer5; ?>;
    var data_click = <?php echo $click; ?>;
    var data_click1 = <?php echo $click1; ?>;
    var data_click2 = <?php echo $click2; ?>;
    var data_click3 = <?php echo $click3; ?>;
    var data_click4 = <?php echo $click4; ?>;
    var data_click5 = <?php echo $click5; ?>;

    
   

    var barChartData1 = {

        labels: year1,

        datasets: [{

            label: 'STUDS',

            backgroundColor: "rgba(65,105,225,0.5)",

            data: data_click

        }, {

            label: 'ANGELS',

            backgroundColor: "rgba(255,105,180,0.5)",

            data: data_viewer

        }],

      

    };

    


    function chart1(){

        var ctx1 = document.getElementById("canvas1").getContext("2d");

        var myBar1 = new Chart(ctx1, {
         

            type: 'horizontalBar',

            data: barChartData1,

            options: {

                elements: {

                    rectangle: {

                        borderWidth: 2,

                        borderColor: 'rgb(169, 169, 169)',

                        borderSkipped: 'bottom'

                      

                    }

                },

                scales: {
                xAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            },



                
                responsive: true,

                title: {

                    display: true,

                    text: 'RATING CHART'

                }

            }


        });


    };


    
    
</script>


<br>

<form action="done" method="get" accept-charset="utf-8"> 

<div class="container">

    <div class="row">

        <div class="col-md-7">

            <div class="panel panel-default">

                <div class="panel-heading">TOP 10</div>

                <div class="panel-body">

                <div class="row">

                <section class="col-md-12">

                    <canvas id="canvas1" height="700" width="950" >
                        
                

                    </canvas>

                    </section>

                    <section class="col-md-2">
                   
                    

                    </section>
               </div>

                </div>

            </div>

        </div>
        <section class="col-md-offset-1 col-md-4">
        <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">

<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">

<ul style="padding:0px;  font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(data_click1) </script></li>
<li>Rank 2 : <script> document.writeln(data_click2) </script></li>
<li>Rank 3 : <script> document.writeln(data_click3) </script></li>
<li>Rank 4 : <script> document.writeln(data_click4) </script></li>
<li>Rank 5 : <script> document.writeln(data_click5) </script></li>
</ul>

</section>
</div>

</div>
       <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section  class="col-md-offset-1">

<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(data_viewer1) </script></li>
<li>Rank 2 : <script> document.writeln(data_viewer2) </script></li>
<li>Rank 3 : <script> document.writeln(data_viewer3) </script></li>
<li>Rank 4 : <script> document.writeln(data_viewer4) </script></li>
<li>Rank 5 : <script> document.writeln(data_viewer5) </script></li>
</ul>

</section>
</div>
</div>
</div>

</section>

    </div>

</div>

</form>

  <!--graph goes here !--></div>
</div>


<div id="myNav2" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
  <div class="overlay-content">

<script>

    var year2 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
    var secondfemale = <?php echo $secondfemale; ?>;
    var secondfemale1 = <?php echo $secondfemale1; ?>;
    var secondfemale2 = <?php echo $secondfemale2; ?>;
    var secondfemale3= <?php echo $secondfemale3; ?>;
    var secondfemale4 = <?php echo $secondfemale4; ?>;
    var secondfemale5 = <?php echo $secondfemale5; ?>;
    var secondmale = <?php echo $secondmale; ?>;
    var secondmale1 = <?php echo $secondmale1; ?>;
    var secondmale2 = <?php echo $secondmale2; ?>;
    var secondmale3 = <?php echo $secondmale3; ?>;
    var secondmale4 = <?php echo $secondmale4; ?>;
    var secondmale5 = <?php echo $secondmale5; ?>;

    
   

    var barChartData2 = {

        labels: year2,

        datasets: [{

            label: 'STUDS',

            backgroundColor: "rgba(65,105,225,0.5)",

            data: secondmale

        }, {

            label: 'ANGELS',

            backgroundColor: "rgba(255,105,180,0.5)",

            data: secondfemale

        }],

      

    };

function chart2(){

        var ctx2 = document.getElementById("canvas2").getContext("2d");

        var myBar2 = new Chart(ctx2, {
         

            type: 'horizontalBar',

            data: barChartData2,

            options: {

                elements: {

                    rectangle: {

                        borderWidth: 2,

                        borderColor: 'rgb(169, 169, 169)',

                        borderSkipped: 'bottom'

                      

                    }

                },

                scales: {
                xAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            },



                
                responsive: true,

                title: {

                    display: true,

                    text: 'RATING CHART'

                }

            }


        });


    };
    
setTimeout(chart2, 30)
</script>

<br>

<form action="done" method="get" accept-charset="utf-8"> 

<div class="container">

    <div class="row">

        <div class="col-md-7">

            <div class="panel panel-default">

                <div class="panel-heading">TOP 10</div>

                <div class="panel-body">

                <div class="row">

                <section class="col-md-12">

                    <canvas id="canvas2" height="700" width="950" >
                        
                

                    </canvas>

                    </section>

                    <section class="col-md-2">
                   
                    

                    </section>
               </div>

                </div>

            </div>

        </div>
        <section class="col-md-offset-1 col-md-4">
        <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">

<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">

<ul style="padding:0px;  font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(secondmale1) </script></li>
<li>Rank 2 : <script> document.writeln(secondmale2) </script></li>
<li>Rank 3 : <script> document.writeln(secondmale3) </script></li>
<li>Rank 4 : <script> document.writeln(secondmale4) </script></li>
<li>Rank 5 : <script> document.writeln(secondmale5) </script></li>
</ul>

</section>
</div>

</div>
       <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section  class="col-md-offset-1">

<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(secondfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(secondfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(secondfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(secondfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(secondfemale5) </script></li>
</ul>

</section>
</div>
</div>
</div>

</section>

    </div>

</div>

</form>

  <!--graph goes here !--></div>
</div>

<div id="myNav3" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">×</a>
  <div class="overlay-content">

<script>

    var year3 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
    var thirdfemale = <?php echo $thirdfemale; ?>;
    var thirdfemale1 = <?php echo $thirdfemale1; ?>;
    var thirdfemale2 = <?php echo $thirdfemale2; ?>;
    var thirdfemale3 = <?php echo $thirdfemale3; ?>;
    var thirdfemale4 = <?php echo $thirdfemale4; ?>;
    var thirdfemale5 = <?php echo $thirdfemale5; ?>;
    var thirdmale = <?php echo $thirdmale; ?>;
    var thirdmale1 = <?php echo $thirdmale1; ?>;
    var thirdmale2 = <?php echo $thirdmale2; ?>;
    var thirdmale3 = <?php echo $thirdmale3; ?>;
    var thirdmale4 = <?php echo $thirdmale4; ?>;
    var thirdmale5 = <?php echo $thirdmale5; ?>;

    
   

    var barChartData3 = {

        labels: year3,

        datasets: [{

            label: 'STUDS',

            backgroundColor: "rgba(65,105,225,0.5)",

            data: thirdmale

        }, {

            label: 'ANGELS',

            backgroundColor: "rgba(255,105,180,0.5)",

            data: thirdfemale

        }],

      

    };

   function chart3() {

        var ctx3 = document.getElementById("canvas3").getContext("2d");

        var myBar3 = new Chart(ctx3, {
         

            type: 'horizontalBar',

            data: barChartData3,

            options: {

                elements: {

                    rectangle: {

                        borderWidth: 2,

                        borderColor: 'rgb(169, 169, 169)',

                        borderSkipped: 'bottom'

                      

                    }

                },

                scales: {
                xAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            },



                
                responsive: true,

                title: {

                    display: true,

                    text: 'RATING CHART'

                }

            }


        });


    };
    
setTimeout(chart3, 30);
</script>

<br>

<form action="done" method="get" accept-charset="utf-8"> 

<div class="container">

    <div class="row">

        <div class="col-md-7">

            <div class="panel panel-default">

                <div class="panel-heading">TOP 10</div>

                <div class="panel-body">

                <div class="row">

                <section class="col-md-12">

                    <canvas id="canvas3" height="700" width="950" >
                        
                

                    </canvas>

                    </section>

                    <section class="col-md-2">
                   
                    

                    </section>
               </div>

                </div>

            </div>

        </div>
        <section class="col-md-offset-1 col-md-4">
        <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">

<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">

<ul style="padding:0px;  font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(thirdmale1) </script></li>
<li>Rank 2 : <script> document.writeln(thirdmale2) </script></li>
<li>Rank 3 : <script> document.writeln(thirdmale3) </script></li>
<li>Rank 4 : <script> document.writeln(thirdmale4) </script></li>
<li>Rank 5 : <script> document.writeln(thirdmale5) </script></li>
</ul>

</section>
</div>

</div>
       <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section  class="col-md-offset-1">

<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(thirdfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(thirdfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(thirdfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(thirdfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(thirdfemale5) </script></li>
</ul>

</section>
</div>
</div>
</div>

</section>

    </div>

</div>

</form>

  <!--graph goes here !--></div>
</div>

<div id="myNav4" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav4()">×</a>
  <div class="overlay-content">

<script>

    var year4 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
    var fourthfemale = <?php echo $fourthfemale; ?>;
    var fourthfemale1 = <?php echo $fourthfemale1; ?>;
    var fourthfemale2 = <?php echo $fourthfemale2; ?>;
    var fourthfemale3 = <?php echo $fourthfemale3; ?>;
    var fourthfemale4 = <?php echo $fourthfemale4; ?>;
    var fourthfemale5 = <?php echo $fourthfemale5; ?>;
    var fourthmale = <?php echo $fourthmale; ?>;
    var fourthmale1 = <?php echo $fourthmale1; ?>;
    var fourthmale2 = <?php echo $fourthmale2; ?>;
    var fourthmale3 = <?php echo $fourthmale3; ?>;
    var fourthmale4 = <?php echo $fourthmale4; ?>;
    var fourthmale5 = <?php echo $fourthmale5; ?>;

    
   

    var barChartData4 = {

        labels: year4,

        datasets: [{

            label: 'STUDS',

            backgroundColor: "rgba(65,105,225,0.5)",

            data: fourthmale

        }, {

            label: 'ANGELS',

            backgroundColor: "rgba(255,105,180,0.5)",

            data: fourthfemale

        }],

      

    };

    function chart4() {

        var ctx4 = document.getElementById("canvas4").getContext("2d");

        window.myBar4 = new Chart(ctx4, {
         

            type: 'horizontalBar',

            data: barChartData4,

            options: {

                elements: {

                    rectangle: {

                        borderWidth: 2,

                        borderColor: 'rgb(169, 169, 169)',

                        borderSkipped: 'bottom'

                      

                    }

                },

                scales: {
                xAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            },



                
                responsive: true,

                title: {

                    display: true,

                    text: 'RATING CHART'

                }

            }


        });


    };

 //   var nav4=document.getElementById("myNav4")

  //  nav4.onclick = function(){
    
setTimeout(chart4, 30)
//}
</script>

<br>

<form action="done" method="get" accept-charset="utf-8"> 

<div class="container">

    <div class="row">

        <div class="col-md-7">

            <div class="panel panel-default">

                <div class="panel-heading">TOP 10</div>

                <div class="panel-body">

                <div class="row">

                <section class="col-md-12">

                    <canvas id="canvas4" height="700" width="950" >
                        
                

                    </canvas>

                    </section>

                    <section class="col-md-2">
                   
                    

                    </section>
               </div>

                </div>

            </div>

        </div>
        <section class="col-md-offset-1 col-md-4">
        <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">

<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">

<ul style="padding:0px;  font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(fourthmale1) </script></li>
<li>Rank 2 : <script> document.writeln(fourthmale2) </script></li>
<li>Rank 3 : <script> document.writeln(fourthmale3) </script></li>
<li>Rank 4 : <script> document.writeln(fourthmale4) </script></li>
<li>Rank 5 : <script> document.writeln(fourthmale5) </script></li>
</ul>

</section>
</div>

</div>
       <div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section  class="col-md-offset-1">

<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(fourthfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(fourthfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(fourthfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(fourthfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(fourthfemale5) </script></li>
</ul>

</section>
</div>
</div>
</div>

</section>

    </div>

</div>

</form>

  <!--graph goes here !--></div>
</div>



    <!-- Brand and toggle get grouped for better mobile display -->
<nav id="in" class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    
    <!-- /.navbar-collapse -->
    
    <div class="row">
  <section id="aks" class="col-md-1">
    AksOut~
  </section>
  <section class="col-lg-6 col-sm-12 col-xs-12 col-md-6 col-lg-offset-1 col-md-offset-3"><span id="know"><u>Know your collegemates better...</u></span></section>
      
    </div>
    
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu<span class="glphicon glyphicon-chevron down"></span></button>
          
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="defaultNavbar1">
          <ul class="nav navbar-nav">
            <li id="menu"><a href="crush.html">MyPlace</a></li>
            <li id="menu"><a href="#">Interact</a></li>
            <li id="menu"><a href="#">Happenings</a></li>
            <li id="menu"><a href="#">News</a></li>
            <li id="menu"><a href="#">reports</a></li>
            <li id="menu"><a href="#">ThinkTank</a></li>
            <li id="menu"><a href="#">TalentPool</a></li>
            

            
          </ul>
          <form class="navbar-form navbar-left" role="search">
          <!--search bar-->
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Search</button>
          </form>
         
               
           
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
</nav>

<div class="container-fluid">
<div class="row">
  <br><div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
      <div class="col-lg-3"></div>
      <div class="col-lg-3"></div>
      <section class="col-lg-1" id="svg"></section>
      <section class="col-lg-3"><label id="label1">score</label></section>
      <section class="col-lg-2"><input type="text"></section>
    </div></br>
</div>

<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-1 col-lg-offset-5">
      <button type="button" class="btn btn-sm btn-default" id="messages" >Friends</button>
    </div>
    <div class="col-lg-1">
      <div class="btn-group">
        <button type="button" id="messages"  class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Chat<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li role="presentation" class="dropdown-header">Dropdown header 1</li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Link</a></li>
          <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled Link</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated Link</a></li>
        </ul>
      </div>
    </div>
    <div class="col-lg-1">
      <div class="btn-group">
        <button id="messages"  type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Messages<span class="caret" ></span></button>
        <ul class="dropdown-menu" role="menu">
          <li role="presentation" class="dropdown-header">Dropdown header 1</li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Link</a></li>
          <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled Link</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated Link</a></li>
        </ul>
      </div>
    </div>
  </div>
<div class="row">
  <div class="col-lg-6"></div>
  <div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-lg-3"> <span id="span1" style="font-size:30px;cursor:pointer;" onclick="openNav1()">
  <br><div><img id="img1" src="pic/1 (1).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
  <div class="col-md-3 col-lg-offset-2"> <span id="span2" style="font-size:30px;cursor:pointer;" onclick="openNav2()">
    <br><div><img id="img2" src="pic/1 (44).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
</div>
<div class="row">
<div class="col-md-3 col-lg-offset-1"> <span id="span3" style="font-size:30px;cursor:pointer;" onclick="openNav3()">
  <br><div><img id="img3" src="pic/1 (45).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
  <div class="col-md-3 col-lg-offset-2"> <span id="span4" style="font-size:30px;cursor:pointer;" onclick="openNav4()">
    <br><div><img id="img4" src="pic/1 (46).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
  <div class="col-md-3">
    <div class="panel panel-default">
      <div class="panel-heading" id="panel">
        <h3 class="panel-title" id="have" >Groups</h3>
      </div>
      <div class="panel-body" id="grpfoot">
      <div class="col-md-4"><img src="images/ImgResponsive_Placeholder.png" class="img-circle img-responsive" alt="Placeholder image"></div>
      <div class="col-md-4 col-lg-8">
        
        <input type="text" name="textfield" id="textfield">
      </div>
      <div></div>
      </div>
      <div id="see" class="panel-footer">
              <button type="button" class="btn btn-sm btn-default">SeeMore>></button>
        <div class="pull-right">
        <button type="button" class="btn btn-sm btn-default">Create </button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-6"></div>
</div>


<script>
function openNav1() {
    document.getElementById("myNav1").style.width = "100%";
    chart1();

}

function closeNav1() {
    document.getElementById("myNav1").style.width = "0%";
}
</script>

<script>
function openNav2() {
    document.getElementById("myNav2").style.width = "100%";
    chart2();
}

function closeNav2() {
    document.getElementById("myNav2").style.width = "0%";
}
</script>

<script>
function openNav3() {
    document.getElementById("myNav3").style.width = "100%";
    chart3();
}

function closeNav3() {
    document.getElementById("myNav3").style.width = "0%";
}
</script>

<script>
function openNav4() {
    document.getElementById("myNav4").style.width = "100%";
    chart4();
}

function closeNav4() {
    document.getElementById("myNav4").style.width = "0%";
}
</script>

EDIT: I think overlay is loaded automatically.

Answer 1

When the browser comes across a <script> block, it will run what's inside the <script> tag, even if there is no window.load function.

Your browser is executing this line:

setTimeout(chart1, 30)

Once the timeout expires, it runs your chart1 and builds the chart.

Remove that line and this will no longer happen without user interaction.