Trouble linking jQuery file to HTML page

While working on a project, I stumbled upon a code that I am editing. You can find the original code here:

However, when I try to link the .js file, it fails to load properly and displays a single large image instead of a carousel of images.

Thank you for any assistance provided.

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script type="text/jquery" href="index.js"></script>
    </head>
    <body>
        <div id="wrapper">
           <div class="carousel">
              <div><img src="images/matt.png" /></div>
              <div><img src="img/i02.jpg" /></div>
              <div><img src="img/i03.jpg" /></div>
              <div><img src="img/i04.jpg" /></div>
              <div><img src="img/i05.jpg" /></div>
              <div><img src="img/i06.jpg" /></div>
              <div><img src="img/i07.jpg" /></div>
              <div><img src="img/i08.jpg" /></div>
              <div><img src="img/i09.jpg" /></div>
              <div><img src="img/i10.jpg" /></div>
           </div>
        </div>
    </body>
</html>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    min-height: 600px;
    background-color: #fff;
}
body * {
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 22px;
}

#wrapper {
    width: 800px;
    height: 500px;
    margin: -250px 0 0 -400px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
}

#wrapper,
.carousel,
.carousel div,
.carousel div img {
    width: 800px;
    height: 500px;
}
.carousel {
    float: left;
    overflow: hidden;
    cursor: pointer;
}
.carousel div {
    float: left;
    overflow: hidden;
    position: relative;
}
.carousel div img {
    border: none;
    display: block;
    float: left;
    position: absolute;
}

/* after js */
.carousel div.thumb img {
    width: 160px;
    height: 100px;
    left: -30px !important;
    top: 0 !important;
}

