Problem with a JQuery Slide Show Plugin

My JQuery-created image rotator is generating a Microsoft JScript runtime error: Object Expected message when it runs. Here's the code I'm using.

Thank you in advance!

<!doctype html>
<html>
<head>
<title>JQuery Test</title>
<style type="text/css">
#nav { margin: 20px auto }
#nav a { padding: 4px 6px; margin: 3px; border: 1px solid #ccc; text-align: center; text-decoration: none; background-color: #ddd }
#nav a.activeSlide { color: #c00 }
#nav a:focus { outline: none; }

.slideshow { margin: 20px auto; padding: 0; clear: left; }
.slide { margin: 0; padding: 0 }
.slideshow, .slide { height: 232px; width: 710px; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; margin: 0 }
</style>
<!-- include jQuery library -->
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="Scripts/Test.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();

$(document).ready(function () {
    $('.slideshow').cycle({
        fx: 'scrollLeft',
        timeout: 0,
        pager: '#nav'
    });
});
</script>
</head>
<body>
<div style="margin:auto;text-align:center"><div id="nav"></div></div>
<div class="slideshow">
    <div class="slide">
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200"  height="200" />
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
        <img src="Images/Get Inspired/ThumbNails/Th.png" width="200" height="200" />
    </div>
</div>
 </body>
  </html>

Answer №1

the solution that worked for me was to simply remove the following line of code:

$j = jQuery.noConflict();

hopefully this helps someone else facing the same issue...

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 Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

Once the database fetches and displays 500 results, the HTML/CSS formatting begins to

On my local webserver, I have a page running off SQLite as its database. Since it is used locally and loads results quickly, displaying all of them on one page isn't a concern. However, I'm facing an issue where the formatting goes awry after 500 ...

Ways to create a fixed button positioned statically at the bottom of a page

Currently, I am utilizing tailwind CSS to create a webpage with Next and Back buttons for navigation. However, an issue arises when there is minimal content on the page as the button adheres to the top. For visual reference, please view the image linked be ...

In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...

expanding menu options in a dynamic design

My webpage features a logo alongside a menu: Here's the HTML code: <div id="logomenuwrapper"> <div id="logo"><img src="img/logo_light.jpg"/></div> <div id="menu"> <ul> <li><a href="#">About ...

What is the best way to create a horizontal scrolling feature for a two-row layout using Bootstrap?

When using one row, the script works successfully. Here is an example of the code: html : <div class="testimonial-group"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> < ...

showing the name in place of the identification number

Recently, I created a page that showcases all the truck plate numbers in a table, and upon clicking each plate number, it redirects to a page displaying the data associated with that specific plate number. However, there is an issue with displaying the tru ...

What's the best way to refresh append() functionality within a modal? I'm currently working with NODE JS and AJAX and

Whenever I click the modal, the append() calls are adding HTML content. But if I try to use empty() or html(), the modal stops appearing altogether. What is the correct approach to creating this modal? function loadModalContent(id) { $('#myModal& ...

I am struggling to retrieve the text from a link element within a hover dropdown

Having trouble clicking on a dropdown menu item that appears on hover? Here is the HTML code of the website I am currently testing: <div id="header-nav" class="skip-content"> <nav id="nav"> <ol cl ...

What is the process for activating the Bootstrap modal-backdrop?

While I'm in the midst of some ajax operations, I thought it would be nice to display an overlay on my screen. I could create my own overlay div without any trouble, but considering that I am already utilizing Bootstrap, I might as well take advantage ...

Is it possible for CSS to prevent the insertion of spaces?

When filling out a form, I am able to insert spaces in inputs but not in the textarea (which is necessary). Interestingly, inserting spaces in the textarea works flawlessly. <form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="mu ...

What is the method for adding a before pseudo-element to my button element?

HTML & CSS Issue <button>Get Postion</button> Below is the CSS code for styling a button: button { padding: 1rem; background-color: red; color: wheat; border: 4px solid yellowgreen; position: relative; cursor: pointer; ...

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

The jQuery function creating an object that calls itself as a method

Currently, I am in the process of developing a Jquery game for my school project. In order to make the create() function recall itself, I have included a setTimeout() at the end of the method. However, it seems that the function is only running once when ...

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

Text that spans across multiple lines

I have a multi-line text that I need to adapt to a div. For example: https://i.stack.imgur.com/mtZmf.png Is there a way to adjust the text within the div? Can we prevent the blue spacing after the word "text" using CSS? If I have various texts of differ ...

Include the result of a PHP script into a division

Looking for a way to efficiently retrieve the content of a PHP file named data.php using jQuery every 60 seconds? You're in luck! <div id="datacontainer"></div> While many examples demonstrate triggering events onclick, I'm here to ...

Is there a way to automatically animate an element each time it moves to a different position on the screen?

I am working on a Vue project and facing an issue where elements disappear on the page due to the use of v-if, causing the rest of the page to rearrange abruptly. I am looking for a way to make these changes happen smoothly. Each element on the page has a ...

Incorporate loading spinner to enhance search functionality

I am currently using Ajax to search for cities and locations. The search query typically takes around 5 seconds to complete. I would like to know how to add a spinner to indicate the waiting time during the search process. Below is a snippet of the code ...

Why was the event handler attached and for what purpose does it serve in this particular location?

When using Typescript with JQuery, I encountered a strange issue where a click event seemed to be added multiple times each time the user opened a dialog. Despite creating a new SettingsDlog object for each dialog instance, the click event did not behave a ...