I am trying to hide the contents of the page if the user is not logged in, everything is now hidden except the nav. It doesn’t apply the css code that I used.
JavaScript
x
<?php include 'includes/connection.php'; if(!isset($_SESSION['student_id'])){ echo '<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>'; echo '<style type="text/css"> .display-custom { display: none; } nav { display: none; } </style>'; echo '<script type="text/javascript">'; echo 'setTimeout(function () { swal({ closeOnClickOutside: false, closeOnEsc: false, title: "Access Failed", text: "You are not yet logged in! Redirecting to Login...", icon: "warning", button: false, timer: 3000 }).then(function(result) { window.location = "Login.php?login=notactive"; });'; echo '}, 200);</script>'; // echo "<script>alert('You are not logged in!'); location.href='Login.php';</script>"; } else{ echo '<script type="text/javascript"> $(".display-custom").css("display", "block"); </script>'; $expire = 365*24*3600; // We choose a one year duration setcookie(session_name(),session_id(),time()+$expire); // echo "<script>alert('You are already Logged in!'); location.href='Home.php';</script>"; }?><!DOCTYPE html><html lang="en"> <head> <title>Repository Home</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="shortcut icon" href="files/Images/logoapp.png"> <link rel="stylesheet" href="css/style.css"> <!-- Font Awesome JS --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <style type="text/css"> /* .swal-overlay { background-color: white; } */ </style> </head> <body> <!-- Navbar Header --> <nav class="navbar fixed-top navbar-expand-sm navbar-custom display-custom"> <a href="index.php" target="_blank" class="navbar-brand ml-3"><img src="#" class="img-responsive" width="35" height="35"> | Title Page </img></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon" role="button" ><i class="fa fa-bars" aria-hidden="true" style="font-size: 25px; margin: 0 auto;"></i></span> </button> <div id="navbarmenu" class="collapse navbar-collapse"> <ul class="navbar-nav justify-content-center" style="width: 100%"> <li class="nav-item active px-3"> <a href="Home.php" class="nav-link text-nowrap"><i class="fas fa-home"></i> Home</a> </li> <ul class="nav navbar-nav"> <li class="nav-item dropdown px-3"> <a href="repositorymanagement.php" class="nav-link text-nowrap"><i class="fas fa-laptop"></i> Research Repository </a> </li> </ul> <!-- <li id="irene"class="nav-item px-3"> <a href="../admin/repositorymanagement.php" class="nav-link text-nowrap"> Repository Management </a> </li> --> <li id="irene"class="nav-item px-3"> <a href="requestformmanagement.php" class="nav-link text-nowrap" ><i class="fas fa-newspaper"></i> Request Form Management </a> </li> </ul> <ul class="nav navbar-nav"> <li class="nav-item dropdown px-3 mr-3"> <a class="nav-link text-nowrap" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-user"></i> <?php include 'helper/current_user.php'; ?> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#"><i class="fas fa-user-cog"></i> Edit Profile</a> <a class="dropdown-item" href="#"><i class="fas fa-user-lock"></i> Edit Password</a> <a class="dropdown-item" href="logout_student.php"><i class="fas fa-sign-out-alt"></i> Logout</a> </div> </li> </ul> </div> </nav> <div class="container-sm display-custom" style="padding-top: 100px;"> <div class="container-sm text-center"> <div class="col-sm"> <span id="HeaderBanner"> EMPOWERING WHAT'S NEXT </span> </div> </div> <div class="container-fluid" style="height: auto;width: 100%;"> <div class="row"> <div id="IntroductionParagraph" class="col-sm" style="margin-top: 50px;"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia at aspernatur veniam odit autem, earum explicabo maxime facilis molestiae hic quidem. Laboriosam dolores accusantium consequuntur, odio nulla in deserunt necessitatibus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum ducimus laudantium labore corporis voluptatem distinctio est praesentium ex. Sed est excepturi quidem labore blanditiis error voluptatibus facilis ipsum nemo consequatur? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, totam alias voluptatum aperiam libero ipsa voluptatem perspiciatis. Quas doloremque dolore reiciendis tenetur accusantium ullam corporis adipisci natus officiis non? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, repudiandae sint consectetur eius nostrum exercitationem quidem magnam ratione obcaecati maiores iure voluptatum laudantium minus nulla illo. Perferendis eligendi nam aspernatur. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime. </p> </div> <div class="col-sm"> <img src="https://i.ibb.co/mbPvK7Q/women-inoff.png" class="img-responsive" style="width: 100%; height: auto;"> </div> </div> </div> </div> <!-- #START# -----------ADDING OF MODAL ------------------# --> <!-- Large modal --> <script type="text/javascript" src="./js/responsive_modal.js"> </script> <!-- #END# -------------ADDING OF MODAL ------------------# --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body></html> as you can see in the code I have added .dipsplay-custom: none; if the user session is not set
so in every parent I added display-custom the thing is the rest is displaying none, but not the nav. as you can see in the code as well I also tried displaying nav to none.
Advertisement
Answer
How about not printing the elements instead? Hiding the elements but still having them in the DOM makes it still available just by making the display: block.
Try wrapping the elements and only show them when the session is set, for example:
JavaScript
<?php if(isset($_SESSION['student_id'])){ <li id="irene"class="nav-item px-3"> <a href="requestformmanagement.php" class="nav-link text-nowrap" ><i class="fas fa-newspaper"></i> Request Form Management </a> </li> }?>