The JavaScript code that functions properly in Codepen is not functioning on my HTML page

Can you help me understand why this code is working fine in CodePen, but not on my HTML page? I'm unable to identify the error that may have occurred. Any assistance would be greatly appreciated! I suspect there's an issue with connecting some jQuery modules...I've tried fixing it and connecting some of them without success. The CSS and HTML are functioning properly, but I'm unable to display an image.

Ultimately, I've decided to share the entire code from my HTML page. Unfortunately, removing the 's' character in https and changing the way jQuery is connected did not resolve the issue...

Update: Problem solved! The reason the code wasn't working was due to Bootstrap. I needed to link a specific Bootstrap URL to my code, which fixed the problem. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="gallery">
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr01/original-9161-1439317330-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />

        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr08/original-1654-1439317465-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-13354-1439321173-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-25740-1439321209-5.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-9292-1439319916-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr05/original-6710-1439319334-17.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />

        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr02/original-16901-1439320287-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-29345-1439321306-8.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr15/original-20286-1439320376-10.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr02/original-6989-1439317507-15.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr11/original-8867-1439317446-6.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr03/original-22498-1439319085-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    </div>
</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
<style>
   .gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.gallery img {
    width: 100%;
    height: auto;
    transition: 500ms;
    margin-bottom: 10px;
    opacity: 0.8;
    page-break-inside: avoid; /* For Firefox. */
    -webkit-column-break-inside: avoid; /* For Chrome & friends. */
    break-inside: avoid; /* For standard browsers like IE. :-) */
}

.gallery img:hover {
    opacity: 1;
}

.modal-img,.model-vid{
  width:100%;
  height: auto;
}
.modal-body{
  padding:0px;
}

.modal-dialog {
    text-align: center;
    vertical-align: middle;
    display: block;
    top: 10%;
}

.modal-content {
  border: none;
}

@media screen and (max-width: 767px) {
    .gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .gallery div { margin: 0;
        width: 200px;
    }
}

@media screen and (max-width: 479px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .gallery div {
        margin: 0;
        width: 200px;
    }
}

</style>
<script>
   $(document).ready(function () {
  $(".gallery-img").click(function(){
    var t = $(this).attr("src");
    $(".modal-body").html("<img src='"+t+"' class='modal-img'>");
    $("#myModal").modal();
  });
});
</script>
</body>

</html>
javascriptjqueryhtmlcsscoffeescript

Answer №1

Attempting to load secure content on an insecure page could be causing the issue. Consider using https when loading jquery: 

http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Answer №2

Is modal() included in the jQuery library? Shouldn't you load jqueryui or bootstrap to use modal()?

Make sure to check your codepen settings, specifically under javascript, to see the libraries required to be loaded on your html page.

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

Updating the variable in Angular 6 does not cause the view to refresh

I am facing an issue with my array variable that contains objects. Here is an example of how it looks: [{name: 'Name 1', price: '10$'}, {name: 'Name 2', price: '20$'}, ...] In my view, I have a list of products bei ...

javascriptangulartypescriptbinding

What could be causing the double invocation of render() in ReactNative?

I'm currently working on an app with a single screen displaying a map centered on the user's current coordinates. In my code below, I've set the latitude and longitude to null in the state of the App component. Using the componentDidMount() ...

javascriptreactjsreact-native

Eliminating the final space in CSS flexbox layout

When I set the display of an element to flex, I noticed that the last space in a text string gets removed. <div class="has_flex"> Some text <a href="link">Link</a></div> After setting display to flex: <div class="has_flex"> ...

htmlcssflexbox

The no-unused-expressions rule is triggered when an assignment or function call is expected

