Geek Answers Handbook

Error: loading overlay automatically (bootstrap) (laravel 5.2)

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

It should be opened only by clicking (here, when clicking on the pic link)

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 the overlay loads automatically.
+6
source share
3 answers

In addition to the Beetlejuice correct regarding timeouts loading diagrams , it looks like you are following the full-screen overlay guide for w3schools , but only in part: the overlay style from the tutorial is missing in your sample code (and your JSFiddle).

The large “Add CSS” section and the “Add JavaScript” section are what actually hide the overlay and make it work. If you want the overlay to be hidden, I suggest you complete the full tutorial, not just a small piece of HTML at the top.

This is not related to Bootstrap or Laravel.

Edited JSFiddle with CSS tutorial copied to :

 /* 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; } }
+2
source

When the browser falls into the <script> block, it will run what is inside the <script> , even if there is no window.load function.

Your browser executes this line:

 setTimeout(chart1, 30)

As soon as time runs out , it starts your chart1 and builds a chart.

Delete this line and this will not happen without user interaction.

+3
source

You can put all the code you wrote directly in the <script> in a function, for example show_charts (), like this:

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

and then you can link it using the onclick function for any item you want to click to load charts, for example:

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

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

+2
source

More articles:


All Articles