The function window.scrollBy seems to be causing a conflict with jjmslideshow, resulting in the page being unable to

I wrote a simple script to create a "smooth scroll" effect when a specific link is clicked:

 (function() {

'use strict';

// Checking for compatibility
if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {

    // Function for smooth scrolling
    var smoothScroll = function (anchor, duration) {

        // Calculating scroll distance and speed
        var startLocation = window.pageYOffset;
        var endLocation = anchor.offsetTop;
        var distance = endLocation - startLocation;
        var increments = distance/(duration/16);
        var stopAnimation;

        // Animating the scroll
        var animateScroll = function () {
            window.scrollBy(0, increments);
            stopAnimation();
        };

        /....Other code not relevant to the question./

                 Interval(animateScroll, 16);

    };

    // Selecting smooth scroll links
    var scrollToggle = document.querySelectorAll('.scroll');

    // Looping through each smooth scroll link
    [].forEach.call(scrollToggle, function (toggle) {

        // When the smooth scroll link is clicked
        toggle.addEventListener('click', function(e) {

            // Preventing default link behavior
            e.preventDefault();

            // Getting anchor link and calculating distance from the top
            var dataID = toggle.getAttribute('href');
            var dataTarget = document.querySelector(dataID);
            var dataSpeed = toggle.getAttribute('data-speed');

            // Scrolling to the anchor
            if (dataTarget) {
                smoothScroll(dataTarget, dataSpeed || 500);
            }

        }, false);

    });

}

When I click on a link with the class .scroll, the page scrolls smoothly down to the target anchor. Everything worked fine until I added a slideshow using the jmpress plugin. Now the smooth scroll feature no longer works. Can anyone familiar with the jmpress plugin help me understand why they might be conflicting?

Apologies for any language errors.

Answer №1

I have limited knowledge about the jmpress plugin, but it seems to cause conflicts with other jQuery plugins. If that's the case, you can resolve it by enclosing your function within the following code:

(function($){

......
.......

})(jQuery);

Alternatively, you could also utilize the jQuery.noConflict() method.

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

managing nested JSON arrays in JavaScript

I have a straightforward task with handling a simple array that is divided into two parts: a group of vid_ids and a single element named page. Initially, I was iterating through the vid_id array using a for loop. However, upon adding the page element, I en ...

What are some ways to implement AJAX with input from the user?

I'm currently working on a project to create a basic web page that will make use of AJAX for displaying results. Within main.py, I have a dictionary of words: words = { 'a': True, 'aah': True, 'aahed': True, ...

Spacious width that doesn't require a horizontal scrollbar for navigation

My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrap ...

Steps for deactivating an eventhandler while another is being triggered:

There are two event listeners attached to a single input field. One triggers on change, while the other activates when selecting an autocomplete suggestion from Google. The issue arises when interacting with an autocompletion option as both handlers execut ...

"Displaying mongoose date in the HTML5 input type date format (dd/mm/yyyy) is a simple process that can

I have a structured data in MongoDB as shown below: var Person = new Schema({ "Name": { type: String, required: true }, "DOB": { type: Date, "default": Date.now } }); An instance of this schema is created using NodeJs with mongoose ODM: { "N ...

Place CSS elements in relation to the underlying element

This is an example of my HTML structure: <nav id="menu"> <ul> <li><a href="">Products</a></li> <li><a href="">Offers</a></li> <li><a href="">References</a>& ...

Having trouble utilizing JQuery to toggle the visibility of the div closest to a checkbox

Currently, I am utilizing Ruby on Rails along with the Cocoon Gem for generating dynamic forms. Specifically, users are able to add or remove their Education details using this form. Here is an example of how my form appears: <div class='nested-fi ...

Resource loading failed due to the XMLHttpRequest restriction

I am attempting to create a basic php backend for managing a contact form on another server. Despite adding the correct headers, I keep encountering the same error message: XMLHttpRequest cannot load https://php-contact-form-lual.herokuapp.com/. No ' ...

Tips for integrating File Upload with an AJAX form in MVC 4

I am looking to incorporate a File Upload feature in MVC 4 that is compatible with all browsers including IE 8 or higher, Chrome, and FF. The key requirement is to have AJAX support, as I intend to integrate it within an AJAX.BeginForm. While I have foun ...

Issue with Laravel - JavaScript not functioning properly following the passage of a parameter through the route

I am currently working on a website that will display search results from various e-marketplaces. Everything was going smoothly with the JavaScript implementation until I attempted to pass parameters through the route. Once I did that, the results stopped ...

Checkbox ensemble computes total score

I am currently working on a project that involves multiple checkbox groups, with each group containing 3 checkboxes labeled as (1, X, 2). My goal is to assign a value of 100% to each group, distributed evenly among the checkboxes within it. The distributio ...

Ways to create CSS styles dynamically in PHP using database-driven methods

Currently, I am in the process of developing an application that gives users the ability to select different style options within the app. These choices will then be utilized to create a dynamic web page. I am curious about the various methods available to ...

Looking for assistance in adding some animated flair to your website as users scroll

I don't have much experience in animation but I would like to create some animation effects on scroll down. Can anyone provide suggestions? I attempted using SVG paths, but it didn't work out as expected. What I am aiming for is that when a visi ...

Collapse the columns and set them to float on the left side

My current setup might not be the most visually appealing, but it gets the job done. I have several col-md-4 tags in place. The issue arises when the height of the first tag is larger than the ones next to it, causing the subsequent tag to appear in the mi ...

Error encountered while attempting to import the mongoose npm module into a React application

I'm encountering an issue in my React project where I am trying to include an npm module within a component. Here's an example: var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/test', {useNewUrlParser ...

Unable to retrieve attributes of object in JavaScript

I attempted various suggestions but none have been successful in allowing me to access the properties of the model. Here is what I have tried so far: var widgetModel = '@Html.Raw(Json.Encode(Model.widgets))'; [].forEach.call(widg ...

What is the best way to deliver hefty files to users? Utilize the node-telegram-bot-api

bot.sendDocument(id, 'test.zip'); I am facing an issue while trying to send a 1.5GB file using the code above. Instead of being delivered to the user, I receive the following error message: (Unhandled rejection Error: ETELEGRAM: 413 Request En ...

Incorporate jQuery into the layout in CakePHP version 3.4

I recently started incorporating libraries such as jQuery and Twitter Bootstrap using composer. Now, I am trying to include the jquery.min.js file from /vendor/components/jquery/ in my /src/Template/Layout/default.ctp. However, I have encountered an issue ...

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

Implement an onClick event to the newly created th element using document.createElement()

Through the use of document.createElement("th"), I am dynamically inserting columns into a table. var newTH = document.createElement('th'); Is there a way to add an onClick attribute to this element so that users can delete a column by clicking ...