0

I made a test site with bootstrap 3(https://dylantn.github.io/Dusic/)in this site the hamburger menu doesnt work, but when i open the local file, the hamburger menu works, can anyone pls find anything which can be useful to this specific matter

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no" charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="ind.css">
  <title>Dusic-The Free Music Player Worldwide.</title>
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
              <span class="sr-only"><font face="arial"></font>Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          <a href="#" class="navbar-brand"><font face="arial"><span  class="navimg"><img src="dusic4.gif"  width="80" length="80" alt=""></span></font></a>
      </div>
          <div class="collapse navbar-collapse" id="bs-nav-demo">
              <ul class="nav navbar-nav">
                  <li><a href="#"><font face="arial">About</font></a></li>
                  <li><a href="#"><font face="arial">Contact</font></a></li>
              </ul>
  
              <ul class="nav navbar-nav navbar-right">
                  <li><a href="#"><font face="arial">Sign Up</font></a></li>
                  <li><a href="#"><font face="arial">Login</font></a></li>
              </ul>
          
          </div>
              
      </div>
  </nav>
  </div>
    <div class="container">
    <div class="jumbotron">
      <div class="row">
        <div class="col-lg-12">
          <div id="content">
          <h1><b><a href="#"><img src="dusic4.gif"  width="250" length="250"></a></b></h1>
          <h3><b>The Best Collection of Music That Ain't Worldwide...... MAN</b></h3>
          <hr>
        </div>
      </div>
        </div>
      </div>
    </div>

    <div class="container">
    <h1>What is the purpose of Dusic?</h1>
    <p>Our Society already has many music players, but i thought we need another one to clutter your life, plus it is Free!!</p>
    <br><h3>IT IS FREE!! THAT IS THE ONLY COOL FEATURE ABOUT THIS THAT SEPERATES THIS FROM EVERYTHING ELSE<br>YIPEEEEE!</h3>  
  </div>
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body>
</html>
DylxnTN
  • 1
  • 5

1 Answers1

0

What seems to be the problem here is with jquery which says blocked loading mixed active content. enter image description here

I got this answer from this question:Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox?

What is Mixed Content?

When a user visits a page served over HTTP, their connection is open for eavesdropping and man-in-the-middle (MITM) attacks. When a user visits a page served over HTTPS, their connection with the web server is authenticated and encrypted with SSL and hence safeguarded from eavesdroppers and MITM attacks.

However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. When an HTTPS page has HTTP content, we call that content “mixed”. The webpage that the user is visiting is only partially encrypted, since some of the content is retrieved unencrypted over HTTP. The Mixed Content Blocker blocks certain HTTP requests on HTTPS pages.

The resolution, in my case, was to simply ensure the jquery includes were as follows (note the removal of the protocol):

<link rel="stylesheet" href="//code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css" type="text/css">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>

Note that the temporary 'fix' is to click on the 'shield' icon in the top-left corner of the address bar and select 'Disable Protection on This Page', although this is not recommended for obvious reasons.

UPDATE: This link from the Firefox (Mozilla) support pages is also useful in explaining what constitutes mixed content and, as given in the above paragraph, does actually provide details of how to display the page regardless:

Most websites will continue to work normally without any action on your part.

If you need to allow the mixed content to be displayed, you can do that easily:

Click the shield icon Mixed Content Shield in the address bar and choose Disable Protection on This Page from the dropdown menu.

The icon in the address bar will change to an orange warning triangle Warning Identity Icon to remind you that insecure content is being displayed.

To revert the previous action (re-block mixed content), just reload the page.

Link to this post:https://blog.mozilla.org/tanvi/2013/04/10/mixed-content-blocking-enabled-in-firefox-23/

By the way i tried the code you posted above and copied in codepen and ran it, worked perfectly fine.