How to keep the menu state on page reload

Question

I have the following code snippet and wanted to know if there is a possibility to update it achieving this menu behaviour:

Step 1. On mouse hover Link 1 ----> it will be translated 1.5em to the right (already set);

Step 2. On Link 1 click ----> the menu button will remain fixed in place at the already translated position (done, special thanks to @guest271314) on the page reload too, until a new menu button is clicked (not set yet) and another page is loaded.

note: next/prev buttons code section, remain unchanged (or can be edited if it's a must, in order to remain functional).

note2: I have to mention that in the end, the solution will be implemented in wordpress not into a static html sitepage.

$(function () {
    $('nav ul li').click(function (e) {
        //Set the aesthetics (similar to :hover)
        $('nav ul li')
        .not(".clicked").removeClass('hovered')
        .filter(this).addClass("clicked hovered")
        .siblings().toggleClass("clicked hovered", false);
    }).hover(function () {
        $(this).addClass("hovered")
    }, function () {
        $(this).not(".clicked").removeClass("hovered")
    });

    var pageSize = 4,
        $links = $(".pagedMenu li"),
        count = $links.length,
        numPages = Math.ceil(count / pageSize),
        curPage = 1;

    showPage(curPage);

    function showPage(whichPage) {
        var previousLinks = (whichPage - 1) * pageSize,
            nextLinks = (previousLinks + pageSize);
        $links.show();
        $links.slice(0, previousLinks).hide();
        $links.slice(nextLinks).hide();
        showPrevNext();
    }

    function showPrevNext() {
        if ((numPages > 0) && (curPage < numPages)) {
            $("#nextPage").removeClass('hidden');
            $("#msg").text("(" + curPage + " of " + numPages + ")");
        } else {
            $("#nextPage").addClass('hidden');
        }
        if ((numPages > 0) && (curPage > 1)) {
            $("#prevPage").removeClass('hidden');
            $("#msg").text("(" + curPage + " of " + numPages + ")");
        } else {
            $("#prevPage").addClass('hidden');
        }
    }

    $("#nextPage").on("click", function () {
        showPage(++curPage);
    });
    $("#prevPage").on("click", function () {
        showPage(--curPage);
    });

});

.hidden {
    display: none;
}

body {
    font: normal 1.0em Arial, sans-serif;


}


nav.pagedMenu {
    color: red;
    font-size: 2.0em;
    line-height: 1.0em;
    width: 8em;
    position: fixed; 
    top: 50px;
}

nav.pagedMenu ul {

    list-style: none;
    margin: 0;
    padding: 0;
}

nav.pagedMenu ul li {
    height: 1.0em;
    padding: 0.15em;
    position: relative;
    border-top-right-radius: 0em;
    border-bottom-right-radius: 0em;
    -webkit-transition: 
    -webkit-transform 220ms, background-color 200ms, color 500ms;
    transition: transform 220ms, background-color 200ms, color 500ms;
}


nav.pagedMenu ul li.hovered {
    -webkit-transform: translateX(1.5em);
    transform: translateX(1.5em);
}
nav ul li:hover a {
    transition: color, 1200ms;
    color: red;
}
nav.pagedMenu ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0; bottom:0;
    margin:auto;
    right: 0.01em;
    color: #F8F6FF;

}

a {
    color: gold;
    transition: color, 1200ms;
    text-decoration: none;
}

#pagination, #prevPage, #nextPage {
    font-size: 1.0em;
    color: gold;    
    line-height: 1.0em;
    padding-top: 250px;
    padding-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pagedMenu">
   <ul style="font-size: 28px;">
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li>
     <li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li>
  </ul>
</nav>

<div id="pagination">
    <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;
    <a href="#" id="nextPage" class="hidden">Next</a>
    <span id="msg"></span>
</div>

LE: regarding @Lars comment:

