CODEWITHSUNDEEP
javascripthtmltemplatesbootstrap-4
user191110
user191110

Reputation: 109

Navigation buttons are not clickable on my bootstrap template

I'm trying to customise a single page bootstrap template into a multi-page. I have duplicated the index page and then tweaked them into services, et al. I've got the href pointing to these new pages, but the navbar buttons are not clickable. I suspect the JS is not built for multiple pages, but I don't have the know-how to deal with JS.

If someone here would care to look at it for me, the code/script is:

`

    <script src="js/jquery-1.11.3.min.js"></script>             <!-- jQuery (https://jquery.com/download/) -->
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h --> 
    <script src="js/bootstrap.min.js"></script>                 <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
    <script src="js/jquery.singlePageNav.min.js"></script>      <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) -->
    
    <!-- Templatemo scripts -->
    <script>     

    var bigNavbarHeight = 90;
    var smallNavbarHeight = 68;
    var navbarHeight = bigNavbarHeight;                 

    $(document).ready(function(){

        var topOffset = 180;

        $(window).scroll(function(){
           
            if($(this).scrollTop() > topOffset) {
                $(".navbar-container").addClass("sticky");
            }
            else {
                $(".navbar-container").removeClass("sticky");
            }

        });

        /* Single page nav
        -----------------------------------------*/

        if($(window).width() < 992) {
            navbarHeight = smallNavbarHeight;
        }

        $('#tmNavbar').singlePageNav({
           'currentClass' : "active",
            offset : navbarHeight
        });


        /* Collapse menu after click 
           http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click
        ----------------------------------------------------------------------------------------*/

        $('#tmNavbar').on("click", "a", null, function () {
            $('#tmNavbar').collapse('hide');               
        });

        // Handle nav offset upon window resize
        $(window).resize(function(){
            if($(window).width() < 992) {
                navbarHeight = smallNavbarHeight;
            } else {
                navbarHeight = bigNavbarHeight;
            }

            $('#tmNavbar').singlePageNav({
                'currentClass' : "active",
                offset : navbarHeight
            });
        });
        

        /*  Scroll to top
            http://stackoverflow.com/questions/5580350/jquery-cross-browser-scroll-to-top-with-animation
        --------------------------------------------------------------------------------------------------*/
        $('#go-to-top').each(function(){
            $(this).click(function(){ 
                $('html,body').animate({ scrollTop: 0 }, 'slow');
                return false; 
            });
        });
        
    });

    </script>

`

Upvotes: 0

Views: 164

Answers (1)

Open AI - Opting Out
Open AI - Opting Out

Reputation: 1631

Generally speaking, bootstrap hyperlink buttons don't need js to function.

If your hyperlink buttons are not working... You might want check a few things.

  • is there a css conflict, resulting in your buttons not being click able, z-index is a common issue.

  • is there any JS which calls e.preventDefault() on your hyperlinks, as that would block the normal behaviors.

You could add a little js in the console to aide in debugging $('*').click(function(e){console.log(e)}) then click on your button and see what is logged, or simply check the events panel in dev tools.

UPDATE: based on OP comments below...

Ok, so it was in-fact an issue with your JavaScript, specificly the 'jquery.singlePageNav.min.js' JavaScript file.

Here is where the issue lies:

handleClick: function( t ) {
        var n = this, r = t.currentTarget , i = e( r.hash );

            t.preventDefault(); <---- This prevents, the default behavior of anchor tags...
            
            if ( i.length ) {
                n.clearTimer();
                if ( typeof n.options.beforeStart === "function" ) {
                    n.options.beforeStart()
                }
                n.setActiveLink( r.hash );
                n.scrollTo( i, function() {
                    if ( n.options.updateHash && history.pushState ) {
                        history.pushState( null, null, r.hash )
                    }
                    n.setTimer();
                    if ( typeof n.options.onComplete === "function" ) {
                        n.options.onComplete()
                    }
                } )
            }
    }

I've patched the file, to allow "external" hrefs to work as expected.

handleClick: function( t ) {
            var n = this, r = t.currentTarget , i = e( r.hash );

            if((t.target.href.replace( document.URL, '')).replace(location.protocol+'//', '')[0]  === '#'){ // <-- this will permit "non leading #" urls to behave normally.

                t.preventDefault();
                
                if ( i.length ) {
                    n.clearTimer();
                    if ( typeof n.options.beforeStart === "function" ) {
                        n.options.beforeStart()
                    }
                    n.setActiveLink( r.hash );
                    n.scrollTo( i, function() {
                        if ( n.options.updateHash && history.pushState ) {
                            history.pushState( null, null, r.hash )
                        }
                        n.setTimer();
                        if ( typeof n.options.onComplete === "function" ) {
                            n.options.onComplete()
                        }
                    } )
                }
            }

            
        }

