Adding a menu with active class

[ghost]

Hello,

I would like to build a website with jmpress, but I need a navigation bar, and mark the link of the current slide as active, in order to apply some CSS.

I suppose jmpress can do this, because the main demo also has this behaviour.

But I am not shure where to find the needed code for this. Which demo do I have to check?

Thank you!!

[sokra]

https://github.com/shama/jmpress.js/blob/master/src/components/demo.js#L80

[ghost]

Hello sokra,

I really appreciate your assistance.

I have applied this solution to my web page. In header (working with local files):

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>       
<script type="text/javascript" src="jmpress.all.min.js"></script>
<script type="text/javascript" src="demo.js"></script>

These files haven't been modified at all.

Markup of my navigation bar:

<ul id="nav">
                <li><a href="#home"><span>Home</span></a></li>
                <li><a href="#myslide1"><span>Slide1</span></a></li>
                <li><a href="#myslide2"><span>Slide2</span></a></li>
</ul>

Slide tags:

<div id="jmpress">
      <div id="home" class="step">Home</div>
      <div id="myslide1" class="step">Slide1</div>
      <div id="myslide2" class="step">Slide2</div>
</div><!-- #jmpress -->

Then, before close tag:

<script type="text/javascript">
            $("#jmpress").addClass("init-css");
            $(function() {
                $("#jmpress").jmpress('demo');
            });
</script>

Everything is working fine, but I can see in LI that the class="active" is added, and when clicking on link or changing slide, the class is emptied, not completely removed. In your demo, the class is completely removed, which I suppose is the best solution, isn't it?

Please let me know If I have done something wrong, please.

Thank you very much for your time. :-)

[sokra]

Woa... you should not use our demo method. jmpress("demo") should not even be availible if you have downloaded the right version: Downloads. Do not include demo.js.

I referenced just a piece of code in our demo you can reuse:

$("#jmpress").jmpress({
  // you config options...
  setActive: function(step) {
    $("#nav").children().removeClass("active");
    $("#nav").find("a[href=#" + $(step).attr("id") + "]").parent().addClass("active");
  }
})

This should make it for your code.

Read the documentation for more info.

[ghost]

Thank you sokra.