Page 1 of 1

Paradise theme left menu not getting highlighted properly

Posted: 01 May 2020, 08:55
by koushik_m100
Hi,
We are developing an application using the Paradise theme. Whenever we are lading in the pages, the previously visited left menu is getting highlighted rather than presently visited menu. It seems clearMenuState method of layout.js not working properly. Do you have any insight how to address this issue?
Koushik Mitra

Re: Paradise theme left menu not getting highlighted properly

Posted: 04 May 2020, 12:30
by koushik_m100
I found an alternative way to fix it.

1. Removed framework specified active-menuitem class using jquery
$(document.getElementById('menuId')).removeClass('active-menuitem');

2. Created alternative style class highlightVisitedMenu
.highlightVisitedMenu {
background-color: red !important;
color: Yellow !important;
}
3. <p:menuitem value="Menu Name" icon="[Relevant Icon]" id="menuId"
outcome="menuOutcome"
styleClass="#{view.viewId == 'page.xhtml' ? 'highlightVisitedMenu ' : ''}" />

Re: Paradise theme left menu not getting highlighted properly

Posted: 03 Jun 2020, 10:55
by mert.sincan
Could you please attach your menu's code? Do you update the menu after calling clearMenuState?

Best Regards,

Re: Paradise theme left menu not getting highlighted properly

Posted: 03 Jun 2020, 14:31
by koushik_m100
I thought clearMenuState will be invoked by the framework only. Do I need to call the clearMenuState method explicitly and update the menu form? do you have any code snippet or example or reference to have a look?

The actual code I can not post. If I understand what you are asking so I can write a similar code stub and post.

Regards

Re: Paradise theme left menu not getting highlighted properly

Posted: 24 Jun 2020, 09:08
by mert.sincan
Please try;

Code: Select all

<script type="text/javascript">
    //<![CDATA[
$(function() {
    var widget = PF('paradiseMenuWidget');

    if (widget) {
        widget.clearMenuState();
        
        var activeMenuItems = widget.jq.find('li.active-menuitem');
        for (var i = 0; i < activeMenuItems.length; i++) {
            var menuitem = activeMenuItems.eq(i);
            menuitem.removeClass('active-menuitem');

            var submenu = menuitem.children('ul');
            if(submenu.length) {
                submenu.hide();
            }
        }
    }
    
})
    //]]>
    </script>
<pv:menu widgetVar="paradiseMenuWidget">

Best Regards,