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.

Answer 2

You can put all the code that you have written directly into your <script> tag into a function, say show_charts() like this:

function show_charts()
{
  //All your code over here
}

and then you can associate it with an onclick function to any element you want to be clicked to load the charts, like this:

<img onclick="show_charts()" src="..." />

You can associate this to any element just by adding onclick="show_charts()" to your element tag. Hope this helps

Answer 3

In addition to Beetlejuice being correct about timeouts loading the charts , it looks like you're following the fullscreen overlay tutorial on w3schools , but only in part: the overlay styling from the tutorial is missing from your example code (and your JSFiddle).

The big 'Add CSS' section and the 'Add JavaScript' section is what actually hides the overlay and makes it work. If you'd like the overlay to hide, I suggest following the full tutorial instead of just the small HTML snippet at the top.

This is nothing to do with Bootstrap, or Laravel.

Edited JSFiddle with the tutorial CSS copy-pasted in :

 /* The Overlay (background) */ .overlay { /* Height & width depends on how you want to reveal the overlay (see JS below) */ height: 100%; width: 0; position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; background-color: rgb(0,0,0); /* Black fallback color */ background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ } /* Position the content inside the overlay */ .overlay-content { position: relative; top: 25%; /* 25% from the top */ width: 100%; /* 100% width */ text-align: center; /* Centered text/links */ margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ } /* The navigation links inside the overlay */ .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; /* Display block instead of inline */ transition: 0.3s; /* Transition effects on hover (color) */ } /* When you mouse over the navigation links, change their color */ .overlay a:hover, .overlay a:focus { color: #f1f1f1; } /* Position the close button (top right corner) */ .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }