What steps do I need to take to activate this JQuery plugin successfully?

I stumbled upon this amazing silky smooth marquee jQuery plugin online @: Smooth marquee

After downloading the latest JQuery and the JQuery marquee plugin as directed on the site above, I am still unable to make it work like they showcased in their demo: The demo.

Check out my HTML code below:

<!DOCTYPE html>
<html>
<head> 
<script type="text/javascript" src="js/jquery-1.2.6.js"> </script>
<script type="text/javascript" src="js/gistfile1.js"></script>

<script> $('marquee').marquee(.pointer) </script>
</head>
<body>

<h2>News Feed</h2>

<div class="pointer" style="display: block-inline; width: 350px; height: 41px; overflow: hidden;">
<div style="float: left; white-space: nowrap; padding: 0px 350px;">

<p>START Lorem ipsum dolor sit amet END</p>
</div>
</div>

</body>
</html>

The instructions seem a bit unclear on how to successfully implement it. Any guidance on where I might be making mistakes would be greatly appreciated.

jqueryhtml

Answer №1

It appears that you are not utilizing the marquee tag in your code to achieve a sliding effect. The plugin is designed to enhance the smoothness of the sliding motion.

<!doctype html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="gistfile1.js"></script>
    <title>Document</title>
</head>
<body>

    <h2>News Feed</h2>

    <marquee style="width: 350px;">START Lorem ipsum dolor sit amet END</marquee>

</body>
<script> 
    $('marquee').marquee('')
</script>
</html>

You may want to consider incorporating the marquee tag into your code for the desired sliding effect. Additionally, I came across a helpful fiddle link related to smooth marquee effects which you can explore here: jsfiddle smooth marquee

Answer №2

To ensure your code executes correctly, enclose it within $(document).ready(function() {}) and specify your class .pointer within single quotes ' ';

$(document).ready(function() 
    $('marquee').marquee('.pointer');
});

Answer №3

Give this a shot

$(document).ready(function() {
    $('marquee').marquee();
});

Make sure to include the marquee tag in your HTML

<marquee behavior="scroll" direction="left" scrollamount="2" width="350">
        <p>START Lorem ipsum dolor sit amet END</p>
    </marquee>

Answer №4

I believe the correct code snippet is:

$(document).ready(function() 
    $('.pointer').marquee();
});

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

Limiting the draggable element within a compact container using jquery UI

I've been attempting to drag an <img> within a fixed-width and fixed-height container. Despite researching on Stack Overflow and finding this solution, it doesn't seem to work for my specific case. If you check out this fiddle I created, y ...

javascriptjqueryhtmlcssjquery-ui

Enhancing Django's login form validation with AJAX

I'm trying to implement an AJAX login feature in Django. The goal is to check if the user has provided the correct username and password. Take a look at my current code setup: urls.py urlpatterns = [ url(r'^$', views.home_view, name=&a ...

javascriptjquerypythonajaxdjango

Rails failing to properly decode JSON from jQuery resulting in an array transforming into a hash with integer keys

Every time I try to send an array of JSON objects from jQuery to Rails using a POST request, I encounter the same issue. When I stringify the array, it seems that jQuery is handling it correctly: "shared_items"=>"[{\"entity_id\":\"253&bs ...

jqueryruby-on-railsarraysjsonpost

Do not include undesired tags when using Beautifulsoup in Python

