JQuery's action go to start when I reload the page

[Ayala]

Hi,

I would like to make a slider for my menu. It should be above the actually active menuitem.
I can’t really show my problem in codepen. But I can show my jquery:

https://codepen.io/Ayalann/pen/xrrjgg

I got this from here: https://codepen.io/Ruddy/pen/eNpXQz

My problem is when I click on the menuitem in my page, the slider is moving but when the new page is downloaded the slider go to the start. It doesn’t stay above the active menuitem.

That is why I tried to do this:

  if ($(".sf-main-menu li").hasClass("active-trail")) {
  $(".slider").css({
    left: howFar + "px"
  });

But it doesn’t work.

How can I solve this?

[rkieru]

This needs a bit more clarity – if I understand you correctly you want to make sure that the current active page (ex. foo.html vs. bar.html) has the .active-trail class applied.

In order to do that you need some way to determine the current page and that’s going to depend largely on your environment (WordPress, static HTML, etc, etc).

To use WordPress as an example; if this is your main navigation you could add a function to your theme to apply the aforementioned class as outlined in the following question on StackOverflow:

https://stackoverflow.com/questions/35645264/wordpress-adding-active-class-to-active-menu-items-sub-pages

The answer in the above link also outlines a CSS-only option which may appeal to you, as WordPress should (by default) already apply a special class to the current page.

[JeroenR]

I guess I would make the click function a separate function which you can call from the click event as well as the document ready event.
The click event passes the right item by clicking on the item. Document ready passes the right item by searching for your active-trail class, or just get the first item.
The result would then be something like this: https://codepen.io/jeroenreijs/pen/rwzLwo

[Ayala]

Thanks, meanwhile I solved it.

Here:

jQuery(function ($) {



$(function() {
  function menuChange(ths) {
    var whatTab = $(ths).index();
    var howFar = 120 * whatTab;
    //var howWidth = $(".sf-main-menu li").css('width');

    if ($(".sf-main-menu li").hasClass("active-trail")) {
      $(".slider").css({
        marginLeft: howFar + "px"
        //width: 
      });

    }

  }
  //$(".sf-main-menu li").click(function() {
  //  menuChange(this);
  //});
  menuChange($(".sf-main-menu li.active-trail"));

});



});

[Author]

Posts