The jQuery ticker functions smoothly on jsfiddle, but encounters issues when implemented in a .HTML file

My jQuery newsticker functions perfectly in jsFiddle, but when I transfer it to an HTML file, it mysteriously stops working. Despite keeping everything the same, it just doesn't work.

You can view the functioning version on jsFiddle here: http://jsfiddle.net/RXH6w/9/

$.noConflict();
jQuery( document ).ready(function( $ ) {
    function NewsTickerAutoPlay() {
        $(".NewsTicker li:first-child").slideUp(function () {
            $(this).appendTo(".NewsTicker").fadeIn();
        });
    }
    setInterval(function () {
        NewsTickerAutoPlay()
    }, 1000);
});

I've also included a link to the HTML file that contains the exact code from my jsFiddle:

Even though everything is identical, the script fails to work in my HTML. I'm hoping someone can help me identify what's causing this simple issue.

javascriptjqueryhtmlcss

Answer №1

Make sure to update your HTML code with the snippet provided below. Don't forget, adding "/show" at the end of the JSFiddle URL will display the entire page content.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Interactive NewsTicker - Demo on jsFiddle</title>

  <script type='text/javascript' src='/js/lib/dummy.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <script type='text/javascript' src="http:///ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


  <style type='text/css'>
    .NewsTicker {
    list-style-type:none;
    margin:0;
    padding:0;
    line-height:20px;
    height:20px;
    overflow:hidden
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
$.noConflict();
jQuery( document ).ready(function( $ ) {

function NewsTickerAutoPlay() {
    $(".NewsTicker li:first-child").slideUp(function () {
        $(this).appendTo(".NewsTicker").fadeIn();
    });
}

setInterval(function () {
    NewsTickerAutoPlay()
}, 1000);

});
}//]]>  

</script>


</head>
<body>
  <ul class="NewsTicker">
<li>Breaking News: SpaceX Successfully Launches Crew Dragon Capsule to International Space Station</li>
<li>Apple Unveils Latest iPhone Model with Revolutionary Cameras and Features</li>
</ul>

</body>


</html>

Answer №2

There is a small error in your code - you forgot to add an a before "text/javascript".

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

Enhance your Fullcalendar experience by seamlessly adding, editing, and resizing events with a success callback, all without the

Is there a way to update events on a calendar without refreshing the page every time a change is made, such as adding a new event, updating an event, changing an event, or dragging a new time or user? Currently, I am using version 5 of FullCalendar. < ...

phpjqueryajaxfullcalendarfullcalendar-5

The HTML canvas drawImage method overlays images when the source is modified

Trying to implement a scroll animation on my website, I came across a guide for creating an "Apple-like animation" using image sequences. Even though I'm new to Angular, I attempted to adapt the code to work with Angular. However, instead of animatin ...

htmlangulartypescripthtml5-canvas

Trouble locating DOM element in Angular's ngAfterViewInit()