Here is an un-minified version with my patches:

/**
 * Single Page Nav Plugin
 * Copyright (c) 2014 Chris Wojcik <[email protected]>
 * Dual licensed under MIT and GPL.
 * @author Chris Wojcik
 * @version 1.2.0
 * @modified to support external hyperlinks...
 */
if ( typeof Object.create !== "function" ) {
    Object.create = function( e ) {
        function t() {}
        t.prototype = e;
        return new t
    }
}( function( e, t, n, r ) {
    "use strict";
    var i = {
        init: function( n, r ) {
            this.options = e.extend( {}, e.fn.singlePageNav.defaults, n );
            this.container = r;
            this.$container = e( r );
            this.$links = this.$container.find( "a" );
            if ( this.options.filter !== "" ) {
                this.$links = this.$links.filter( this.options.filter )
            }
            this.$window = e( t );
            this.$htmlbody = e( "html, body" );
            this.$links.on( "click.singlePageNav", e.proxy( this.handleClick, this ) );
            this.didScroll = false;
            this.checkPosition();
            this.setTimer()
        }
        , handleClick: function( t ) {
            var n = this, r = t.currentTarget , i = e( r.hash );

            if((t.target.href.replace( document.URL, '')).replace(location.protocol+'//', '')[#] ){

                t.preventDefault();
                
                if ( i.length ) {
                    n.clearTimer();
                    if ( typeof n.options.beforeStart === "function" ) {
                        n.options.beforeStart()
                    }
                    n.setActiveLink( r.hash );
                    n.scrollTo( i, function() {
                        if ( n.options.updateHash && history.pushState ) {
                            history.pushState( null, null, r.hash )
                        }
                        n.setTimer();
                        if ( typeof n.options.onComplete === "function" ) {
                            n.options.onComplete()
                        }
                    } )
                }
            }

            
        }
        , scrollTo: function( e, t ) {
            var n = this;
            var r = n.getCoords( e ).top;
            var i = false;
            n.$htmlbody.stop().animate( {
                scrollTop: r
            }, {
                duration: n.options.speed
                , easing: n.options.easing
                , complete: function() {
                    if ( typeof t === "function" && !i ) {
                        t()
                    }
                    i = true
                }
            } )
        }
        , setTimer: function() {
            var e = this;
            e.$window.on( "scroll.singlePageNav", function() {
                e.didScroll = true
            } );
            e.timer = setInterval( function() {
                if ( e.didScroll ) {
                    e.didScroll = false;
                    e.checkPosition()
                }
            }, 250 )
        }
        , clearTimer: function() {
            clearInterval( this.timer );
            this.$window.off( "scroll.singlePageNav" );
            this.didScroll = false
        }
        , checkPosition: function() {
            var e = this.$window.scrollTop();
            var t = this.getCurrentSection( e );
            this.setActiveLink( t )
        }
        , getCoords: function( e ) {
            return {
                top: Math.round( e.offset().top ) - this.options.offset
            }
        }
        , setActiveLink: function( e ) {
            var t = this.$container.find( "a[href$='" + e + "']" );
            if ( !t.hasClass( this.options.currentClass ) ) {
                this.$links.removeClass( this.options.currentClass );
                t.addClass( this.options.currentClass )
            }
        }
        , getCurrentSection: function( t ) {
            var n, r, i, s;
            for ( n = 0; n < this.$links.length; n++ ) {
                r = this.$links[ n ].hash;
                if ( e( r ).length ) {
                    i = this.getCoords( e( r ) );
                    if ( t >= i.top - this.options.threshold ) {
                        s = r
                    }
                }
            }
            return s || this.$links[ 0 ].hash
        }
    };
    e.fn.singlePageNav = function( e ) {
        return this.each( function() {
            var t = Object.create( i );
            t.init( e, this )
        } )
    };
    e.fn.singlePageNav.defaults = {
        offset: 0
        , threshold: 120
        , speed: 400
        , currentClass: "current"
        , easing: "swing"
        , updateHash: false
        , filter: ""
        , onComplete: false
        , beforeStart: false
    }
} )( jQuery, window, document )

Alternatively, if you update your singlePageNav.js file to the newest version, 1.2.1, you could set it up to accomplish the same as my scripts above, by some simple configuration.

Add the .external class to any links, which should be treated as "external"

Then, ensure to update your .singlePageNav options, with:

$('#navigation-bar').singlePageNav({'filter': ':not(.external)'});

Upvotes: 2

Related Questions