omega sidebar menu dont overlay

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
duvictor
Posts: 5
Joined: 24 Apr 2013, 02:45

26 Nov 2019, 22:37

I install de omega theme, but the sidebar menu dont overlay when i click in the button bar in the left top.
I check out the browser console and do not give up any error on console. I need help!

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

28 Nov 2019, 21:09

Sidebar is not provided in overlay mode, it pushes the content, please see the live demo;

https://www.primefaces.org/omega/

duvictor
Posts: 5
Joined: 24 Apr 2013, 02:45

29 Nov 2019, 17:26

The theme still not working. I follow all steps, i saw the video and did the same thing but still not working.
The theme source coding not work too, the <po:menu> not show

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

02 Dec 2019, 16:50

Have you tried to integrate Omega to your existing application or trying to run the sample?

alejo1991
Posts: 4
Joined: 28 May 2020, 18:42

29 May 2020, 19:19

I've the same problem. I'm including the files in my project. I mean .css, .js ans .xhtml template but the sidebar don't overlay. Also the other animations in mobile mode does not work. The console shows no errors.

alejo1991
Posts: 4
Joined: 28 May 2020, 18:42

31 May 2020, 15:50

I found the real problem here, jquery scripts isn't working in the template.
All the scripts are successfully loaded in the page, but when I check the inspector it's clear that the events by element does not exists;
Like the event "click" listener for the element <a id="omega-menu-button">, but when I create a javascript version of the jquery functions required to make it works (the menu show and hide function I mean), it works.
So the real problem here it's that jquery functions are not working at all, even when the libraries request has 200 status.

The real question is, it's necessary an additional configuration or something to make it works?, because it's realy bad that a recently downloaded product contains this issues without propper documentation.

alejo1991
Posts: 4
Joined: 28 May 2020, 18:42

31 May 2020, 19:17

For example duvictor if u want to try yourself what I'm talking about; you can create a javascript on your project with this content:

/**
*
*/
var wr = document.getElementById("mainWrapper");
var ti = document.getElementById("topbar-icons");


document.getElementById("omega-menu-button").addEventListener("click", function(e) {

this.classList.toggle("active");
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

if (!isMobile && !document.body.classList.contains("menu-layout-overlay")) {

wr.classList.toggle("sidebar-inactive-l");

if (wr.classList.contains("sidebar-inactive-l")) {
wr.classList.remove("sidebar-active-m");
}
} else {
wr.classList.toggle("sidebar-active-m");

if (wr.classList.contains("sidebar-active-m")) {
wr.classList.remove('sidebar-inactive-l');
}
}

ti.classList.remove("topbar-icons-visible");
e.preventDefault();
});


document.getElementById("omega-menu-button").addEventListener("click", function(e) {
return "undefined" != typeof k && k.event.triggered !== e.type ? k.event.dispatch.apply(t, arguments) : void 0
});


document.getElementById("options-menu-button").addEventListener("click", function(e) {

animatingOptionsMenu = true;
if (ti.classList.contains("topbar-icons-visible")) {
ti.classList.add("flipOutX");
ti.classList.remove("topbar-icons-visible");
ti.classList.remove("flipOutX");
} else {
ti.classList.add("topbar-icons-visible");
ti.classList.add("flipInX");
}


wr.classList.remove("sidebar-active-m sidebar-inactive-l");
e.preventDefault();
});

document.getElementById("options-menu-button").addEventListener("click", function(e) {
return "undefined" != typeof k && k.event.triggered !== e.type ? k.event.dispatch.apply(t, arguments) : void 0
});


Then call this script into your template.xhtml using :
<h:outputScript name="js/animated.js" library="omega-layout"/>
</h:body>

before the </body> tag

that's gonna make works the "hide and show" events for the sidebar menu and the user options on the rigth side of the topbar. That's includes too the behavior in the mobile mode.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

03 Jun 2020, 11:20

Thanks a lot for the attached sample code, @alejo1991 ;)

Best Regards,

ravindhirank
Posts: 1
Joined: 15 Feb 2015, 16:34

09 Sep 2020, 18:16

i am also having the same issue. I am running a sample project given in the demo, i don't see side bar displaying menus and burger menu on the toolbar is not showing up.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

12 Sep 2020, 14:16

Do you get an error on console?

Post Reply

Return to “Omega - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests