CSS and Javascript aren't working inside my localhost PHP folder

Question

Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.

My PHP code:

<?php
include('database.php');
session_start();

if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}

?>

<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
crossorigin="anonymous">
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" 
crossorigin="anonymous">
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
crossorigin="anonymous"></script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script 
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>

</head>

<body>

<!-- Sidebar -->
   <div id="wrapper">
    <div class="overlay"></div>

    <!-- Sidebar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" 
role="navigation">
        <ul class="nav sidebar-nav">
            <li class="sidebar-brand">
                <a href="Main.html">
                   Eventses
                </a>
            </li>
            <li>
                <a href="Main.html"><span class="glyphicon glyphicon-th-list">Main</span></a>
            </li>
            <li>
                <a href="Profile.html"><span class="glyphicon glyphicon-user">Profile</span></a>
            </li>
            <li>
                <a href="Events.html"><span class="glyphicon glyphicon-glass">Events</span></a>
            </li>

            <li>
                <a href="Settings.html"><span class="glyphicon glyphicon-cog">Settings</span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-envelope">Messages</span></a>
            </li>
            <li>
                <a href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
        </button>

    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

 <!-- Main body -->
<div class="container" align="right">

        <div class="col-sm-10">
            <div class="bs-calltoaction bs-calltoaction-primary">
                <div class="row">
                    <div class="col-md-9 cta-contents">
                        <h2 class="cta-title">Event Title</h2>
                        <center><img src="default.png" alt="pic"></center>
                        <div class="cta-desc">
                        <p3>Insert info about event</p3>

                        </div>
                    </div>
                    <a href=Analysis.html><button type="button" class="btn btn-primary btn-sm">Analyse</button></a>
                 </div>
            </div>

            <div class="bs-calltoaction bs-calltoaction-primary">
                <div class="row">
                    <div class="col-md-9 cta-contents">
                        <h2 class="cta-title">Event Title</h2>
                        <center><img src="default.png" alt="pic"></center>
                        <div class="cta-desc">
                        <p3>Insert info about events</p3>
                        </div>
                    </div>
                   <a href=Analysis.html><button type="button" class="btn btn-primary btn-sm">Analyse</button></a>
                 </div>
            </div>

        </div>
    </div>


</body>

</html>

<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
  overlay = $('.overlay'),
 isClosed = false;

trigger.click(function () {
  hamburger_cross();      
});

function hamburger_cross() {

  if (isClosed == true) {          
    overlay.hide();
    trigger.removeClass('is-open');
    trigger.addClass('is-closed');
    isClosed = false;
  } else {   
    overlay.show();
    trigger.removeClass('is-closed');
    trigger.addClass('is-open');
    isClosed = true;
  }
}

$('[data-toggle="offcanvas"]').click(function () {
    $('#wrapper').toggleClass('toggled');
  });  
});

</script>

Answer 1

As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.

CSS and Javascript aren't working inside my localhost PHP folder

Question

1 answers

solution1
0 2017-06-02 13:53:00

CSS and Javascript aren't working inside my localhost PHP folder

Question

1 answers

solution1 0 2017-06-02 13:53:00

solution1
0 2017-06-02 13:53:00