Encountering a problem while attempting to loop through div content upwards in jQuery, specifically when displaying the latest news

Question

Encountering a problem while attempting to loop through div content upwards in jQuery, specifically when displaying the latest news

Hey there, I'm fairly new to JQuery and I am working on dynamically appending content to a div. I need to continuously scroll the content of that div to the top. After some research, I found a solution that meets my requirements.

Here's a snippet of my HTML, take a look:

<div class="news_container" id="NewsContent">
    <div class="LatestNews">
        <div class="Content">
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
</div>

Check out this example fiddler link here for reference

The code works perfectly in the fiddler above, but when implemented on an ASP.NET page, it throws an error stating:

"TypeError: jQuery.speed is not a function
optall = jQuery.speed( speed, easing, callback ),"

I'm puzzled by what could be wrong with the animate() function. Here's an excerpt of my code:

function CreateFunction() {
    $.fn.loopScroll = function () {
        var options = $.extend({
            direction: "upwards",
            speed: 50
        });

        var obj = $(this).find(".LatestNews");
        var text_height = obj.find(".Content").height();
        var start_y, end_y;

        if (options.direction == "upwards") {
            start_y = 0;
            end_y = -text_height;
        }

        var animate = function () {
            // setting up animation logic
            var distance = Math.abs(end_y - parseInt(obj.css("top")));
            
            obj.animate({top: end_y }, 1000 * distance / options.speed,
                function () {
                    obj.css("top", start_y);
                    animate();
                });
                
            animate();
        };

        $("#NewsContent").loopScroll({ speed: 120 });
    }
}

I'm having trouble understanding how optional parameters work. Can anyone suggest what might be causing the problem? Thanks in advance!

jquery css asp.net

Answer 1

Answer №1

Your issue stems from not extending options in your plugin.