Currently, I am attempting to target a specific menu item element within my navigation that has an active class applied to it. This is in order to implement some customized animations. export class NavComponent implements AfterViewInit { @ViewChild(&a ...

javascriptangularangular-routing

What are some alternative ways to position-style anchor elements without using absolute positioning or a wrapping div?

Here is the HTML code snippet that I am working with: <div class="top"> <div class="header title">Some Big Header Goes Here</div> <div class="sub-header title">The fancyness enters here.</div> <a hr ...

cssanchorcss-position

The Vue.js application which utilizes Vue I18n encountered the error message: "Unable to define i18n due to TypeError"

I am currently working on implementing internationalization in my Vue.js project using Vue I18n. Although I've been following the documentation found at , I encountered the following error message: [Vue warn]: Error in render: "TypeError: i18n is un ...

javascriptvue.jsinternationalizationvue-cli-3vue-i18n

The CSS for the balise component is failing to load within a particular component

I'm facing an issue with loading the CSS of my bloc component. The webpage component allows for easily creating an iframe and setting content inside. While it correctly loads the template and script tags, the CSS doesn't always load properly. ...

javascriptvue.jsvuejs2vue-componentnuxt.js

jquery is not connecting commas with a space after them

I am currently working on a solution to add a space after each comma in a string array using jQuery. My challenge lies in preventing duplicate values while also ensuring that the commas are followed by a space. Although I have utilized the join method, I a ...

jquery

Generating computations within a currently active session

I am currently in the process of developing a shopping application using AngularJS, PHP, a webservice, and various HTML/CSS and XML elements. At the moment, I am focusing on implementing the cart session functionality and have encountered difficulties whe ...

javascriptphpangularjssession

construct a table utilizing JSON information

If I have data returned from an ajax call that needs to be processed, a table like the following needs to be created: ID NAME Object Type ============================================== 1 SWT-F1-S32-RTR-1 Network Switch 2 ...

javascriptjqueryajax

Utilizing AngularJS routes to load a specific URL when accessing a page for the first time

Working on developing a Single Page Application using AngularJS, my configuration settings appear as follows: app.config(["$routeProvider", function($routeProvider) { return $routeProvider .when("/", { redirectTo: " ...

javascriptangularjsurl-routingsingle-page-application

Exploring the capability of the Videoshow NPM module in conjunction with

I've been working on using videoshow to convert a series of images into a video. I've made several changes to my code, but it seems like it's pretty much the same as what's described in the module's documentation. However, I keep e ...

javascriptnode.jsffmpeg

Adding a class to a div upon loading: A guide

Currently using the following script: $(document).ready(function() { $(".accept").change(function () { if ($(this).val() == "0") { $(".generateBtn").addClass("disable"); } else { $(".generateBtn").remove("dis ...

javascriptjquerycss

Guide to setting up jQuery Mobile with bower

For my project, I'm interested in utilizing jquery-mobile through bower. In order to do so, I need to execute npm install and grunt consecutively within the bower_components/jquery-mobile directory to access the minified .js and .css files. This pro ...

javascripthtmlnode.jsgruntjsbower

Exploring characteristics within a Three.Js environment in a React application

I have successfully integrated a ThreeJs Scene into a React component, following the approach outlined here. However, I am facing difficulties updating the Scene based on state changes in its parent component. In my setup, users can configure certain prope ...

javascriptreactjsthree.js

Is there a way to prevent screen flickering when navigating my character using arrow keys in JavaScript?

Seeking assistance for an issue with canvas flickering in JavaScript. I've successfully cleared the canvas before redrawing my game character, but I'm struggling to prevent screen flickering as the character moves. Any help would be greatly appre ...

javascripthtmlwebhtml5-canvas

Completing the regex properly

When using my editor, I am able to paste a video URL which is then converted by regex into an embed code. The URL in the WYSIWYG-editor looks like this: Once converted, the output HTML appears as: <p>http://emedia.is.ed.ac.uk:8080/JW/wsconfig.xml& ...

javascriptjqueryregex

Changing the size of a background image is proving to be quite a challenge for me

I'm completely new to HTML and CSS. I've been working through a book titled The Missing Manual, CSS3 but I've hit a roadblock when it comes to changing the size of an image that I want to use as a background. In order to troubleshoot the iss ...

htmlcss

Having difficulty erasing the existing input

I'm trying to create a form input field in JavaScript that generates a specified number of additional inputs based on user input. The issue I'm facing is that while the code works and adds more input fields, it does not delete the previously gene ...

javascripthtmljquery

Gatsby: A guide on inserting unadulterated HTML within the head section

Is it possible to insert raw HTML into the <head></head> section of every page in a Gatsby.js project? I need to add a string of HTML for tracking purposes, including inline and external script tags, link tags, and meta tags. For example, here ...

javascripthtmlreactjsgatsbytracking

This jQuery ajax request is returning a readyState of 1 or an incorrect data type

I am currently troubleshooting an issue with the ajax response in my Wordpress plugin script. Whenever I try to retrieve a json file using jQuery.ajax, I receive {readyState: 1} as the result. Even when setting async: false, the response is always plain te ...

javascriptjqueryajaxjsonwordpress