I have a sidebar with collapsible menu it works fine but all the values come expanded the initial loading time.I want it to be closed on load and toggled thereafter.
Here is the jquery used
// Sidebar Toggle
var fluid = {
Toggle : function(){
var default_hide = {"grid": true };
$.each(
["pagesnav", "commentsnav", "userssnav", "imagesnav"],
function() {
var el = $("#" + (this == 'accordon' ? 'accordion-block' : this) );
if (default_hide[this]) {
el.hide();
$("[id='toggle-"+this+"']").addClass("hidden");
}
$("[id='toggle-"+this+"']")
.bind("click", function(e) {
if ($(this).hasClass('hidden')){
$(this).removeClass('hidden').addClass('visible');
el.slideDown();
} else {
$(this).removeClass('visible').addClass('hidden');
el.slideUp();
}
e.preventDefault();
});
}
);
}
}
jQuery(function ($) {
if($("[id^='toggle']").length){fluid.Toggle();}
});
here is the html
<span class="ul-header"><a id="toggle-pagesnav" href="#" class="toggle visible">Content</a></span>
<ul id="pagesnav">
<li><a class="icn_manage_pages" href="#">Manage Pages</a></li>
<li><a class="icn_add_pages" href="#">Add Pages</a></li>
<li><a class="icn_edit_pages" href="#">Edit Pages</a></li>
<li><a class="icn_delete_pages" href="#">Delete Pages</a></li>
</ul>
<!-- End Content Nav -->
<!-- Start Comments Nav -->
<span class="ul-header"><a id="toggle-commentsnav" href="#" class="toggle visible">Comments</a></span>
<ul id="commentsnav">
<li><a class="icn_manage_comments" href="#">Manage Comments</a></li>
<li><a class="icn_add_comments" href="#">Add Comments</a></li>
<li><a class="icn_edit_comments" href="#">Edit Comments</a></li>
<li><a class="icn_delete_comments" href="#">Delete Comments</a></li>
</ul>
here is the css used
.toggle {
display:block;
}
.ul-header a.visible {
background:url('../img/icons/small/toggle_close.png') no-repeat scroll 97% 50%;
}
.ul-header a.hidden {
background:url('../img/icons/small/toggle_open.png') no-repeat scroll 97% 50%;
}
Please help.
This is the variable which is checked against to see if a block has to be hidden or not.
var default_hide = {"grid": true };
Change it to
var default_hide = {"pagesnav": true, "commentsnav": true, "userssnav": true, "imagesnav": true}
and it should work.
Or you can remove this if:
if (default_hide[this])
I'd say the most efficient and painfree way to have them all initially collapsed is to specify them like that initially in the HTML. So add class="hidden" to each of your nav ul-s.
Related
I'm new to Odoo .. I want to make my dropdown toggle display properties set to block only in my home page like this :
So, at other pages, it will set to none to prevent the dropdown override the content like this:
Here is what I've done so far with the code:
views/header.xml
<nav class="navbar navbar-expand-lg navbar-dark multilevel">
<ul class="navbar-nav w-100">
<li class="nav-item dropdown w-100">
<a class="nav-link dropdown-toggle nav-category" href="#"
data-bs-toggle="dropdown">
<i class="icon-view-grid"></i>
<span class="ic-category"></span>
Semua Kategori
</a>
<ul class="dropdown-menu dropdown-category show">
<div href="javascript:void(0)" class="close-category">
<i class="icon-x-circle"></i>
Tutup
</div>
<t t-foreach="product_categories" t-as="category">
<li class="has-submenu">
<a class="dropdown-item dropdown-toggle" t-attf-href="/products?categ={{ category.id }}">
<t t-if="category.image_1920">
<img class="image-category-icon" t-attf-src="/web/image/product.public.category/{{ category.id }}/image_1920"/>
</t>
<span t-esc="category.name"/>
</a>
<div class="megasubmenu dropdown-menu">
<ul class="list-unstyled">
<t t-foreach="category.child_id" t-as="second_level_category">
<t t-if="second_level_category.id">
<li>
<h3 class="content-title f-18"><a t-attf-href="/products?categ={{ second_level_category.id }}"><span t-esc="second_level_category.name"/></a></h3>
</li>
</t>
</t>
</ul>
</div>
</li>
</t>
<li>
<a class="dropdown-item text-center view-all"
href="/products">Lihat Semua Kategori
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</li>
</ul>
</nav>
custom-style.css
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #e5e5e5;
}
.dropdown-menu {
box-shadow: 0px 4px 35px rgba(70, 70, 70, 0.1);
border: 1px solid #d1d1d1;
}
main.js
//CATEGORY MENU
document.addEventListener("DOMContentLoaded", function () {
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function (element) {
element.addEventListener('click', function (e) {
e.stopPropagation();
});
});
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
});
});
document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
console.log(nextEl);
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
});
} else if (window.location.pathname === '/') { // Check if the current URL is home page
// display all submenus
document.querySelectorAll('.submenu').forEach(function (everysubmenu) {
everysubmenu.style.display = 'block';
});
}
});
Is there any possible way to address this kind of stylesheet logics in JS than the built-in window.location.pathname and how to implement that, especially in Odoo, which is basicly using the markup of XML instead of HTML??
Any help would be very appreciated.
Thank a lot in advance.
please take a look at the image, here I am tried to do
If I click on "Fan Panels" The other two menus will be visible. Which is currently working fine. and here three menus will be visible.
If I click on "Entertain Art" menu the "Score Art" and "Fan Panels" need to be hidden, but the "Entertain Art" still need to show.
If I click on "Score Art" the "Fan Panels" and "Entertain Art" menu need to hidden, but the "Score Art" still need to show.
If you think about the code here it is :
{{#each categories}}
<li class="nav-list__item">
<a class="nav-list__item-link" href="{{url}}" title="{{name}}">{{name}}</a>
</li>
{/each}}
The website is under preview mode
Tts Big-commerce so menu displaying frontend with the dynamic syntax I think we can do it with javascript and jquery to find text and hide them what you suggest?
FOR EXAMPLE CODE:
<ul id="primeNav" class="nav-list nav-list--prime">
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Fan Panels">Fan Panels</a>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Entertain Art">Entertain Art</a>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Score Art">Score Art</a>
</ul>
Thanks in Advance
You can try this code alternatively -
Edit 3 -
Here's the newly updated code
/* Conditional Page Options */
var url = window.location.href;
var url = url.replace(/\//g, '');
var sub_url = location.protocol + location.host;
var page = url.replace(sub_url, '');
/* conditional click actions */
if (page == "entertain-art") {
$("#primeNav .nav-list__item").hide();
$("#primeNav .nav-list__item:nth-child(2)").show(); // revised
} else if (page == "score-art") {
$("#primeNav .nav-list__item").hide();
$("#primeNav .nav-list__item:nth-child(3)").show(); // revised
} else {
$("#primeNav .nav-list__item-link").on('click', function() {
var index = $(".nav-list__item-link").index(this);
if (index == 0) {
$("#primeNav .nav-list__item").show();
} else {
$("#primeNav .nav-list__item").hide();
$(this).parent().show();
}
});
}
$("#primeNav .nav-list__item:nth-child(4)").show(); // revised
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="primeNav" class="nav-list nav-list--prime">
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Fan Panels">Fan Panels</a>
</li>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Entertain Art">Entertain Art</a>
</li>
<li class="nav-list__item">
<a class="nav-list__item-link" href="#" title="Score Art">Score Art</a>
</li>
</ul>
try it.
**UPDATE* : without adding new class name
//Without any new class name
$("#primeNav li").click(function(){
if($(this).text().trim()!="Fan Panels") //For Point 1, if click on FanPanel then show all
{
$("#primeNav li").hide(); // hide all item
$(this).show(); // Show item which is clicked
}
})
//Added **menu** as classname to all anchor tag, also added another unique class name to handle individual.
//Older try
$(".menu2").click(function(){
console.log($(this).text());
if($(this).hasClass("menuFan")==false) //For Point 1, if click on FanPanel then show all
{
$(".menu").hide(); // hide all item
$(this).show(); // Show item which is clicked
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primeNav" class="nav-list nav-list--prime">
<li class="nav-list__item">
<a class="nav-list__item-link menu menuFan" href="#" title="Fan Panels">Fan Panels</a>
<li class="nav-list__item">
<a class="nav-list__item-link menu menuEnt" href="#" title="Entertain Art">Entertain Art</a>
<li class="nav-list__item">
<a class="nav-list__item-link menu menuScore" href="#" title="Score Art">Score Art</a>
</ul>
I want to disable main menu item in sub page using it's id. Tried "setAttribute" and "disabled" options.
document.getElementById("bloc_menu:j_id14").setAttribute("disabled","disabled");
document.getElementById("bloc_menu:j_id14").disabled = true;
Any suggestions are welcome, thank u.
I'm still not 100% sure what you're trying to do or why you can't handle this serverside, but I've made a little example of a simple menu that can be disabled/enabled.
var $mainMenu, $links;
$(function() {
$mainMenu = $('#main-menu');
$links = $mainMenu.find('.menu-item__link').each(function() {
var $link = $(this);
$link.data('href', $link.attr('href'));
});
$('#toggle-main-menu').on('click', function() {
toggleMainMenu();
});
});
function toggleMainMenu() {
if ($mainMenu.hasClass('disabled')) {
$mainMenu.removeClass('disabled');
restoreLinks();
}
else {
$mainMenu.addClass('disabled');
removeLinks();
}
}
function removeLinks() {
$links.removeAttr('href');
}
function restoreLinks() {
$links.each(function() {
var $link = $(this);
$link.attr('href', $link.data('href'));
});
}
#main-menu .menu-item__link {
color: #000;
}
#main-menu.disabled .menu-item__link {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu">
<li class="menu-item">
<a class="menu-item__link" href="#someLink1">Some link 1</a>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#someLink2">Some link 2</a>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#someLink3">Some link 3</a>
</li>
</ul>
<button id="toggle-main-menu">Toggle the menu</button>
I have a problem with my menu in mobile mode. onClick it fadesOut. I want to keep this setting, but I don't want it to fadeOut when one clicks on the dropdown part.
here is link: http://jsfiddle.net/zLLzrs6b/3/
appreciate your help!
html:
<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
css:
.langop {
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java:
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function (e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function () {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
See this demo.
$('ul#nav > li > a').on("click", function () {
if (nav.hasClass('mobile'))
nav.fadeOut('fast');
});
Find the clicked element by using event.target, if it's dropdown part then don't hide
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(e) {
var target = $(".langop");
if (!target.is(e.target) //checking clicked item is the dripdown list
&& target.has(e.target).length === 0 //chekking clicked element is inside the dropdown
&& nav.hasClass('mobile')) {
nav.fadeOut('fast');
}
});
.langop {
display: none;
position: relative;
width: auto;
}
.nav-item:hover .langop {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
I have a menu like :
<ul>
<li>
<a class="scroll-to" href="#one">one</a>
</li>
<li>
<a class="scroll-to" href="#two">two</a>
</li>
<li>
<a class="scroll-to" href="#three">three</a>
</li>
</ul>
And on my page, multiple anchor like :
<a id="two" target="_blank"></a>
or
<a id="one" target="_blank"></a>
I'm looking for a way to set an active class to my menu when i scroll to an anchor (with click or mouse scroll).
For example if i scroll to my anchor id="two" i need to set active my li #two.
Any ideas ?
If I understand your problem, add your anchors some class, for example section and try this:
$('.section').hover(function() {
var anchor = $(this).attr('id');
$('a[href="#'+anchor+'"]').addClass('active');
}, function() {
$('a').removeClass('active');
});
http://codepen.io/tomekbuszewski/pen/MwMWoK
var links = document.querySelectorAll("a.scroll-to");
console.log(links[1]);
for (var i = links.length -1; i>=0; i--)
{
//click event
links[i].onclick= someHandlerFunction;
//hover event
links[i].onmouseover= someHandlerFunction;
}
var liActive = undefined;
function someHandlerFunction(event) {
if (liActive != undefined) liActive.setAttribute("class", "");
liActive = event.target.parentNode;
liActive.setAttribute("class", "active");
return false;
}
.menu{
background-color: #00ff00;
}
.menu li.active{
background-color: blue;
}
<ul class="menu">
<li>
<a class="scroll-to" href="#one">one</a>
</li>
<li>
<a class="scroll-to" href="#two">two</a>
</li>
<li>
<a class="scroll-to" href="#three">three</a>
</li>
</ul>
Voila (add and remove class in the same time), it's a but it's a bit redundant to add active class at click and hover.