How to toggle between two menu items using javascript? - javascript

I have 2 menu items "English" and "Spanish" that currently display on my website.
I am wanting the "Spanish" menu item to be displayed on page load and the "English" menu item to be hidden.
When the "Spanish" menu item is selected I want the "English" menu item to be displayed and the "Spanish" menu item to be hidden. As you can see I am looking for a toggle solution for the two menu items. I don't want to use a dropdown.
My strength is not if-else statements and I am hoping someone can help with a solution. I was thinking about getting the menu items by ids?
Here are the 2 menu ids:
menu-item-4002 and menu-item-4003
$(document).ready(function () {
var $LangEs = $("#menu-item-4002");
var $LangEn = $("#menu-item-4003").hide();
$("#menu-item-4002").click(function (e) {
e.preventDefault();
$LangEn.hide();
var target = $(this).data('target');
if(target){
$LangEn.filter(target).show();
}
});
});

You can check if an element is hidden using .is(':hidden'), and show the hidden button, and hide the visible one:
$(document).ready(function() {
var $LangEs = $("#menu-item-4002");
var $LangEn = $("#menu-item-4003").hide();
[$LangEs, $LangEn].forEach(function(el) {
el.click(function(e) {
e.preventDefault();
if($LangEn.is(':hidden')) {
$LangEs.hide();
$LangEn.show();
} else {
$LangEn.hide();
$LangEs.show();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-item-4002">ES</button>
<button id="menu-item-4003">EN</button>

Related

tinymce dynamic add mutiple menu items to dropdown menu-all onclick direct to last menu item click

I am using tinymce + tinymce-variable. I want to create drop down menu that have dynamic menu item. Based on items from sql, I am able to create multiple drop down menu. I created each menu item using editor.addMenuItem() inside the loop.
for(i=0;i<data.length;i++)
{
template_var =data[i]['variable'];
text_val =template_var.replace(/\s/g , " ");
editor.addMenuItem(template_var,
{
text :text_val,
context :'newmenu',
onclick :function ()
{
editor.plugins.variable.addVariable(template_var);
}
})
}
The problem I am facing is when I click any of the menu item, it adding last menu item to the editor and not the menu item that I have clicked. I guess, It overwrite the editor.plugins.variable.addVariable(template_var); to last menu item for all menu item. How is that possible?
Thanks in advance.
A click on menu item directly go to specific line editor.plugins.variable.addVariable(template_var); of particular menu item. When we execute in loop, it only find one line of this code.That is why click on any menu item perform click only on last menu item because this code overridden for last item at end of loop. So, I solve it this way. I concatenate the editor.addMenuItem() code for execution for each menu item as string.Then, I execute that string in setup :function (editor){} of tinymce.init({}) using eval(). In this way, when we click on menu item, it can find editor.plugins.variable.addVariable(template_var); for particular menu item.
<script type="text/javascript">
variablenames_concat='';
addmenu_concat ='';
for(j=0;j<data.length;j++)
{
variablenames_concat+=data[j]['variable']+',';
template_var =data[j]['variable'];
text_val =template_var.replace(/\s/g , " ");//remove underscore
//string concatenate editor.addMenuItem for each of item
addmenu_concat +='editor.addMenuItem("'+template_var+'",{text : "'+text_val+'",context: "newmenu",onclick: function (){editor.plugins.variable.addVariable("'+template_var+'");}});';
}
variablenames_concat = variablenames_concat.replace(/,\s*$/, "");//remove last coma
tinymce.init
({
selector : 'textarea',
height : 500,
plugins : 'variable',
menu :
{
newmenu:
{
title : 'Menu', items : variablenames_concat,
}
},
content_css:
[
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
],
content_style:".variable{cursor:default;background-color:#65b9dd;color:#FFF;padding:2px;border-radius:3px;font-weight: bold;font-style:normal;display:inline-block;}",
setup : function (editor)
{
eval(addmenu_concat);
}
});
</script>

How to change which ionicon is displayed upon menu toggle

What I'm trying to do is have the 'menu-outline' ionicon display on my website, until it is clicked and the menu is toggled, where the 'close-outline' icon will replace it, and vice versa. I'm using jQuery.
I know you can toggle classes, but my ionicons are not defined by their classes, but by their names:
<a class="menu-button js-menu-button"><ion-icon name="menu-outline"></ion-icon></a>
My jQuery so far only toggles the menu but does nothing with the icon:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
/* appear and disappear */
nav.slideToggle(200);
});
Is there any way I can toggle the name of the icon? Or is there another way to do this? Thanks for any suggestions.
You can toggle the name of the icon like this:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
if (icon.attr("name") == "menu-outline") {
icon.attr("name", "close-outline");
}
else {
icon.attr("name", "menu-outline")
}
/* appear and disappear */
nav.slideToggle(200);
});
Another possibility is this:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
icon.attr('name', function(index, attribute){
return attribute == "menu-outline" ? "close-outline" : "menu-outline";
});
/* appear and disappear */
nav.slideToggle(200);
});

Dropdowm menu in Vanilla JavaScript - for unknown number of buttons

please, can you give me a hint with Vanilla JS?
I have dropdown menu opening via button click and have 2 issues:
1) Dropdown is opening by clicking on button with unique ID. I need to get it working on Class name, because it have to be working on multiple buttons - and the number of them is unknown (they will load from REST API).
In jQuery is it working, but I need it in Vanilla JS.
If I try to select button by Class name, it will return array of buttons, but I don't know how to select from array, which button was being clicked on.
2) Dropdown menu is opening only on the second click on the button (and then it is toggling like it should), but the first click doesn't do anything.
My code is here:
// select Button - now by ID - but I need unknown number of buttons - from REST API - and the code working for all of them
var btn = document.getElementById("dropBtn1");
// select Dropdown menu - next to the button - to be sure it will open the right menu no matter which button will be pressed
var menu = btn.nextSibling;
while(menu && menu.nodeType != 1) {
menu = menu.nextSibling
}
//toggle dropdown menu open/close
btn.addEventListener("click", function() {
if (menu.style.display == 'none') {
menu.style.display = 'block';
}
else {
menu.style.display = 'none';
}
});
And working prototype is here on Codepen:
https://codepen.io/vlastapolach/pen/EXdLMy
Please, do you have any ideas how to fix this?
Thank you!
Quite easy, you need a general function that works on the context (=this):
//toggle dropdown menu open/close
function toggle() {
var btn=this;
var menu = btn.nextSibling;
while(menu && menu.nodeType != 1) {
menu = menu.nextSibling
}
if(!menu) return;
if (menu.style.display != 'block') {//fix 2)
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
Now you can assign this functions as an event handler onto all your elements:
window.addEventListener("DOMContentLoaded",function(){
document.querySelectorAll(".sth").forEach(function(btn){
btn.addEventListener("click",toggle,true);
});
});
Note that NodeList.forEach is quite new, may use [].slice to create a real array...
And you need to assign the Handlers to the newly added elements manually, or you need to listen on window and trace back the target:
window.onclick=function(event){
if(event.target.classList.contains("sth")){
toggle.call(event.target);
}
};

Make menu parent expand if child is currently active

I'm currently attempting to make a menu which is expandable when clicked, stays open, until a child is clicked, then user should be taken to that page, and the menu should still be expanded when that site is reached. (currently it collapses).
I have currently got the part down where i have a menu that expands and show childs when clicked. It's currently made in javascript. I'm making the menu with wordpress, and wordpress automatically adds class "current-menu-item" to the li which is being visited (if that helps).
var clickMenu = function() {
var getEls = document.getElementById("menu-shopmenu").getElementsByTagName("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("unclick", "");
getAgn[x].className=getAgn[x].className.replace("click", "unclick");
}
if ((this.className.indexOf('unclick'))!=-1) {
this.className=this.className.replace("unclick", "");;
}
else {
this.className+=" click";
}
}
getEls[i].onmouseover=function() {
this.className+=" hover";
}
getEls[i].onmouseout=function() {
this.className=this.className.replace("hover", "");
}
}
}
window.addEventListener("load", clickMenu);
Now I'm just looking for help making it stay expanded once new page is loaded.
Also, will these two functions make a conflict in the design?
You can just check 'parent' of current-menu-item element. And apply display:block or any other css which makes menu element visible.
check below code if it meets your requirements.
$(document).ready(function(){
$(".current-menu-item").parent("your_parent_ul_div").css("display": "block");
});
ref-https://api.jquery.com/parent/
ref->Expand parent menu if child menu is selected
ref->https://webdesignerhut.com/active-class-navigation-menu/

Prevent listbox from scrolling to the item getting selected (with jquery)

I have a listbox, with items that can be in some kind of group with other items.
When one item is selected, all items from the group are selected with jquery.
Its really annoying that the listbox scrolls down to the items that jquery is selecting. I want to stay at the position of the item selected by the user.
So how can i prevent the listbox from scrolling down when items get selected?
jsfiddle example here: example
EDIT: click on item number 10 in the example, and he goes to 78, thats the issue here.
You can try this:
$('#lb').change(function() {
var x = $(this).scrollTop();
$('#lb option:selected').each(function() {
var groupName = $(this).attr('group');
if (groupName !== undefined) {
$('#lb option[group=' + groupName + ']').each(function() {
this.selected = true;
});
}
});
$(this).scrollTop(x);
} );

Categories