Troubleshooting the malfunctioning of the Bootstrap slide animation

Question

Troubleshooting the malfunctioning of the Bootstrap slide animation

I've been attempting to implement scroll animation on a div, but for some reason, it's not working as intended. I must have made a mistake somewhere, but I can't figure out where. Any help in resolving this issue would be greatly appreciated. I was trying to follow this example

HTML Code:

<HTML>
<HEAD>
    <meta charset="utf-8">
    ... (the rest of the HTML code) ...

custom_Bootstrap.css file:

.sidebar1 {
    background: #F17153;
    /* Gradient styles */
    ... (more CSS styles) ...
}

.hidden{
    opacity:0;
}
.visible{
    opacity:1;
}

#wrapper {

    transition: all 0.4s ease 0s;
}

... (additional CSS styles) ...

@media (max-width: 1200px) {
    ... (responsive design rules) ...
}

customFunctions.js file:

// Implementing smooth scrolling for anchor links
$('a[href*="#"]')
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
        // Smooth scrolling behavior
        ... (scrolling function implementation) ...
    });

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Actually, your code is functioning perfectly. If you desire a slower sliding effect, simply adjust the animate seconds in the customFunction.js file.

$('a[href*="#"]')
// Removing links that do not lead anywhere
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
        // Links within the same page
        if (
            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            && location.hostname == this.hostname
        ) {
            // Determining the element to scroll to
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Checking if a scroll target exists
            if (target.length) {
                // Preventing default only if animation will occur
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 3000, function() {
                    // Callback after animation
                    // Changing focus as needed
                    var $target = $(target);
                    $target.focus();
                    if ($target.is(":focus")) { // Verifying if the target was focused
                        return false;
                    } else {
                        $target.attr('tabindex', '-1'); // Adding tabindex for non-focusable elements
                        $target.focus(); // Returning focus
                    };
                });
            }
        }
    });

I updated it from 1000 to 3000. Although it appears laggy, I personally find your original 1000 setting more effective.

Answer 2

Actually, your code is functioning perfectly. If you desire a slower sliding effect, simply adjust the animate seconds in the customFunction.js file.

$('a[href*="#"]')
// Removing links that do not lead anywhere
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
        // Links within the same page
        if (
            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            && location.hostname == this.hostname
        ) {
            // Determining the element to scroll to
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Checking if a scroll target exists
            if (target.length) {
                // Preventing default only if animation will occur
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 3000, function() {
                    // Callback after animation
                    // Changing focus as needed
                    var $target = $(target);
                    $target.focus();
                    if ($target.is(":focus")) { // Verifying if the target was focused
                        return false;
                    } else {
                        $target.attr('tabindex', '-1'); // Adding tabindex for non-focusable elements
                        $target.focus(); // Returning focus
                    };
                });
            }
        }
    });

I updated it from 1000 to 3000. Although it appears laggy, I personally find your original 1000 setting more effective.

Answer 3

Answer №2

Attempting to attach a click event to elements that have not yet been added to the DOM. To remedy this issue, you can enclose the script inside a $(document).ready() function or place it at the end of the body tag.

$(document).ready(function(){
    var $anchor = $('a[href*="#"]');
    console.log("anchor size:", $anchor.length);
    $anchor
        // Removing links that do not lead anywhere
        .not('[href="#"]')
        .not('[href="#0"]')
        .click(function(event) {
            // Anchors within the page
            if (
                location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
                && 
                location.hostname == this.hostname
            ) {
                // Determining the element to scroll to
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                // Checking if a scroll target exists
                console.log("target size:", target.length);
                if (target.length) {
                    // Preventing default only if animation will occur
                    event.preventDefault();
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000, function() {
                        // Callback after animation
                        // Changing focus
                        var $target = $(target);
                        $target.focus();
                        if ($target.is(":focus")) { // Checking if the target was focused
                            return false;
                        } else {
                            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                            $target.focus(); // Setting focus again
                        };
                    });
                }
            }
        });
});

Answer 4

Attempting to attach a click event to elements that have not yet been added to the DOM. To remedy this issue, you can enclose the script inside a $(document).ready() function or place it at the end of the body tag.

$(document).ready(function(){
    var $anchor = $('a[href*="#"]');
    console.log("anchor size:", $anchor.length);
    $anchor
        // Removing links that do not lead anywhere
        .not('[href="#"]')
        .not('[href="#0"]')
        .click(function(event) {
            // Anchors within the page
            if (
                location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
                && 
                location.hostname == this.hostname
            ) {
                // Determining the element to scroll to
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                // Checking if a scroll target exists
                console.log("target size:", target.length);
                if (target.length) {
                    // Preventing default only if animation will occur
                    event.preventDefault();
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000, function() {
                        // Callback after animation
                        // Changing focus
                        var $target = $(target);
                        $target.focus();
                        if ($target.is(":focus")) { // Checking if the target was focused
                            return false;
                        } else {
                            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                            $target.focus(); // Setting focus again
                        };
                    });
                }
            }
        });
});

Troubleshooting the malfunctioning of the Bootstrap slide animation

Answer №1

Answer №2

Similar questions

typescript api overlooking the async await functionality

How to dynamically inject HTML content from a child component into a different component using Angular 5

Is it possible to incorporate shadows on a pie chart using recharts?

Guide on setting up a configuration node in Node-RED

Tips for assigning dynamic values to ng-model in AngularJS

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Setting up package.json to relocate node_modules to a different directory outside of the web application:

Troubleshooting Rails 4: Handling a 404 Not Found Error When Making an AJAX Call to a

Guidelines for transforming an HTML string into a JavaScript document

What is the best way to view or save the content of a PDF file using a web service?

"Expo Securestore is encountering an issue where it is unable to store the user ID and token following authentication

The error message "MVC JS deletethisproduct is not defined at HTMLAnchorElement.onclick (VM457 Index:40)" indicates that there

The issue of bi-directional binding not working with ng-repeat in Directive Two has come to our attention,

Is it possible to use CSS to target the nth-child while also excluding certain elements with

Error: Data type exception encountered in JSP file

"Troubleshooting Issue: ASP.NET MVC - Unable to make JQuery call from URL without specifying

The JavaScript slideshow fails to display an image during one rotation

Having trouble retrieving the URL from JSON data - every time I attempt to access it, it just shows as undefined. Any suggestions

How to align a div with a background in CSS to the center

What is the best way to implement a delay before calling the owlCarousel function?