Why is my dot navigation using JavaScript not working. (won't jump to sections on the page)

Question

Hi there I am making the site and I found this dot navigation:

http://tympanus.net/codrops/2014/01/21/dot-navigation-styles/

I was trying for ages so that the nav would jump to another section but I just won't. Until I realised that it was something with the JavaScript used in the nav. When I take it out it the nav work as it is meant to but doesn't have that cool dot move thing going on that I want.

Here is the nav that is in question:

<header role="banner" class="home" id="home">

      <div class="container">
            <div class="wrap clearfix">

                <div class="dotstyle dotstyle-dotmove" style="padding-top: 1%;">
                    <ul>
                        <li> <a href="#home" class="current">asxasx</a></li>
                        <li><a href="#content1">About</a></li>
                        <li><a href="#content2">Products</a></li>
                        <li><a href="#content3">Portfolio</a></li>
                        <li><a href="#content4">Blog</a></li>
                        <li><a href="#content5">Contact</a></li>
                        <li><!-- dummy dot --></li>
                    </ul>
                </div>

        </div><!-- /container -->

  </header>

<div class= "content">
    <section class= "content1" id="content1"  name="content1">

      <h2>Finding the</h2>

<h2>'Extinct'</h2>

 <h2>New Zealand </h2>

 <h2>Bird</h2>

 <em><p class="by">March, 1952 - Volume CI - Number Three - By R. V. Francis Smith</p></em>
    </section>

    <section class= "content2" id="content2">

      <h3>Finding an Extinct New Zealand Bird</h3>

      <p>In New Zealand's rugged Fiordland a bird thought extinct for fifty years is struggling for survival. Behind the rare species in its fight for life is all the protective power of the Dominion Government.</p>

<p>Rediscovery of this flightless bird, the large, brilliant-hued native rail which the Maoris called takahea, meaning "wandering at large," excited almost as much interest in New Zealand as discovery of a living passenger pigeon would arouse in America.</p>

<p>To zoologists and bird lovers throughout the world, reappearance of takahea, now called the takahe, was a notable event. They had a scientific name for the creature–Notornis hochstetteri, the first half of which means "bird of the south"–but they knew tantalizingly little about it and had considered it lost in the limbo of vanished species.</p>

<p>To the rediscoverer, Dr. G. B. Orbell, a physician of Invercargill, New Zealand, the dramatic sight of a takahe alive came as the reward of years of patient and systematic search. Only four of the birds were known to science when he made his discovery on the shore of a lake in what is now called Notornis Valley. Since August, 1898, there had been no authentic report of one being caught, or even seen.</p>

    </section>

    <section class= "content3"  id="content3">

    </section>
    <section class= "content4" id="content4">

Then this is what breaks the nav:

    </section>
</div>
<script src="js/dots.js"></script>
<script>
[].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
  new DotNav( nav, {
    callback : function( idx ) {
      //console.log( idx )
    }
  } );
} );

More importantly this is what this script links to:

( function( window ) {

    'use strict';

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function DotNav( el, options ) {
        this.nav = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }

    DotNav.prototype.options = {};

    DotNav.prototype._init = function() {
        // special case "dotstyle-hop"
        var hop = this.nav.parentNode.className.indexOf( 'dotstyle-hop' ) !== -1;

        var dots = [].slice.call( this.nav.querySelectorAll( 'li' ) ), current = 0, self = this;

        dots.forEach( function( dot, idx ) {
            dot.addEventListener( 'click', function( ev ) {
                ev.preventDefault();
                if( idx !== current ) {
                    dots[ current ].className = '';

                    // special case
                    if( hop && idx < current ) {
                        dot.className += ' current-from-right';
                    }

                    setTimeout( function() {
                        dot.className += ' current';
                        current = idx;
                        if( typeof self.options.callback === 'function' ) {
                            self.options.callback( current );
                        }
                    }, 25 );                        
                }
            } );
        } );
    }

    // add to global namespace
    window.DotNav = DotNav;

})( window );

I can't spot what would be causing the error to happen.
So any help would be great

EDIT

After looking into it more I still can't see what would be causing the problem with the nav to not work. I might just try to see if I can get something else to work.

I will keep this up though as someone might figure out and it could help someone.

Edit Two

Actually I have had one more look and I think it something to do with the dot over laying the other dots.

.dotstyle-dotmove li:last-child::after

As once I change the position of this the nav works but the dot move does not.

Edit Three

So I done some digging and a lot of people can't figure this problem out. I did find that someone else thought that the problem is with this part of the JavaScript;

<script>
[].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
  new DotNav( nav, {
    callback : function( idx ) {
      //console.log( idx )
    }
  } );
} );

But once again I can't understand why this is.

Answer 1

The problem is the line ev.preventDefault(); in dot.js which disables the standard href functionality. There is however a workaround. Follow these three steps:

1) Change <div class= "content"> to <div class= "content" id="contentWrapper">

2) Add this style (in order to hide all sections on load)

#contentWrapper section{
    visibility:hidden;
}

3) Add these lines after ev.preventDefault();

var nodes = document.getElementById('contentWrapper').childNodes;//Select all sections
for(var i=0; i<nodes.length; i++) {
    if (nodes[i].nodeName.toLowerCase() == 'section') {
         nodes[i].style.visibility = 'hidden';//Hide all sections
    }
}

var sectionID = dot.children[0].attributes.getNamedItem('href'); //The chosen section's ID      
document.querySelector(sectionID.value).style.visibility = 'visible';//Show the chosen one