I'm just starting out in full stack development and I'm experimenting with coding to improve my understanding of frontend using React JS and Material UI. While working on this component, I encountered an error in the console at line 75 (this.prop ...

javascriptreactjsmaterial-ui

Issue with React's handleChange function in two separate components

I need assistance with calling the event handleChange from a second Component This is my principal component: const [mainState, setMainState] = useState({ stepValue: 1, saleDateVal: new Date(), customerVal: '' }); function moveNextStep() { ...

javascriptreactjsreact-hooks

The checkbox is failing to display as checked even after its value has been dynamically set to true

Currently, I am immersed in a project within ASP.NET MVC that involves displaying data on a page where users can interact by selecting checkboxes to make changes. In cases where there are numerous checkboxes present, a "Select all Checkboxes" button become ...

javascriptjqueryhtmlasp.net-mvc

Learning how to replace the alert function with Bootbox

I am currently working on a form that posts to a MySQL database. I want to replace the alert function triggered by the Malsup jQuery Form Plugin with the one created by the Bootbox plugin. Even though both plugins are functional, I struggle to integrate th ...

javascriptjqueryalertbootbox

Enhance Your Thumbnails with Jquery by Adding Image Titles

Having an issue with extracting the title tag from images in a slider and relocating it to another part of my webpage. Currently, only the first image's title is being retrieved, while subsequent ones are not. Here is the script I am using: var imgT ...

jquerynivo-slider

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

javascriptcssreactjsmaterial-uitailwind-css

"Enhancing webpage dynamics with jQuery: Exploring the

I have a beginner's question regarding my jQuery script. The script I have makes the menu move slightly to the right. My first issue is that the <a> tag seems to be receiving bottom padding, and I am unsure why or how this is happening. My secon ...

jqueryhtmlcssmenu

Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...

htmlsentencecss

What purpose does the .set() function serve in Node.js with Express?

As I delve into learning Node syntax, there's this particular code snippet that has caught my curiosity. Can you shed some light on its purpose? server.set('views', __dirname); ...

javascriptnode.jsexpress

Errors in Data Capture from AJAX Dropdown Selections

Recently, I've encountered an issue with one of my data fields while attempting to save it to a mySQL database. The problem seems to be related to the fact that the 'id' for the text value is saved instead of the actual text value itself, wh ...

phpjavascriptajaxgoogle-maps-api-3

How can I create a real-time page update using node.js?

I am completely new to node.js, but my main goal in learning this language is to achieve a specific task. I want to create a webpage where the content within a designated "div" can be swapped dynamically for users currently viewing the page. For example, ...

javascriptnode.js

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Currently facing an issue with TypeScript and types. I have an array of IDs obtained from checkboxes, which may also be empty. An example of values returned from the submit() function: const responseFromSubmit = { 1: { id: "1", value: "true" }, 2: ...

javascriptarraystypescriptarray.prototype.map

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

I have a sliding panel on my webpage that reveals the navigation (www.helloarchie.blue). I want the content inside the panel to fade in slowly when it slides out, and then fade out when the user clicks the icon to close the panel. How can I achieve this ef ...

jqueryhtmlcssfadeinfadeout

Issue with md-stretch-tabs in Angular-Material causing a problem

I am in the process of developing an Angular-based application. ISSUE: I included md-stretch-tabs in my md-tabs element, but when I switch to tab#2, the tab retracts as if there is not enough space to flex. Is this problem related to dependencies or the c ...

javascripthtmlangularjsangular-material

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Currently, I am utilizing the Raphaël library to create a network graph, where nodes are depicted as circles. Users have the ability to dynamically add nodes by clicking on the canvas. When a new node is added, an Element object is pushed into both a Set ...

javascriptjqueryhtmlsvgraphael

Having difficulty combining an array of JSON responses

I am working on an API call where I need to merge two objects and return them as a single entity. router.get('/reviewsavg', async (req, res) => { try { //enitityId[] is an array consisting of ID's to look up form const p ...

javascriptnode.jsmongodbexpress

Loading JW Player inside a "pop-up window"

My query pertains to the implementation of FancyBox version on this stackoverflow post: http://stackoverflow.com/questions/8221253/loading-jw-player-inside-of-fancybox Specifically for this inquiry, I am seeking recommendations for the following situation ...

jquerylightboxjwplayer