<span> I Enjoy <span class='not needed'> slapping </span> your back </span> How can "I Enjoy your back" be displayed instead of "I Enjoy slapping your back" This is what I attempted: result = soup.find_all(&apos ...

pythonhtmlweb-scrapingbeautifulsoup

Height Difference Caused by Textarea Overflow with Auto Scrollbars

Displayed below is code that generates a textarea with 3 visible rows: <textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea> Unexpectedly, in Firefox (version 20.0.1), the textarea displays 4 rows instead of 3. To view ...

htmlcssfirefoxtextarea

Is the [] value always populated in the second DropDownList?

After populating two DropDownList in my View, I encountered an issue with the values not updating as expected: <tr> <td class="info_label">City</td> <td>@Html.DropDownListFor(m=>m.User.City,Model.City,"-- Select ...

jqueryasp.net-mvc-3

Retrieving data from Google Places API in JSON format

Having some trouble with the Places API, I initially attempted to use $.ajax from jQuery but kept encountering an unexpected token error on the first element of the file. It turns out that JSONP cannot be fetched from the Places API. Below is a snippet of ...

jsonjqueryjsonpgoogle-places-api

Is there a way for me to update the button text and class to make it toggle-like

Is there a way to switch the button text and class when toggling? Currently, the default settings show a blue button with "Show" text, but upon click it should change to "Hide" with a white button background. <button class="btn exam-int-btn">Show< ...

javascriptjqueryhtmlcssfrontend

Code Snippet: Adjust Table Column Alignment using CSS

Apologies for the basic question, as I am new to CSS. Below is the UI that I am working with: https://i.stack.imgur.com/crAYE.png Here is the code that corresponds to the UI: <div class="row centered-form center-block"> <div cla ...

htmlcsstwitter-bootstrap

How can I pass an Objective-C object to JavaScript?

Currently, I am working on a UIWebView project that involves HTML and JavaScript. One of my friends is working on something similar but for Android. The challenge I'm facing is that in Android, there is a simple way to send an Android object to JavaS ...

javascripthtmlobjective-cioswebkit

How can JavaScript be used to make an AJAX request to a server-side function?

I am diving into the world of AJAX and feeling a bit uncertain about how to structure my AJAX call. $.ajax({ type: "POST", url: "Default.aspx/function", data: '{ searchBy: id }', contentType: "application/json; charset=utf-8" }). ...

javascriptjqueryajax

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

javascriptjquerycssfont-face

"Mastering the Art of Combining Two AJAX Requests Seamlessly (Without the Need for Plugins

I currently have 2 distinct ajax requests: One for endless loading The other for product filtering - by size, color, orderby, and it functions correctly with pagination. However, after applying the filters, the loadmore script does not work as expecte ...

jqueryajaxwoocommerce

The reason the CSS direct descendant selector does not affect Angular components

We are working with a basic main.html. <app> <sidebar></sidebar> <main-content> <router-outlet></router-outlet> </main-content> </app> After loading a component through routing (changing the ...

htmlcssangular

Leverage variables in Ajax to retrieve the data of an HTML element

Seeking assistance in converting multiple lines into a single for loop. var optie1 = ""; if($('#form #optie1_check').is(':checked')) { optie1 = $('#form #optie1_naam').val(); } var optie2 = ""; if($('#form #optie2_ch ...

javascriptjqueryajax

Creating fresh identifiers for table rows

I have created a dynamic data grid that can expand and collapse rows by clicking on them. It also has the functionality to add new rows with expand/collapse options using the .live() function. Currently, the ids for the parent rows and child cells are har ...

jquery

Can you help me identify the issue with my current Jade for loop implementation?

Here is my full loop code written in Jade: block content div(class='row') div(class='col-lg-12') h1(class='subject') 로또라이 div(class='row') div(class='col-lg-8') - for (var ...

javascripthtmlnode.jsexpresspug

update-post-thumbnail wp-ajax return false

I have been attempting to utilize the media manager within Wordpress. I am using the post editor outside of the admin area, allowing users to create posts with a featured image. I have used the _wp_post_thumbnail_html function to display the image or provi ...

javascriptphpjqueryajaxwordpress

The onPlayerReady function in the YouTube API seems to be experiencing a delay and

After following a tutorial on integrating the YouTube API into my website, I encountered difficulties trying to play a YouTube video in fullscreen mode when a button is pressed. Despite following the provided code closely, I am unable to get it to work as ...

javascriptjqueryruby-on-railsyoutubeslim-lang

There seems to be a hiccup in the JavaScript Console. It could potentially impact the functionality

Hey there, I'm encountering a strange issue in my IE 11 console. A JavaScript Console error has occurred. This may impact functionality. Whenever I try to run a for loop to create a list of elements within a ul tag 4000 times, the process stops at ...

javascriptjqueryperformanceinternet-explorer