Adding the Navigation with our own text?

[adamazad]

instead of using those circles, it would be nice to use something like:

<ul class="myNav>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>

Thanks in advance

[dillondotzip]

Any idea on how to accomplish this?

[raykanani]

Add this script

<script>
  $(document).ready(function(){
  $(".main").onepage_scroll({
    sectionContainer: "section"
  });
  $("#scroll").click(function(){
  $(".main").jumpTo($(this).data("target"));
  });
    });

</script>

Then add this to your nav elements

a href="#" data-target="2" id="scroll"

*note: data-target is page number and your first page is = '0'

[dillondotzip]

Doesn't seem to work. just adds the # after the url.

[dillondotzip]

I get this error: TypeError: Object [object Object] has no method 'jumpTo'

[raykanani]

Make sure you have the latest release of onepage-scroll

[dillondotzip]

jquery-onepage-scroll.js v1.2

[raykanani]

Make sure the following function is included

$.fn.jumpTo = function(newIndex) { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (newIndex+1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = 0; next = $(settings.sectionContainer + "[data-index='" + (newIndex) + "']"); } else { return }

}else { pos = (newIndex * 100) * -1; }

current.removeClass("active") next.addClass("active"); if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); }

$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index"))

if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, newIndex); }

[raykanani]

If you still have problems, check out the following thread

https://github.com/peachananr/onepage-scroll/issues/6

[dillondotzip]

It works when I add the code and enter $(".main").jumpTo($(this).data("target")) in the console. But when I press the actual anchor tag link nothing happens.

[dillondotzip]

Here is the navbar im using.
`

• Page 1

        <li><a href="#" data-target="2" id="scroll">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>`

[dillondotzip]

Got it to work. Had to be explicit and state the parent class. eg; .navbar-inverse .navbar-nav>li>a

[solarta]

Hi I'm also trying to achieve this but without any luck. I put the function that Raykanini mentioned at the bottom of my jquery.onepage-scroll.js and I used the same navbar as you did dillonrapheal. I also added the first script on this page to my index.html, before the ending of the . Now I placed the navbar in a wrapper and main div. It is not showing up and the bullets are still showing. What exactly did you mean by had to be explicit and state the parent class? where exactly did you put the class? @dillonraphael @raykanani