Dobob Dobob - 4 months ago 80
CSS Question

Local Bootstrap nav-tab works, but not remotely from github pages

I am getting a weird bug where if I drag and drop my index.html into Firefox or chrome, the bootstrap nav-tab works and the tabs transition the tab-content when I click between the "Art" and "Resume" tab. But if I push my web page to Github pages and visit the page through Github and then click the other "Art" tab, it won't work. The link will change to "#Art" but the tab-content won't transition.

The Github page.

As you can see the tab doesn't switch.

The code is below:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style/w3.css">
<link rel="stylesheet" href="style/darkly.css">
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/socialbuttons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<ul class="nav nav-tabs">
<li id="resume-tab" class="active"><a data-toggle="tab" href="#Resume">Resume</a></li>
<li id="art-tab"><a data-toggle="tab" href="#Art">Art</a></li>
</ul>

<div class="tab-content main-body">

<div id="Resume" class="tab-pane fade in active">
<div class="texts container">
<p>resume tab</p>
</div> <!--close container-->
</div><!--close Resume-->


<div id="Art" class="tab-pane fade images">
<div class="container">
<p>art tab</p>
</div><!--close container-->
</div> <!--close images -->
</div> <!--close tab-content main-body -->

</body>
</html>


If you save the .html file and drag it into a browser, the tab switching works, but if I host it on Github pages, the tab switching breaks.

I followed the turtorial on w3 school:

http://www.w3schools.com/bootstrap/tryit.aspfilename=trybs_tabs_dynamic&stacked=h

Answer
Mixed Content: The page at 'https://theonlywei.github.io/' was loaded over 
HTTPS, but requested an insecure script 
'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'. This 
request has been blocked; the content must be served over HTTPS.

It helps to open the console sometimes, you need to use:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

So you have to find that <script> tag where you import bootstrap.js and correct the url to https

Comments