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!
omega sidebar menu dont overlay
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Sidebar is not provided in overlay mode, it pushes the content, please see the live demo;
https://www.primefaces.org/omega/
https://www.primefaces.org/omega/
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Have you tried to integrate Omega to your existing application or trying to run the sample?
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.
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.
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.
/**
*
*/
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.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the attached sample code, @alejo1991
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 1
- Joined: 15 Feb 2015, 16:34
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.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Do you get an error on console?
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests