Javascript code is not functioning properly (library missing?)

I recently upgraded my Bootply.com account in order to download a snippet that I believed would work perfectly. However, it seems like there's something missing here. Can anyone help me figure out what's wrong with the original Bootply.com snippet?

When I run my index.html file on Chrome, this is how it looks: Imgur link.

Here are the includes from my index.html:

   <!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Bootstrap3 Wizard w/ FuelUX</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="css/styles.css" rel="stylesheet">
    </head>

Footer section:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>

Answer №1

Replace URLs that start with // with https://<url>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Bootstrap3 Wizard w/ FuelUX</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="css/styles.css" rel="stylesheet">
    </head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>

Footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>

The reason behind this change is due to viewing the HTML file locally. If you run it on a web server where the protocol is either http:// or https://, it will work properly.

Update:

Continue the discussion in this thread.

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

Is it possible to harness the power of the Gmail SMTP server in conjunction with WAMP or XAMPP to send emails locally using the mail

I encountered a lot of outdated posts while searching for solutions. In the php.ini file, you can authenticate using: auth_username auth_password Therefore, I attempted to incorporate this in my php.ini: SMTP = smtp.gmail.com smtp_port = 465 auth_userna ...

What could be causing the .save method in Mongoose not to work properly within a ReactJS environment?

Currently, my setup involves ReactJS and Redux connected to MongoDB using Mongoose. In my Mongoose Schema (user.js), I have defined the schema as follows: var UserSchema = new Schema({ email: { type: String, lowercase: true, unique: true, ...

Move and place, editing tools

Is it possible to create a drag-and-drop editor similar to the one found in the form editor on wufoo.com? ...

What is the significance of $($(this)) in coding jargon

While browsing the internet, I came across a code snippet that includes the following line: if ($($(this)).hasClass("footer_default")) { $('#abc') .appendTo($(this)) .toolbar({position: "fixed"}); } I'm curious ab ...

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

Confusion surrounding the Javascript object prototype (utilizing require.js and three.js)

I'm feeling a bit confused about my understanding of Objects, prototypes, require.js and three.js. Let me illustrate with an example: In Summary: The instance "wee" is derived from "Wee," which acts as a wrapper or monkey patch for THREE... Shouldn& ...

I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire: My current accomplishment: I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy. However, I prefer not to us ...

Tips for updating a CSS class in React JS after a 60-second delay

I am working on a dynamic table that is generated in react JS and has the following structure: <table> <tr className="Green"> // This class will be assigned at different times, like say 10 AM <td>Row 1</td> <td>Row 2 ...

My jqgrid is not loading properly when I start it up. What steps can I take to ensure that data is loaded as

I recently started using the jqgrid plugin and so far everything is working well, except for the issue of data not loading when the grid first initializes. Here is an example:. The data is retrieved from the database, but it only loads after clicking on an ...

Adding a React component using the appendChild method

I need to utilize the following component multiple times. const OnePen = (props) => { return ( <div className="cerd" key={props.ID}> <div className=" card-body"> <h2 className="card-title"&g ...

NextAuth.js in conjunction with nextjs version 13 presents a unique challenge involving a custom login page redirection loop when using Middleware - specifically a

I am encountering an issue with NextAuth.js in Nextjs version 13 while utilizing a custom login page. Each time I attempt to access /auth/signin, it first redirects to /login, and then loops back to /auth/signin, resulting in a redirection loop. This probl ...

Guide on creating a Discord bot using discord.js to send a random message from a predefined list at a specific time within a designated text channel on Discord

Here is an illustration of how a command functions https://i.sstatic.net/53fqU.png Also, here is my main.js file https://i.sstatic.net/jKLPR.png I need some assistance with this. Your help would be greatly appreciated. ...

Issue with AngularJS promise not returning any value in JavaScript

I have been attempting to perform a simple HTTP post in a unit test using Jasmine, but unfortunately, it is not functioning as expected. The application operates smoothly on the web, and I have individually tested various functions, all of which work seaml ...

Hold on until the page is reloaded: React

My current setup includes a React Component that contains a button. When this button is clicked, a sidePane is opened. What I want to achieve is refreshing the page first, waiting until it's completely refreshed, and then opening the sidepane. Below i ...

Enable browser caching for form data when using AJAX to submit

I'm currently working on a web application that relies heavily on AJAX to submit form data. However, I've encountered an issue where I want the browser to cache the user's input for auto-completion in future form fillings. While I know I cou ...

Elements that are sortable will remain in place even after being removed from

In my project, I have created a list with sortable elements that can be deleted by dragging them into a trash bin. However, I am facing an issue where the element remains visible even after being removed. <div class="content-remove" id="content-rem ...

Scrollbar visibility issue

Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...

The function `req.on('end', callback)` in Node.js is not functioning as expected

I am currently working on building a proxy using nodejs. The syntax I am using for sending and receiving https requests and responses works well, but in my project, I have noticed that the response is sometimes larger than expected. This results in req.on( ...

Searching within an Angular component's DOM using JQuery is restricted

Want to incorporate JQuery for DOM manipulation within Angular components, but only want it to target the specific markup within each component. Trying to implement Shadow DOM with this component: import { Component, OnInit, ViewEncapsulation } from &apo ...

Retrieving Image Paths from SQLite Database

I have an image path stored in a SQLite table named images under the column path. I am attempting to retrieve this path and use it as the src attribute for an HTML image. However, my current approach is not yielding the desired result. How can I properly ...