This state will be applied per all users (I think?, it's the best option as long as the menu will be displayed on every pages, unconditioned by the browser type or the session);

Also regarding the storage location, it's not a problem saving the state locally, server side, but it will be great if I have some pro/cons to make the right decision;

In the end, if this helps, in order to see the whole picture, you can use this live link as example; there is a similar menu with the above described and regarding the state, if there is a model that could be implemented here, I'll be glad to find it.

You're asking for state perseverance in a web environment. This comes with a lot of considerations. For example, should this state be applied per browser/session/user/all users. You could save the state locally, server side or even make the state URL dependent (yoursite.com/link1 -> yourisite.com/link2). It's unclear what you kind of solution you're looking for. You might want to specify the use-case more clearly. — Lars, Sep 21 '15 at 08:37
oh I didn't know, thanks for your info ... As long as this is a menu of a public site, will be applied without restrictions (if that is the question) available for all users. I was thinking about this solution, utilizing `$.holdReady()` , `history`, made by @guest271314 but not so sure how can I apply the sequence in my snippet http://stackoverflow.com/a/30144363/4642215 . Also please have a look at this [live example](http://goo.gl/K9s3vQ). This is what I'm looking for exept the fact that I can live without translate on click over the already translated position on hover. — typo_, Sep 21 '15 at 09:06
regarding the above mentioned [live example](http://goo.gl/K9s3vQ), in order to see the whole picture, try to navigate between _works_, _books_, etc menu items to see how they're acting. — typo_, Sep 21 '15 at 09:09
Took a quick look at the "live example" ... appears to me they use AJAX to load new content, and if so, you don't need to worry about keeping state between loads as the menu never gets reloaded ... this way you will be able to do almost anything with your menu's state with very little coding — Asons, Sep 23 '15 at 17:36
thanks for your interest, I've tried [AWS](https://wordpress.org/plugins/ajaxify-wordpress-site/) plugin but without good results, perhaps not so good implementation approach or code conflicts (?) http://stackoverflow.com/q/32770490/4642215 — typo_, Sep 24 '15 at 20:59
You can do it through the database with variables if you want, which I find easier to do. — i am me, Sep 25 '15 at 18:11
can you please formulate an answer? honestly, I have no idea how, I'm a pure noob just grab and put together codes, sometimes works ... that's all — typo_, Sep 25 '15 at 18:14
Lots of misdirection in these comments. What you're looking for is usually solved by [routing](http://www.staticapps.org/articles/routing-urls-in-static-apps) - the use of the URL to set page state. — xdumaine, Sep 25 '15 at 18:14
Dear all, is it too much if ask you to formulate an answer applicable in my case please ? lots of solutions here but it's like having in front a bunch of options but my hands are tight ... I don't know much about coding ... it's hard to implement something described in general terms. — typo_, Sep 25 '15 at 18:22
@xdumaine routing technique have the same effect as Ajax loading leaving the specified content on the page on refresh/reload? — typo_, Sep 26 '15 at 05:49
@typo_78 - no, they have different effects, primarily bookmarking and deep linking - What if User A wants to send a link to "Link 2" to User B, or share it on social media? "User B" or other users who click the link will be taken to "Link 1" instead of "Link 2" - routing solves that problem, because the "state" information is right there in the URL, and doesn't rely on them having taken a previous action. — xdumaine, Sep 28 '15 at 12:20

score 4 · Accepted Answer · answered Sep 25 '15 at 18:09

4

You can save menu (and page) status in a localStorage variable. On page load check if the variable exists and set correct Link/page status.

https://github.com/julien-maurel/jQuery-Storage-API

answered Sep 25 '15 at 18:09

Diego Betto

721
6
19

sounds great but as I've just said above, I'm a pure noob just grab and put together codes, sometimes works – typo_ Sep 25 '15 at 18:15
Something like (not tested) $(function () { storage=$.localStorage; if(storage.isSet('page')){ var page= storage.get('page'); showPage(page); } if(storage.isSet('link')){ var link = storage.get('link'); $('nav ul li:nth-child('+link+')').addClass("clicked hovered"); } ... $('nav ul li').click(function (e) { storage.set('link',$('nav ul li').index($(this))); ... ... $("#nextPage").on("click", function () { showPage(++curPage); storage.set('page',curPage); }); ... /* same for prev */ – Diego Betto Sep 25 '15 at 18:23
hope you don't mind, is it too much if you use a jsfiddle please? https://jsfiddle.net/ I appreciate it – typo_ Sep 25 '15 at 18:28
Thank you for your effort, I've implemented the code from your fiddle into my wordpress page registering the `JS` file, all set but not so sure, should I still make something, include the plugin too or it's already included ? the point is that the menu state it's not kept on page reload. can you please [have a look](http://goo.gl/xGBMtI) I appreciate it – typo_ Sep 25 '15 at 20:31
In other words, on page reload the menu button should remain in place shifted a few pixels to the right, after the `onclick` event. By the way `mynewmenu.js` is the saved file containing your `JS` / `jQuery` code file ... – typo_ Sep 25 '15 at 20:39
1

Check the updated code http://jsfiddle.net/ex3ntia/hrt2s221/1/ You are using jQuery, not $ – Diego Betto Sep 25 '15 at 20:43
sorry, right. done, and now? :) the same, menu state still not kept on refresh; – typo_ Sep 25 '15 at 20:45
1

Because your site is different from your jsfiddle :) You have multiple "nav ul li". There is an hidden one (#mobile-menu) and a visibile one. So you need to use jQuery('nav:visible ul li') as selector http://jsfiddle.net/ex3ntia/hrt2s221/4/ – Diego Betto Sep 25 '15 at 20:52
thank you, almost there; pagination (next/previous menu buttons) is messing around, if you click on about us, on refresh will be loaded 1 of 2 not 2 of 2; also there are still some errors in the console like mynewmenu.js:64 page 2, or mynewmenu.js:69 link 6 (on about us page on other pages different similar errors); Anyway the behaviour looks ok overall. any thoughts? – typo_ Sep 25 '15 at 21:03
curPage = page; http://jsfiddle.net/ex3ntia/hrt2s221/5/ I don't see these errors – Diego Betto Sep 25 '15 at 21:08
1

haha ok, these are not errors, are "console.log" commands used to debug. Just remove from the script :) – Diego Betto Sep 25 '15 at 21:10
these http://imgur.com/e0kzUFr , http://imgur.com/2sFYfqp what should I remove from the script? :) do you mean refresh the console or removing lines from the js file? – typo_ Sep 25 '15 at 21:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/90655/discussion-between-typo-78-and-diego-betto). – typo_ Sep 25 '15 at 21:16

How to keep the menu state on page reload

1 Answers1

Linked