The Bootstrap nav-tab functions perfectly on a local server, but unfortunately does not work when hosted remotely

UPDATE: Issue resolved so I have removed the Github link. It turns out that Github pages require a secure https connection for all linked scripts. Always remember to check the console!

I encountered an unusual bug where the Bootstrap nav-tab functionality worked fine when I dragged and dropped my index.html file into Firefox or Chrome. The tabs transitioned between the "Art" and "Resume" tab as expected. However, when I pushed the webpage to Github pages and accessed it through Github, clicking on the "Art" tab did not trigger the tab content transition even though the URL changed to "#Art".

The code snippet is provided 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>Content of Resume tab here.</p>
            </div>
        </div>

        <div id="Art" class="tab-pane fade images">
            <div class="container">
                <p>Content of Art tab displayed here.</p>          
            </div>
        </div>
    </div>

  </body>
</html>

If you save the .html file and view it directly in the browser, the tab switching works perfectly. However, hosting it on Github pages causes the tab switching feature to malfunction.

I followed the tutorial provided by w3 school at the following link:

http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

Answer №1

When loading a page from 'https://theonlywei.github.io/', there was a mixed content issue. The page was loaded over HTTPS, but it requested an insecure script located at 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'. As a result, the request was blocked as the content must be served over HTTPS.

If you encounter this issue, remember to check your console and ensure that you are using:

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

To resolve this problem, locate the <script> tag where you import bootstrap.js and update the URL to use https.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing lightbox JS to produce a centralized overlay across the entire webpage

Currently in the process of redesigning a gallery for a client at www.stagecraft.co.uk/gallery.html I am encountering some challenges with my overlay. I want it to be centered and on top of any divs that are currently in view, as new images from the clie ...

Error in Rails due to a Javascript issue

My journey with learning Javascript started by following an easy game tutorial on RoR. I encountered an error in index.html.erb file which led me to a helpful video tutorial here. <script> var ctx, canvas; var data; window.onload = fun ...

What is the reason behind my difficulty in opening my dialog box modally using JavaScript?

I am looking to keep a dialog open while data is being fetched from the server. Here is the code I have written: (async()=>{ document.getElementById("dialog").showModal(); if(condition1 is true){ await server_call1(); } ...

Echo command fails to work with location.href

I am facing a small issue with my PHP echo. I have a JavaScript link function that is not working because the HTML code shows this type of link onclick="location.href="http://www.link.com/";". It's clear that this syntax won't work. However, if w ...

What are the best practices for avoiding text wrapping around a DIV?

I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help... Here& ...

What are the steps to set up Redis Store in my production environment?

I am currently in the process of setting up Redis as a session store, but for some reason it's not functioning properly. I have integrated passport.js and express-flash, however when I attempt to run the current Redis setup, it fails to work: var ses ...

REST, hypertext, and clients other than web browsers

I'm struggling to understand how a REST API can be both hypertext driven, as explained in this article, and still be machine readable. Let's say I create an API where one endpoint lists the contents of a collection. GET /api/companies/ When the ...

2 mistakes: (Uncaught ReferenceError: require isn't defined) & (npm ERR! script missing: start)

Issue #1: Environment Variables I am facing a problem with my JavaScript files app.js (main) and request.js. Both files are at the same level in the root directory, just like index.html. The request.js file contains process.env.APP_KEY. I attempted to i ...

Can CSS be used to dynamically change the color of an element based on a specific value?

Is it possible to dynamically change the background color of table cells using only CSS based on their values? For example, I am looking to achieve a similar effect as in Excel with conditionally formatted values: https://i.stack.imgur.com/6BsLB.png If ...

Leveraging AJAX to assist in PHP for data parsing

I am currently exploring the world of AJAX and grappling with a unique situation. I am in the process of developing an HTML app that will be integrated into a mobile application using PhoneGap. The main objective of my project is for the HTML page to con ...

How can I modify the color in vue-google-chart when a filter option is selected?

I created a stack column chart with a filter that changes the color to blue when selected. Here is my Vue app: https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue I expected the selected color to match the color in the ...

Utilizing jQuery to target a specific element by its ID within a function parameter

I am trying to work with this function: function doSomething(elementID) { $("div").append("<p id='"+ elementID +"'> A paragraph</p>"); /* It seems that the current approach is incorrect as it uses a selector with th ...

An easy guide to sorting outcomes using JSON

I have JSONResults in my Controller that contains all the data from a table. On the client's HTML detail view page, I am using JavaScript to fetch this data. How do I extract data from JSON where the client name is equal to klID (this is a JSON string ...

Enhance Your Browsing Experience with this Chrome Extension for Page Interactions

Recently, I came across Chrome extensions and have been intrigued by their functionality. One question that has been on my mind is: how can I programmatically trigger a button click when the extension runs? For instance, there is a button with the id &apos ...

There was an error message saying "Unable to locate property 'getElementById' in undefined"

I am facing an issue with a jQuery filter function, and the error message it's showing is: Cannot read property 'getElementById' of undefined function CheckFilter() { var input, filter, table, tr, td, i, searchFilter; input = ...

Display the webpage exclusively when the application has been set with `app.use('/api')` in Express 4

Here is what I currently have: app.js ... var api = require('./routes/api'); app.use('/', api); app.use('/api', api); ./routes/api ... var router = express.Router(); router.get('/', passport.authenticate(' ...

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

Modify the animation on Material UI Autocomplete with an underline effect

In my project, I am utilizing a Material UI Autocomplete component for the "Faculdade" field. Nonetheless, I have observed that the animation/transition effect when this component is focused involves spreading from the middle outwards. I desire the animati ...

What is the best way to ensure that all rows in flexbox have the same number and dimensions as the first row?

My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean: If there are 3 sections, the center of the text in each section should be at fifths of the webpage width. This is ...

Center align the label and textbox using CSS in a horizontal arrangement

Is there a way to center the label text within the div? My desired outcome is: ----------- Name: | textbox | ----------- For a demo, check out this code: http://jsfiddle.net/53ALd/2053/ ...