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

What is the best way to combine two functions together using jQuery and promise()?

I'm currently attempting to implement the promise() method to merge one function with another. The code below utilizes jQuery/ajax to submit a form in the initial section, followed by a second function that aims to simulate clicking on a label after t ...

jqueryajaxformslabeljquery-events

XPath //*[text()] is not picking up the desired text

Using the XPath 1.0 expression //*[text()] does not capture the phrase "now revenue of kfc is" https://i.stack.imgur.com/GeFCY.png However, with the XPath 2.0 expression //text(), it can be selected. https://i.stack.imgur.com/uTSqW.png Unfortunately, S ...

htmlxmlseleniumselenium-webdriverxpath

I would like to hide the button if there are fewer than five visible

When there are less than 5 visible buttons, I want the button to be invisible. The state visible outputs 5 buttons each time. On the detail page, I would like to have the buttons invisible if there are fewer than 5 outputs. In my current code, when ther ...

javascriptreactjs

Launching a new window and displaying content across 2 separate tabs

Currently, I am incorporating both angular js and javascript within my application. An issue that has arisen is that when I click on the <a> tag, it triggers a method in an angular controller which contains $window.open();. The problem lies in the fa ...

javascriptjqueryangularjs

Remove an owl carousel using Laravel, Vue.js, and Axios

I've implemented a sleek slider on my website to showcase images with accompanying text to visitors. The slider utilizes owl carousel within a vue component and is functioning properly. Now, I'm attempting to add a delete button so that users who ...

javascriptlaravel-5vue.jsaxiosowl-carousel

Exporting JSON data as an Excel file in AngularJS, including the option to customize the fonts used for the

Currently, I am working on a project where I need to convert JSON data to an Excel file using JavaScript in combination with AngularJS. So far, I have successfully converted the JSON data to CSV format. However, I faced issues with maintaining the font s ...

javascriptangularjs

Iterate through each element in the array and manipulate the corresponding data

I am trying to figure out a way to assign a unique id to each item in an array and send it to the "script.js" file for individual data processing. <script href="script.js"></sciprt> script.js: $(function(){ $('#box' ...

javascriptphpjquery

How can I adjust padding values specifically for mobile devices within the Bulma CSS framework?

After constructing a website with the Bulma CSS framework, I encountered an issue with padding on mobile devices. To optimize the user experience, I need to reduce the padding on smaller screens to 5% or less instead of the initial 10%. However, I am unsur ...

htmlcssbulma

Issues with jQuery - substitute an excessively lengthy text with "..."

Looking to shorten a lengthy text by cutting it off and adding "...". HTML: <div class="test"> <span>Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</span> </div& ...

jquery

Typescript subtraction operation may result in Undefined

I am a beginner in the world of TypeScript and I'm currently struggling with running this code snippet: class TestClass { public t: number = 10; constructor() { this.t = this.t - 1; console.log(this.t); } } var obj = new TestClass(); ...

javascripttypescript

attach an event listener for the click event

I have a button set up like this Inside index.html: <body> <section> <button id="open-file">Open File</button> ...(series of other similar buttons)... </section> </body> <script> requir ...

javascriptnode.jselectron

The Bootstrap nav bar toggle feature is failing to toggle

My bootstrap navigation toggle does not seem to be toggling on click when the page shrinks. I have made sure to import the jQuery library first, so I'm not sure why it's not working. <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

htmlcsstwitter-bootstrapbootstrap-4

What is causing this if statement to be consistently overlooked?

I am trying to change the class of an element when the document scroll position is greater than 300px. However, my code seems to be ignored every time. Can anyone help me figure out why? if ( $(document).scrollTop() > 300) { ...

jqueryif-statement

Displaying a Facebook iframe on the left side of the page

I'm struggling with positioning the Facebook iframe embed to sit on the left of the text. I want it to be aligned with the left margin, but also have the text flow beside it from the same height. Can anyone offer some guidance on how to achieve this u ...

cssvue.jsiframe

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

javascriptjqueryhtmlcss

Error Occurred While Transmitting JSON Data to the Server

I am trying to send JSON data to my controller's POST handler from the client side: var userName = $('#userName').val(); var password = $('#password').val(); var mail = $('#mail').val(); var admin =$("#admin").is(': ...

jqueryjsonspringrestspring-mvc

The jQuery functions properly offline, but fails to load when connected to the

I am encountering an issue with the following script: <script type="text/javascript"> $.getJSON("http://api.twitter.com/1/statuses/user_timeline/koawatea.json?count=1&include_rts=1&callback=?", function(data) { $("#headertweet") ...

javascriptjqueryhtmljson

The CSS rule that is determined to have the nearest bounding class will emerge victorious

Imagine this interesting situation in HTML: <div class="red"> <div class="blue"> ... <-- maybe more nested parents <div class="x">Test</div> </div> </div> If we consider the following ...

htmlcsscss-selectors

Passing a variable using a button's value attribute in jQuery

My goal is to develop a form in my application where users can input their name and address. Once the user enters the information, I need to validate it and add it to an array before submitting it to the PHP function. Additionally, I want to provide users ...

jqueryhtmlbutton

css determining the width through calculation

I am facing a challenge with a math problem. My content box is 700 pixels wide, and my hentry (inside content) is 100% wide with padding of 10 pixels. This causes the hentry to be wider than the content, resulting in an overflow... Does anyone have a so ...

csswordpress