Top menu submenu only works with side menu present

Post Reply
williamsuane
Posts: 1
Joined: 08 Jun 2014, 02:14

08 Dec 2016, 22:28

I'm not sure if it is a problem, but if you remove the side menu (leaving only the top menu) when you click on the icons nothing happens.

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

09 Dec 2016, 10:07

You need to change layout.js. Because, all top events depends on menu widget. You remove everything in layout.js and add the following js code into it.

Code: Select all

$(document).ready(function() {
    var $this = this;
        this.wrapper = $(document.body).children('.layout-wrapper');
        this.topbar = this.wrapper.children('.topbar');
        this.topbarMenu = this.topbar.children('.topbar-menu');
        this.topbarItems = this.topbarMenu.children('li');
        this.topbarLinks = this.topbarItems.children('a');
        this.topbarMenuButton = $('#topbar-menu-button');        
        this.topbarLinkClick = false;
        this.topbarMenuClick = false;

        this.topbarMenuButton.on('click', function(e) {
            $this.topbarMenuClick = true;
            $this.topbarMenu.find('ul').removeClass('fadeInDown fadeOutUp');

            if($this.topbarMenu.hasClass('topbar-menu-visible')) {
                $this.topbarMenu.addClass('fadeOutUp');
                
                setTimeout(function() {
                    $this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
                },500);
            }
            else {
                $this.topbarMenu.addClass('topbar-menu-visible fadeInDown');
            }
                        
            e.preventDefault();
        });
                
        this.topbarLinks.on('click', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = link.next();
            
            $this.topbarLinkClick = true;

            item.siblings('.active-topmenuitem').removeClass('active-topmenuitem');

            if(window.innerWidth > 1024) {
                if(submenu.length) {
                    if(item.hasClass('active-topmenuitem')) {
                        submenu.addClass('fadeOutUp');
                        
                        setTimeout(function() {
                            item.removeClass('active-topmenuitem'),
                            submenu.removeClass('fadeOutUp');
                        },500);
                    }
                    else {
                        item.addClass('active-topmenuitem');
                        submenu.addClass('fadeInDown');
                    }
                }
            }
            else {
                item.children('ul').removeClass('fadeInDown fadeOutUp');
                item.toggleClass('active-topmenuitem');
            }   
                        
            e.preventDefault();   
        });
        
        this.topbarMenu.children('.search-item').on('click', function(e) {
            $this.topbarLinkClick = true;
        });
        
        $(document.body).on('click', function() {
            if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
                $this.topbarItems.filter('.active-topmenuitem').removeClass('active-topmenuitem');
                $this.topbarMenu.removeClass('topbar-menu-visible');
            }

            $this.topbarLinkClick = false;
            $this.topbarMenuClick = false;
        });
});

amolkhot
Posts: 1
Joined: 21 Dec 2016, 10:57

21 Dec 2016, 11:05

How we put up the icons in prime ng datatatble
e.g:
<p-column field="status" header="Status" [sortable]="true" [style]="{width: '180px', 'text-align': 'center'}"></p-column>
I want put up icon sonly these columns.

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

23 Dec 2016, 00:54


Post Reply

Return to “Atlantis - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest