Looks like there's an issue: $("div#created") does not have a function called scrollintoview in jQuery

UPDATE: Encountered a new error: Error Jquery not defined on line 208

The issue seems to be with line 208 in this code snippet: https://github.com/litera/jquery-scrollintoview/blob/master/jquery.scrollintoview.js

I am puzzled as to why I am facing this error, especially since everything was functioning properly on jsfiddle. However, upon integrating the code into my rails app, it fails to work. Upon inspecting the error further, the section complete: function() { is highlighted.

Clicking the link triggers the appearance of a hidden div and changes the link color to 'active' (red), but the window does not scroll to the bottom of the div. Additionally, toggling the link has no effect – the div does not close and the link remains red.

Here is the original working jsfiddle: http://jsfiddle.net/Gr7BP/

application.js

$(function() {

    $("#created").hide();

    $('a.created-button').click(function() {

        $('#created').toggle(function() {
            $('a.created-button').toggleClass('active');
            $('#created').scrollintoview({
                duration: "slow",
                direction: "y", 
                complete: function() {
                        // highlight the element so user's focus gets where it needs to be
                }
            });
        });
    });
});

$(function() {

    $("#stuff").hide();

    $('a.stuff-button').click(function() {

        $('#stuff').toggle(function() {
            $('a.stuff-button').toggleClass('active');
            $('#stuff').scrollintoview({
                duration: "slow",
                direction: "y",
                complete: function() {
                        // highlight the element so user's focus gets where it needs to be
                }
            });
        });
    });
});

footer

<footer>
 <div id="created-by"><a class="created-button">Created by</a></div> 
 <div id="cool-stuff"><a class="stuff-button">Cool stuff</a></div>

</footer>
<div id="created">

</div>
<div id="stuff">

</div>

css

#top-section {
    margin: 0 auto;
    width: 100%;
    height: 150px;
    background: green;

}
#bottom-section {
    margin: 0 auto;
    width: 100%;
    height: 150px;
    background: white;

}

.active {
    color: red;
}

update:

Answer №1

The issue arises from the difference in function names – scrollIntoView() (written in camelCasing style) and scrollintoview() (not following camelCase).

Note: JavaScript is a language that is sensitive to cases.

Double-check that you have included the JavaScript files in the correct sequence. Start with loading the jQuery library, then add the scrollintoview plugin, and finally include your application.js

EDIT: Revised the response based on feedback from the comments section.

Answer №2

If you're looking to achieve this effect, using a callback function might just be the solution.

 $('div#created').scrollintoview({
      duration: "slow",
      direction: "y"
 }, function() {
      // perform some action   
 });

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 act of scrolling through list elements does not initiate upon the first click

I'm trying to create a script that allows users to scroll through list elements by clicking on "previous" and "next" links. However, I'm running into an issue where when the user clicks on the "next" button for the first time, they have to click ...

What is the best way to switch back and forth between Bootstrap 5.1.0 modals?

I encountered an issue where the first modal remains visible when opening the second modal within the initial popup. Can anyone explain why this is happening? Furthermore, I noticed that the backdrop for the second modal is darker, indicating that it is s ...

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

Tips for attaching to a library function (such as Golden Layout) and invoking extra functionalities

I am currently utilizing a library named Golden Layout that includes a function called destroy, which closes all application windows on window close or refresh. My requirement is to enhance the functionality of the destroy function by also removing all lo ...

How can I modify this jQuery plugin to enable sorting on table rows that are currently hidden?

While experimenting with different tablesorting jQuery plugins, I stumbled upon one that perfectly meets the following criteria: Correctly sorts dates Properly sorts numbers Sorts words representing numbers (e.g. One, Two, Three) accurately Sorts in a DO ...

Ways to trigger a PHP function after a successful AJAX query

I have incorporated AJAX into my project, as shown in the code below: $.ajax({ type: 'POST', data: ..., success: function(data) {<?php calc(); ?>}, error: function(jqXhr, textSt ...

Using jQuery/AJAX for conducting multiple searches in MySQL

I have created a form where users can input their Name, region, age, and language. I've written a PHP script to retrieve this data but encountered an issue - if a field is left empty or the user starts typing a name and deletes it, the database return ...

What is the process for converting .Vb code to .CS code for asp.net development?

I am working with a .CS file that utilizes SQL to fetch data and is invoked from a .VB file: Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim urgentcare As New UrgentCareWaitTime() '' Dis ...

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

Is it possible to utilize CSS alone to change the color of a certain image to white against a black background?

I specialize in crafting dark theme versions of popular websites using CSS. One challenge I often face is dealing with images like the ones below: https://i.sstatic.net/ZLpPT.png https://i.sstatic.net/2NKRP.png Websites typically use background-image t ...

What is the best way to eliminate repetitive values from a dynamic select dropdown using Javascript?

Struggling to solve this issue with no success. Essentially, we are populating a select element with values from the service it's being retrieved from. However, duplicates are appearing in the select. The code responsible for this behavior is shown be ...

Looking for a solution to fix parallax images appearing blurred or pixelated on an iPhone? Seeking guidance on

Currently, I'm facing an issue with my website. The background images appear pixelated on iPhone screens. This is the HTML code I am using: <div class="parallax img-overlay3" style="background-image:url(img/pictures/food02.jpg)" data-stellar-bac ...

Removing an item with Ajax upon page reload

After creating a small Ajax script to remove items from my database and view, I encountered an issue where the view was only updated after a reload when the item was removed. I want to avoid reloading the entire page by using window.location.reload() in m ...

Retrieve information from the form and construct a multi-layered array with it

I'm working on a basic HTML form structured like this: <form name="test" action=""> <tr class="selectable" data-selected=false> <input type="hidden" name="product[gate][id] value=<? echo $pid?>"/> <input ...

Invoke a TypeScript function within JavaScript code

As a result of the limitations of IE10 and earlier versions, I find myself in need to reimplement the Import/Upload functionality that I had initially created since FileReader is not supported. After some consideration, I have opted to utilize an iFrame in ...

Click on a specific button within a DataTable row

I am working with a dataTable that fetches data from the database using Jquery. In each row, there are two buttons for accepting or rejecting something. My goal is to make the accept button disappear when rejecting and vice versa. public function displayT ...

Clicking on a row in Rails bootstrap does not produce the desired result

I'm trying to make a row clickable in my Rails app using Bootstrap 4.1.3 to create the table. Rails version: 5.2.1 <tbody> <% @animals.each do |animal| %> <tr data-link="<%= animal_path(animal) %>"> <td&g ...

Is there a way to duplicate an object along with its unique form while retaining the form of the original object?

According to HTML specifications, it is not valid to have a 'form in form' structure. Here's my issue: Let's say I have a Car model form created using a Form Object that includes additional information. However, there is a section in t ...

Overwrite the JavaScript code to eradicate any flickering issues

Here are two JavaScript snippets provided. While they both perform their intended tasks, clicking on .info in the second snippet causes the classes to be added to the body as in the first snippet, resulting in unwanted flickering. Is there a way to prevent ...