Link to home
Avatar of lenamtl
lenamtlFlag for Canada

asked on

how to add cookie.js to remember menu state

Hi,

I want to add cookie.js to a menu that will remember the state menu
jQuery cookie https://github.com/carhartl/jquery-cookie
There are some good example on the web but I cannot to adapt it to this menu and I have to use this menu
I cannot change for another one

This is the original menu js code

(function($) {
    "use strict";

    $.fn.tree = function() {

        return this.each(function() {
            var btn = $(this).children("a").first();
            var menu = $(this).children(".treeview-menu").first();
            var isActive = $(this).hasClass('active');

            //initialize already active menus
            if (isActive) {
                menu.show();
                btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
            }
            //Slide open or close the menu on link click
            btn.click(function(e) {
                e.preventDefault();
                if (isActive) {
                    //Slide up to close menu
                    menu.slideUp();
                    isActive = false;
                    btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
                    btn.parent("li").removeClass("active");
                } else {
                    //Slide down to open menu
                    menu.slideDown();
                    isActive = true;
                    btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
                    btn.parent("li").addClass("active");
                }
            });

            /* Add margins to submenu elements to give it a tree look */
            menu.find("li > a").each(function() {
                var pad = parseInt($(this).css("margin-left")) + 10;

                $(this).css({"margin-left": pad + "px"});
            });

        });

    };

Open in new window


This is what have tried  and this is not working
(function($) {
    "use strict";

    $.fn.tree = function() {

     [b]   return this.each(function(e) {
		     var checkCookie = $.cookie("nav-item");
             if (checkCookie != "") {
	         $('.treeview:eq('+checkCookie+')').addClass('active').next().show();
             }[/b]
			 
            var btn = $(this).children("a").first();
            var menu = $(this).children(".treeview-menu").first();
            var isActive = $(this).hasClass('active');

            //initialize already active menus
            if (isActive) {
                menu.show();
                btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
		[b]		$.cookie("nav-item", menu);[/b]
            }
            //Slide open or close the menu on link click
            btn.click(function(e) {
                e.preventDefault();
				
                if (isActive) {
                    //Slide up to close menu
                    menu.slideUp();
                    isActive = false;
                    btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
                    btn.parent("li").removeClass("active");
                } else {
                    //Slide down to open menu
                    menu.slideDown();
                    isActive = true;
                    btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
                    btn.parent("li").addClass("active");
                }
            });

Open in new window


Let me know if you need more code part

Thanks
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

please provide some sample HTML so we can test your code, or a link to your page.
Avatar of lenamtl

ASKER

Hi,

You can download the template I'm using
https://github.com/almasaeed2010/AdminLTE

I have used the 'Accepted Solution' from my previous question to embed the menu
https://www.experts-exchange.com/questions/28420334/include-html-file-with-javascript.html
The idea should be to remove all active, set cookie content active and click the button
Avatar of lenamtl

ASKER

Still need help with this ...
Is there a way without rewriting the entire menu code?
Your cookie is set to a jQuery object. That cannot work well

$.cookie("nav-item", menu);

should likely be

$.cookie("nav-item", menu.attr("id"));

or something
Avatar of lenamtl

ASKER

I still need help with this
I'm tring to figure out but I have no luck
That is not very helpful.
Does the cookie get set?
Does it contain the correct information?
Are there any error messages in the console?
Do you have a site where we can see the menu in action?
Avatar of lenamtl

ASKER

Yes it is set but it is empty
No error message
No live link available

The code I'm using is available from the link I have provided in my first post plus the code I use to modify see the EE link.

I will retry and get back monday
Avatar of lenamtl

ASKER

I'm wondering is localstorage will be easier to use instead of cookie.js
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Please share your solution
Avatar of zjm zew
zjm zew

i have same problem, plz share your solutions. thanks