$.fn.loopScroll = function (p_options) { // You missed p_options
    var options = $.extend({
          direction: "upwards",
          speed: 50
      }, p_options); // You also missed extending p_options

You need to add the closing brace for $.fn.loopScroll =. Here is the corrected version:

function CreateFunction() {
    $.fn.loopScroll = function (p_options) {
        var options = $.extend({
            direction: "upwards",
            speed: 50
        }, p_options);

        var obj = $(this).find(".LatestNews");
        var text_height = obj.find(".Content").height();
        var start_y, end_y;
        if (options.direction == "upwards") {
            start_y = 0;
            end_y = -text_height;
        }
        var animate = function () {
            // Setup animation of "obj"
            // Calculate distance of animation    
            var distance = Math.abs(end_y - parseInt(obj.css("top")));
            // Duration will be distance / speed

            obj.animate({
                top: end_y
            }, 1000 * distance / options.speed,
            // Scroll upwards
            function () {
                // Scroll to start position
                obj.css("top", start_y);
                animate();
            });

        };
    } 
    $("#NewsContent").loopScroll({
       speed: 120
    });        
}

Another way to try it is this:

<script src="path/to/jquery.js"></script>
<script>
    ;(function ($) {
        $.fn.loopScroll = function (p_options) { // Getting new options
            var options = $.extend({
                direction: "upwards",
                speed: 50
            }, p_options); // Extending options
            var obj = $(this).find(".LatestNews");
            var text_height = obj.find(".Content").height();
            var start_y, end_y;
            if (options.direction == "upwards") {
                start_y = 0;
                end_y = -text_height;
            }

            var animate = function () {
                // Setup animation of "obj"
                // Calculate distance of animation    
                var distance = Math.abs(end_y - parseInt(obj.css("top")));
                // Duration will be distance / speed

                obj.animate({
                    top: end_y
                }, 1000 * distance / options.speed,
                // Scroll upwards
                function () {
                    // Scroll to start position
                    obj.css("top", start_y);
                    animate();
                });

            };

            obj.find(".Content").clone().appendTo(obj);
            $(this).on("mouseover", function () {
                obj.stop();
            }).on("mouseout", function () {
                animate(); // Resume animation
            });
            obj.css("top", start_y);

            animate(); // Start animation
        } // Make sure you include the closing braces in your code.
    }(jQuery));

    function CreateFunction() {
         $("#NewsContent").loopScroll({ speed: 120 });
    }
</script>

Answer 2

Your issue stems from not extending options in your plugin.

$.fn.loopScroll = function (p_options) { // You missed p_options
    var options = $.extend({
          direction: "upwards",
          speed: 50
      }, p_options); // You also missed extending p_options

You need to add the closing brace for $.fn.loopScroll =. Here is the corrected version:

function CreateFunction() {
    $.fn.loopScroll = function (p_options) {
        var options = $.extend({
            direction: "upwards",
            speed: 50
        }, p_options);

        var obj = $(this).find(".LatestNews");
        var text_height = obj.find(".Content").height();
        var start_y, end_y;
        if (options.direction == "upwards") {
            start_y = 0;
            end_y = -text_height;
        }
        var animate = function () {
            // Setup animation of "obj"
            // Calculate distance of animation    
            var distance = Math.abs(end_y - parseInt(obj.css("top")));
            // Duration will be distance / speed

            obj.animate({
                top: end_y
            }, 1000 * distance / options.speed,
            // Scroll upwards
            function () {
                // Scroll to start position
                obj.css("top", start_y);
                animate();
            });

        };
    } 
    $("#NewsContent").loopScroll({
       speed: 120
    });        
}

Another way to try it is this:

<script src="path/to/jquery.js"></script>
<script>
    ;(function ($) {
        $.fn.loopScroll = function (p_options) { // Getting new options
            var options = $.extend({
                direction: "upwards",
                speed: 50
            }, p_options); // Extending options
            var obj = $(this).find(".LatestNews");
            var text_height = obj.find(".Content").height();
            var start_y, end_y;
            if (options.direction == "upwards") {
                start_y = 0;
                end_y = -text_height;
            }

            var animate = function () {
                // Setup animation of "obj"
                // Calculate distance of animation    
                var distance = Math.abs(end_y - parseInt(obj.css("top")));
                // Duration will be distance / speed

                obj.animate({
                    top: end_y
                }, 1000 * distance / options.speed,
                // Scroll upwards
                function () {
                    // Scroll to start position
                    obj.css("top", start_y);
                    animate();
                });

            };

            obj.find(".Content").clone().appendTo(obj);
            $(this).on("mouseover", function () {
                obj.stop();
            }).on("mouseout", function () {
                animate(); // Resume animation
            });
            obj.css("top", start_y);

            animate(); // Start animation
        } // Make sure you include the closing braces in your code.
    }(jQuery));

    function CreateFunction() {
         $("#NewsContent").loopScroll({ speed: 120 });
    }
</script>

Encountering a problem while attempting to loop through div content upwards in jQuery, specifically when displaying the latest news

Answer №1

Similar questions

receiving ajax server updates

Encountering the error message "Uncaught TypeError: Unable to assign value to property 'color' of an undefined object"

Automatic cancellation of AJAX request

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

Verify if the jQuery library has an existing style attribute

Tips for filling a Rails dropdown list using a JSON array

Ways to verify multiple radio groups to ensure none have been left unchecked

What is the process for generating a flexible multi-column unordered list in a single column using Bootstrap 4?

Adding content to an empty element will not produce the desired result

Utilizing the button's id to display a partial view within Rails

Steps for Deploying ASP.NET Core 5 Web Site on IIS

How much space should be left from the edge for jQuery UI dialog to be

A menu displaying a selection of the text

Preventing an object from exceeding the boundaries of its designated space

Is there a way to stop the top nav from covering the first element of the side-nav in specific situations?

What benefits come from dynamically loading and unloading JavaScript and CSS stylesheets?

What is the best way to merge setInterval with mouseenter events?

What happens when jQuery interacts with AJAX and encounters multiple hash values in an application

retrieve the data-task-IDs from the rows within the table

Uncertainty arises from the information transmitted from the controller to the Ajax function