Error in jQuery animation on Bootstramp template

For my website, I utilized a template that can be found here: http://www.bootply.com/100702. However, the animated menu is experiencing issues such as being buggy and laggy when clicking on menu options.

Upon clicking on the link provided, the page blinks to the wrong position before displaying the animation.

I have a suspicion that the problem lies within this particular code snippet:

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700);
})

Do you think adding a delay between clicks or implementing another method would improve the animation?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

The issue with the ScrollSpy functionality is that it triggers as you scroll down the page. To fix this, simply add the class spy-activated

<div class="navbar navbar-custom navbar-inverse navbar-static-top spy-activated" id="nav">

Specify the targeted class

$('body').scrollspy({ target: '.spy-activated' })

Turn on and off the spy-activated class while scrolling. And make sure to manually adjust the "active" class on the li elements

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  $("#nav").removeClass("spy-activated");
  $(this).parent().siblings().each( function(){ $(this).removeClass("active"); });
  $(this).parent().addClass("active");
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700, function(){
     $("#nav").addClass("spy-activated");
  });
})

View the code in action on bootply: http://www.bootply.com/YmaEAbUWEf

Answer №2

There is a bug in the code that needs to be fixed.

The solution is to add the following line of code:

  e.preventDefault();

This will disable the default behavior of the section.

Here is the corrected version of the code:

$('#nav .navbar-nav li>a').click(function(e){
  var link = $(this).attr('href');
  var position = $(link).offset().top;
  e.preventDefault();
  $('body,html').animate({scrollTop:position},700);
});

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

TypeScript Generic Functions and Type Literals

Everything seems to be running smoothly: type fun = (uid: string) => string const abc: fun = value => value const efg = (callback:fun, value:string) =>callback(value) console.log(efg(abc, "123")) However, when we try to make it generic, we e ...

javascripttypescriptfunctiongenericsliterals

Challenge with the height of the jQuery Sexy Combo wrapper

I am facing a height issue with Sexy Combo, a jQuery editable drop-down list plugin. The author of the script did not optimize the drop-down to display correctly in a popup that is not visible upon page load. When the popup is loaded and the drop-down is c ...

jquery

Ways to calculate the total of two arrays

One of my recent challenges involved creating a calculator using JavaScript. The main issue I encountered was figuring out how to find the sum of 2 arrays. The first number, 33, is saved to an array called num1, and the second number, 99, is saved to an a ...

javascript

Custom filtering in Angular using ngTables is an advanced feature that allows

I am currently working on implementing custom filtering in ngTables, similar to this example. I have a set of columns with standard text input filters, but for some of them, I want to utilize my own filtering function instead of the default angular $filter ...

javascriptangularjsfilteringngtable

Developer server experiencing CSS issues in Django admin interface

Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this: This obviously isn't what I want, so I'm trying t ...

cssdjangodjango-admin

How to Fetch Data Using jQuery AJAX in PHP Without Page Refresh

I am trying to prevent the page from refreshing when clicking on a select option, but when I do so, the data does not get updated. Here is the code: echo "<form name='frmtopdevotees' method='post' action='topuser_load.php&apos ...

javascriptphphtmlmysqlajax

Update the div without altering its contents

Hello, I have a webpage where I am utilizing multiple select lists sourced from 4 different XML files. There is a function that updates one specific div by loading an XML file using the PHP command "$scripts = simplexml_load_file($link);" and then applies ...

html

Executing a JavaScript function upon page load without the need for an onclick event

I have a footer.php file that contains JavaScript code and functions which I use on all of my pages. While I usually call the function MyFunc() using onclick event when clicking buttons, there are some pages where I need to call it without any user interac ...

phpjavascripthtml

Is an external source compatible with Jquery autocomplete/combobox?

Searching for a selectbox autocompleter that mimics the functionality of a combobox, where if a value does not exist it returns false/null. http://jqueryui.com/demos/autocomplete/#combobox Is there a method to integrate an external datasource with the co ...

jqueryajaxautocompletecombobox

The filter function results in a blank array being returned

I'm facing a dilemma, I have a constant defined as export const STATUS = [{ 0: 'Draft', 1: 'Sent', 2: 'Processing', 9: 'Processed', 3: 'Scheduled', 4: 'Filed', 5: 'Suspende ...

javascriptarraystypescript

Selenium unable to interact with Javascript pop-up box

I am currently working on automating a feature for our web application, specifically a form of @mentioning similar to Facebook. On the front end, when a user types @ into a text input, the API is called to retrieve the list of users and display them in a b ...

javascriptpython-3.xseleniumpython-behave

Transforming a nested list in asp.net mvc c# into a JavaScript array

These are the models I am working with: public class ModelA { List<ModelB> ModelB {get;set;} } public class ModelB { List<ModelC> ModelC {get;set} } In an attempt to convert these models into my view, I referred to this answer. <scri ...

javascriptc#asp.netarrays

Having trouble with the Tailwind transition in my Next.js component

I'm facing an issue with the ease out transition not working as expected. I need the side to slide in from left to right with a duration of 500ms. Despite trying various solutions, I can't seem to figure out why it's not functioning properly ...

cssnext.jstailwind-csstailwind-ui

Modify the HTML of the page after altering the dropdown selection

I have a total of 3 pages, including the main page. I am looking to access the first and second pages by changing the dropdown list selection. This is my jQuery code within my HTML file named main.html. <html> <head> <link rel=&quo ...

phphtmljquery

fetching data from a component modified by another component in Svelte

In this particular component, I am capturing user input and storing it in variables. I would like this value to be automatically updated in another component when the submit button is clicked. <script> import { onMount } from "svelte"; ...

javascriptsveltesvelte-3

Cannot load JSON file from Visual Studio 2013

I am currently working on building a drag-able network diagram using d3.js, and I've come across an unusual issue. Whenever I try to run the page from Visual Studios 2013, I encounter the following error: "Unhandled exception at line 25, column 13 in ...

javascriptasp.netjsond3.js

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

I created a project using .net core MVC. I have integrated the semantic-ui-react modal by importing its library and linking the CSS for it to function properly. However, I encountered an issue where the bootstrap CSS was conflicting with the CDN for semant ...

htmlcsstwitter-bootstrapreactjs

Is there a way to add text to a table row using knockout?

I have been tasked with incorporating knockout js into my application. The table structure is as follows: <table> <tr> <th> Name </th> <th> Category </th> ...

javascriptjqueryhtmlknockout.js

pure-react-carousel: every slide is in view

Issue I am encountering a problem where the non-active slides in my container are not being hidden properly. This results in all of the slides being visible when only one should be displayed. Additionally, some slides are rendering outside of the designate ...

javascriptcssreactjspure-react-carousel

utilizing javascript to compare the data in a gridview with the value entered in a

I am looking to compare the values entered in my textbox with the existing values in a gridview. I have achieved this on the server side using the following function: protected void isRecordAlreadyExist(TextBox txt_Value, int res) { ds_main = new Data ...

javascriptasp.net