Javascript (This is what it said on the website so it may be jQuery, but I'm not sure)

$(function() {
    //  cache first carousel
    var $org = $('.carousel');

    //  variables
    var width = 800,
        height = 500,
        cols = 8,
        rows = 5,
        $img = $org.children()
        imgs = $img.length;

    //  duplicate carouesl
    for( a = 0; a < rows * cols; a++ ) {
        $('#wrapper').append( $org.clone() );
    }

    //  cache all carousls
    $all = $('.carousel');
    $all.each(function( i ) {

        //  current row and column
        var row = Math.floor( i / cols ),
            col = i % cols;

        var $t = $(this),
            i2 = i % imgs,
            $x = $img.eq( i2 ).clone();

        //  first image -> thumbnail
        $x.addClass( 'thumb' );
        $t.prepend( $x );

        var $d = $t.children();

        //  onClick start scrolling the first carousel
        $t.click(function() {
            var d = ( $t.triggerHandler( 'currentPosition' ) == 0 ) ? i2+1 : 0;
            $org.trigger( 'slideTo', d );
        });

        //  set width + height
        $t.add( $d ).css({
            width: width / cols,
            height: height / rows
        });

        //  position images
        $d.children().css({
            left: -(col * (width / cols)),
            top: -(row * (height / rows))
        });
    });

    //  create carousels
    $all.carouFredSel({
        circular: false,
        items: {
            visible: 1,
            width: width / cols,
            height: height / rows
        },
        scroll: {
            fx: 'directscroll',
            onBefore: function() {
                var $t = $(this);

                //  trigger next carousel to scroll after 25 ms.
                setTimeout(function() {
                    $t.parent().next().children().trigger( 'slideTo', $t.triggerHandler( 'currentPosition' ) );
                }, 25);
            }
        }
    }).trigger( 'pause' );
});

Answer №1

<script type="text/jquery" href="index.js"></script>

Hmm...

text/jquery

Just a friendly reminder, jQuery is not a programming language nor a MIME type. It is recommended to use text/javascript, or simply remove the type attribute altogether. Also, when specifying the location of JavaScript, use src instead of href. (It's a common mistake, so don't worry too much if you make it, but if you're not seeing any request being made, it's likely due to one of these two issues, or both in your case.)

Make sure to include jQuery before your script, you can get a copy from , and add it using another <script> element.

<script src="jquery-2.1.1.js"></script>
<script src="index.js"></script>

Answer №2

The code

<script type="text/jquery" href="index.js"></script>
is incorrect.

To properly use JQuery, you must include it using an extra <script> tag.

Answer №3

To start, make sure to replace type="text/jquery" with type="text/javascript"

<link rel="stylesheet" href="index.css">
<script type="text/javascript" href="index.js"></script>

If your javascript file is still not linking properly in the html file, it could be due to a file PATH issue.

Answer №4

If your .js file is located in the same folder as your HTML file, there is no need to specify the path. However, if your .js file is in a separate folder, you will need to provide the absolute path to ensure it is properly linked.

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

The embedded video on Youtube is not extending to fill the entire screen

Currently, I am in the process of creating a website for a friend's upcoming wedding using Bootstrap 5. However, I have encountered an issue where the embedded video is not expanding to fill the entire screen size. For reference, you can view the live ...

Difficulty parsing JSON in MVC .Net Core Controller

I am dealing with a Web Application built in ASP.Net Core 5 that communicates with a Web API in .Net Core. The data returned from the API in JSON format needs to be read from a file named landing.js. Despite the data being stored in the variable (data), I ...

Dynamically update a dropdown menu with options based on the user's selection from a prior dropdown list using ajax and JSP Servlet

I am working on creating a real-time project for a consultancy and could use some assistance with developing a JSP page. Specifically, I need to allow the user to select a Client (Company name) from a dropdown list. Once a Client is selected, the HR list ...

How to modify the color of a div element with jQuery?

I need some help changing the color of a div with 'jQuery', but I am not sure how to do it. Below is the code I have been trying: function updateDivColor() { $('#OutlineX1').css("color","blue"); } ...

Display problem with Backbone view

I'm having trouble loading views on my page while using underscore for templating. I've tried navigating to the page and loading the view in the initialize function, but neither approach has worked. The majority of this code is from an example. ...

Looking to optimize Laravel performance by eager loading both belongsTo and HasMany relationships?

I have a pair of interconnected models called Product and ProductCategory. Each product belongs to one product category, while each product category can house multiple products. Let's take a look at the models: Product: <?php namespace App\ ...

Adjust the <h1> tag's size using responsive Bootstrap design

Is it possible to adjust the font size of the <h1> tag specifically for small and extra small screens? The default size of the <h1> tag is suitable for medium screens but appears very large on small and extra small screens. I would like to cu ...

Vite build error: TypeError - Unable to access properties of null while trying to read 'useContext'

I used the following component imported from material-ui : import Paper from '@mui/material/Paper'; After running npm run build followed by npm run preview, I encountered an error in the console: Uncaught TypeError: Cannot read properties of n ...

Populate a table cell with data using a jQuery AJAX request

I am attempting to implement an ajax call for each of a series of 's and update the inner html of the td with processed data from the ajax call. Since I am restricted to using an ecommerce cms system, my ajax call is generating a complete page with t ...

Selenium cannot find iFrames

I've come across various suggestions about transitioning to iframes such as driver.switchTo().frame("test frame"); and driver.switchTo().defaultContent(); Yet, I'm having trouble navigating to MenuFrame 4 in the following code. I am utilizing Ja ...

The property 'matMenuTrigger' cannot be attached to 'a' because it is not recognized

Trying to implement matMenuTrigger but encountering an error saying "Can't bind to 'matMenuTrigger' since it isn't a known property of 'a'". Any assistance would be greatly appreciated. ...

Vue 2 checkbox form array data

Creating a checkbox list with a dynamic id and name: Data: yards[{id:1,name:'test'}] etc HTML: <ul class="checkbox-list"> <template v-for="(yard, index) in yards"> <li> ...

Sorting tables dynamically with Ajax and JQuery

Utilizing the tableSorter jQuery plugin, I am displaying a database table. With a large number of records, pagination is necessary. If there is only one page of data, client-side sorting can be enabled. However, when dealing with multiple pages, specifying ...

"The use of objects as a React child is not permitted" and code linters

I'm encountering an issue with a simple component and I can't figure out why. The error message and code snippet are as follows: Error: Objects are not valid as a React child (found: object with keys {Cfor, children}). If you meant to render a ...

What is the optimal approach for moving the dashboard to a separate subdomain in a static Next.js-generated landing page?

Our current setup includes several static pages generated by Next.js using the command next build && next export These pages are hosted on AWS S3. I am wondering if we should create a new app for building a dashboard with Firebase authentication ...

Experiencing difficulties in linking Node JS to the local Mongo DB

Currently I am deepening my knowledge in Mongo DB, Mongoose, and Node JS, however, I am facing issues connecting my Node JS to the local Mongo DB. Below is the code snippet I am working with: dbtest.js var express = require('express'); ...

What is the process for choosing a table column by clicking on the "select" option?

Welcome to my project! Here is an example table that I'm working on. I have a question - how can I make it so that when I click on "choose me", the entire column is selected? Can you help me with this? <table> <tr> <th>plan A&l ...

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

Access real-time information via JSON

I am facing a logical thinking challenge. Successfully retrieving data from a PHP file via JSON, but now encountering a slight issue. My goal is to retrieve various headlines - main and sub headlines. Each main headline may contain an unknown number of su ...

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...