We Keep Coding

How to change the contents of one container by hovering over elements/links in a DIFFERENT container

I'm currently developing an e-catalogue. Following the suggestion of a Stackoverflow contributor, I now have a navigation bar with a dropdown that produces a two-container menu. Next, I am trying to set it in such a way that when one hovers over a specific element in one container (the left container), the contents of the other container (the right one) of the dropdown, change and allows the user, interact with the changed contents of the right container.
I am using 'mouseenter' and 'mouseleave' event handlers, and yes, you've guessed it, the moment I leave the element (in the left container) I hovered over to trigger the change (in the right container), the contents of the right container reverse back to their original contents!
To get 'round' this problem, within the mouseenter eventlistener function, I wrote in a second mouseenter eventlistener function, this time for the right container itself. I hoped that if I left the element (in the left container), that triggered the change in the right container, and went into the right container, I would be able to interact with the altered contents of the right container. Alas, it worked it!
The problem now, however, is that ANYTIME I hover over the right container, the contents change as if I had hovered over the specific element in the left container, regardless of whether or not I had actually hovered over that element in the left container.
I have tried numerous approaches, including, 'mouseout' (which 'bubbles'), and also tried giving the two mouseenter event functions, names, so that the 'inner' function for the mouseenter event of the right container only executes when the 'outer' function for the mouseenter event of the element in the left container has executed (a very Pythonistic way of thinking!), but nothing has worked.
I need to keep a mouseout or mouseleave event of some sort for the element in the left container; otherwise, the change in the right container will persist as you move the mouse on to other elements in the left container.
Ultimately, I want each element in the left container to trigger different changes in the contents of the right container, much like what you see in the dropdown here.
A minimal working version of my code is shown below:
// block-1h selectors
const breakingLine = document.querySelector(".breakingline");
const breaking = document.querySelector(".breaking");
// block-2h selector(s)
const block2H = document.querySelector(".block-2h");
const drop2HCaptionText = document.querySelector(".drop-2h-captiontext");
// Event listeners
breakingLine.addEventListener("mouseenter", function() {
drop2HCaptionText.textContent = "Camon C2000 Rotavator";
block2H.addEventListener("mouseenter", function() {
drop2HCaptionText.textContent = "Camon C2000 Rotavator";
})
})
breaking.addEventListener("mouseleave", function() {
drop2HCaptionText.textContent = "Boss Ladderspan 3T Scaffold Tower (Single Width)";
block2H.addEventListener("mouseleave", function() {
drop2HCaptionText.textContent = "Boss Ladderspan 3T Scaffold Tower (Single Width)";
})
})
.nav-list {
list-style: none;
border: 1px solid blue;
display: flex;
flex-flow: row wrap;
align-items: left;
justify-content: left;
color: white;
background-color: #429CD9;
}
#hire-dropdown {
position: absolute;
cursor: pointer;
padding-right: 3em;
padding-left: 3em;
}
.hdrop,
.block-1h,
.block-2h {
display: none;
}
#hire-dropdown:hover * {
display: grid;
}
#hire-dropdown .hdrop {
grid-template-areas: "block-1h block-2h";
grid-template-columns: 1fr 1fr;
}
.block-1h {
grid-area: "block-1h";
height: 30em;
}
.block-2h {
grid-area: "block-2h";
background-color: white;
border: 1px solid black;
height: 40em;
}
.drop-1h-list {
list-style: none;
display: block;
border: 1px solid black;
background-color: white;
height: 40em;
}
.drop-most-popular-hire,
.drop-2h-captiontext {
color: #3D3F41;
}
.drop-most-popular-hire {
padding-left: 3em;
}
<nav>
<ul class="nav-list">
<li>Nothing</li>
<li class="to-hire">
<div id="hire-dropdown">To Hire
<div class="hdrop">
<div class="block-1h">
<ul class="drop-1h-list">
<li>Access</li>
<li class="breakingline"><a class="breaking" href="#">Breaking</a></li>
<li class="compactionline"><a class="compaction" href="#">Compaction</a></li>
</ul>
</div>
<div class="block-2h">
<h3 class="drop-most-popular-hire">Our most popular product in this category</h3>
<p class="drop-2h-captiontext">Boss Ladderspan 3T Scaffold Tower (Single Width)</p>
</div>
</div>
</div>
</li>
</ul>
</nav>
Your (constructive) help will be most appreciated.

You could just remove the mouseleave event listener.
When you enter a li element in the left container, the mouseenter event listener will be fired and the text in the right container will be changed.
The content will be changed to another text only when you enter another element in the left container.
const drop2HCaptionText = document.querySelector(".drop-2h-captiontext");
let texts = [
"Boss Ladderspan 3T Scaffold Tower (Single Width)",
"Camon C2000 Rotavator",
"Boss Ladderspan 3T Scaffold Tower (Single Width)",
]
let listItems = document.querySelectorAll('.drop-1h-list li');
listItems.forEach((item, index) => {
item.addEventListener('mouseenter', () => {
drop2HCaptionText.textContent = texts[index];
})
})
.nav-list {
list-style: none;
border: 1px solid blue;
display: flex;
flex-flow: row wrap;
align-items: left;
justify-content: left;
color: white;
background-color: #429CD9;
}
#hire-dropdown {
position: absolute;
cursor: pointer;
padding-right: 3em;
padding-left: 3em;
}
.hdrop,
.block-1h,
.block-2h {
display: none;
}
#hire-dropdown:hover * {
display: grid;
}
#hire-dropdown .hdrop {
grid-template-areas: "block-1h block-2h";
grid-template-columns: 1fr 1fr;
}
.block-1h {
grid-area: "block-1h";
height: 30em;
}
.block-2h {
grid-area: "block-2h";
background-color: white;
border: 1px solid black;
height: 40em;
}
.drop-1h-list {
list-style: none;
display: block;
border: 1px solid black;
background-color: white;
height: 40em;
}
.drop-most-popular-hire,
.drop-2h-captiontext {
color: #3D3F41;
}
.drop-most-popular-hire {
padding-left: 3em;
}
<nav>
<ul class="nav-list">
<li>Nothing</li>
<li class="to-hire">
<div id="hire-dropdown">To Hire
<div class="hdrop">
<div class="block-1h">
<ul class="drop-1h-list">
<li>Access</li>
<li class="breakingline"><a class="breaking" href="#">Breaking</a></li>
<li class="compactionline"><a class="compaction" href="#">Compaction</a></li>
</ul>
</div>
<div class="block-2h">
<h3 class="drop-most-popular-hire">Our most popular product in this category</h3>
<p class="drop-2h-captiontext">Boss Ladderspan 3T Scaffold Tower (Single Width)</p>
</div>
</div>
</div>
</li>
</ul>
</nav>

Using $(this) and addClass/removeClass simultaneously to show/hide content of a bottom navbar

THE AIM
I have the code below with a bottom navbar of three different menus showing three different contents in which I would like the following to happen:
The default active menu/content should be the first one (home menu).
One menu/content should always be active, i.e. if I click on the current menu nothing would happen and only if I click on a different one I would see some change (i.e. other menu and content would be active).
When refreshing the page, the user should remain in the menu/content they were before refreshing with the menu icon active (i.e. black) and the content of the respective menu shown.
When closing the browser/tab and reopening, the menu/content shown should be the default one (home menu).
THE PROBLEM
Once first opened the browser/tab the default menu/content (home) is shown as desired. However, when clicking in another menu icon, only it's icon menu is shown as active and the content does not shows at all, I think this is because I am using $(this) and it only represents a[class^=menu].
When refreshing, the content of the menu is shown as active but the menu icon is not (i.e. it is not black). As I keep clicking on other menus, their menu icons are shown as active but their respective contents are not shown at all.
THE ATTEMPT
By the doing the following I obviously got contents overlapping...
$("div[class^=content]").addClass("active");
It is not clear to me how I can make a proper use of $(this) to also target the respective content of the current menu.
SUMMARY
Set the content of the respective menu active when such menu is also active.
When refreshing the browser, both the menu and content should be active (i.e. menu icon is black and the content of the respective menu is shown).
$(document).ready(function() {
$("a[class^=menu]").click(function() {
if ($("a[class^=menu],div[class^=content]").hasClass("active")) {
$("a[class^=menu],div[class^=content]").removeClass("active");
}
var href = $(this).attr("href");
$(this).addClass("active");
$(href).addClass("active");
});
if (window.location.hash.substr(1) != "") {
$("a[class^=menu],div[class^=content]").removeClass("active");
$('a[href="' + window.location.hash.substr(1) + '"]').addClass("active");
$("#" + window.location.hash.substr(1)).addClass("active");
}
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
}
.bottom-navbar>a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
}
.bottom-navbar>a.active {
color: black;
}
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1 active" id="firstPage">House content</div>
<div class="content-2" id="secondPage">Map content</div>
<div class="content-3" id="thirdPage">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
UPDATE
The URL solution is essentially answered in the link below, although the suggestions in the comments helped tremendously in solving most of the problem before the browser was refreshed.
Selecting the anchor tag of a particular href using jQuery

As the buttons aren’t separated in a way that allows them to affect visibility of the content, you’ll need to explicitly address the particular element whose visibility you want to show. I’d suggesting inspecting the class of the menu item referenced by $(this) and following it by a conditional branch that handles the case for each of menu-1, menu-2, and menu-3, referencing their respective contents to set them active, e.g., $(‘.content-1’).addClass(‘active’)
As for persistence, you can store a variable that keeps track of what item is currently active and then activate that on page load through conditionals. Give this a read to see how to store that info: https://stackoverflow.com/a/16206342/12380239

How to make this working Java-script more efficient

I've got a working jQuery script that runs ok meaning it serves its purpose.
The question is: how to make this script more efficient?
Currently the script becomes active the moment a user places the mouse over (hover) a certain HTML5 section-tag with an ID. At this moment the script removes the existing class named 'noDisplay' from a subordinate nav-tag containing a submenu list, hence content becomes visible to the user. This submenu list may be three to four levels deep. The submenus are held in classes (subMenu1, subMenu2, subMenu3, subMenu4, etc.).
The script is written to serve individually each of the given section IDs and its sublevel classes.
Basically the script interacts with the DOM by removing the class 'noDisplay' upon mouse hover and restores the same class upon mouse leave.
(Tried to give a clear explanation. If not please ask.)
Here is a JSfiddle: enter link description here
I hope someone can suggest a way to do this much more efficiently.
Possibly with more sections (#ID's) and subMenu-levels (a class per level).
Using the CSS properties 'display: none;' and 'display:block;' would be the simplest solution but this is not desired because a search-bot my decide to skip content flagged as invisible to the user or a screenreader. The class 'NoDisplay' in use here keeps content invisible to users and keeps its readability to screen readers (and thus to most of the search bots).
So basically the script function remains as is to remove and add the class 'noDisplay' upon hover.
The goal is to obtain a script that is more efficient that could use for instance variables for each section, instead of writing code for each new section and hence extending the current script.
//section1$("#section1 .NavUL1 .subMenu1").hover(function(){
$(".NavUL2").removeClass("noDisplay"); //display
},function(){
$(".NavUL2").addClass("noDisplay"); //no display
});
$("#section1").hover(function(){
$("#section1 .NavUL1").removeClass("noDisplay"); //display
},function(){
$("#section1 .NavUL1").addClass("noDisplay"); //no display
});
$("#section1 .NavUL1 .subMenu1").hover(function(){
$(".NavUL2").removeClass("noDisplay"); //display
},function(){
$(".NavUL2").addClass("noDisplay"); //no display
});
//#section2
$("#section2").hover(function(){
$("#section2 .NavUL1").removeClass("noDisplay"); //display
},function(){
$("#section2 .NavUL1").addClass("noDisplay"); //no display
});
$("#section2 .subMenu1").hover(function(){
$(".subMenu1 .NavUL2").removeClass("noDisplay"); //display
},function(){
$(".subMenu1 .NavUL2").addClass("noDisplay"); //no display
});
$("#section2 .subMenu2").hover(function(){
$(".subMenu2 .NavUL2").removeClass("noDisplay"); //display
},function(){
$(".subMenu2 .NavUL2").addClass("noDisplay"); //no display
});
$("#section2 .subMenu3").hover(function(){
$(".subMenu3 .NavUL2").removeClass("noDisplay"); //display
},function(){
$(".subMenu3 .NavUL2").addClass("noDisplay"); //no display
});
$("#section2 .subMenu4").hover(function(){
$(".subMenu4 .NavUL2").removeClass("noDisplay"); //display
},function(){
$(".subMenu4 .NavUL2").addClass("noDisplay"); //no display
});

My suggestion would be to create a new class, call it whatever but for demonstrative purposes we'll call it hover-class
Then it becomes simple:
$('.hover-class').hover(
function() { $(this).addClass('noDisplay'); },
function() { $(this).removeClass('noDisplay'); }
);

I'd recommend just using CSS, there shouldn't be a need for JS:
nav ul{
position: absolute;
border: 1px solid #444444;
box-shadow: 8px 8px 11px #222222;
background: #888;
padding: 0.5em 0.5em 0.5em 0em;
list-style-type: none;
margin-left: 15%;
display: none;
}
.sectionBox:hover nav > ul, nav li:hover > ul {
display: block;
}
This does away with all the IDs and classes while keeping the same effect. You html looks like this now (just a snippet):
<ul>
<li><h2>various whatever1</h2></li>
<li>link11</li>
<li>link12</li>
<li>link13</li>
<li>link14</li>
<li><h2>sub1</h2>
<ul>
<li>sub1-link11</li>
<li>sub1-link12</li>
<li>sub1-link13</li>
<li>sub1-link14</li>
</ul>
</li>
</ul>
Here it is working: http://jsfiddle.net/VGXNz/1/
Update:
If you want to use your original noDisplay styles then this would be the CSS:
nav ul{
position:absolute;
border: 0;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
}
.sectionBox:hover nav > ul, nav li:hover > ul{
height: auto;
width: auto;
margin: 0 0 0 15%;
border:1px solid #444444;
box-shadow:8px 8px 11px #222222;
background:#888;
padding:0.5em 0.5em 0.5em 0em;
list-style-type:none;
clip: auto;
overflow: visible;
}
Here's a fiddle: http://jsfiddle.net/KKmVU/1/

why would you use js in the first place? Css is perfectly capable of handling hover states, and IMO you should always go for the css solution if there is one.
I made some quick (and dirty) changes to your fiddle:http://jsfiddle.net/3epRN/1/
I removed a bunch of classes and id's from the markup, removed all js, and tweaked the css a bit. The relevant css looks like this:
.sectionBox nav {
display: none;
}
.sectionBox:hover nav {
display: block;
position: absolute;
top: 90%;
left: 50px;
background-color:#646464;
z-index: 5;
}
.sectionBox nav ul ul {
display: none;
}
.sectionBox nav ul li {
position: relative;
}
.sectionBox nav ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 80%;
background-color:#646464;
z-index: 5;
}
Obviously this needs some finetuning, but I'm sure you get the idea...
edit
I must admit I missed the part about the display:none beeing a problem for you. I do have to say I disagree with your arguments as to why (it is used al over the net, and crawlers and screen readers are smart enough nowadays).
That beeing said, nothing prevents you to use the css styling you now use to hide content (by adding the noDisplay class) directly in your css where I used the display:none;, and countering it when you want to display content by adding the following in stead of an ordinary display:block:
height: auto;
width: auto;
clip: auto;
overflow: visible;
The result would be identical to your js solution. I updated my fiddle to demonstrate:
http://jsfiddle.net/3epRN/2/

javascript div not expanding to match dynamic form fields

I have two divs that have been coded using javascript so that the "lightpole" div will expand to match the height of the "LayoutColumn2" div. It seems to be working fine everywhere except on the checkout page. This page has some dynamic form elements that expand once one section is completed. The lightpole div does not expand to match the expanded divs that container forms, even though they are within the larger LayoutColumn2 div.
Site: https://store-e262c.mybigcommerce.com/checkout.php?tk=eceb5394b7c03ae4a283b2eabff8f9f6
If that doesnt work add something to the cart>proceed to checkout>Select I'm a new Customer, Continue button. The lightpole break is visible near the footer and very apparent if you continue through the checkout process. I can delete users if someone wanted to create a test user.
<!--make lightPole expand to height of tallest column-->
<script type="text/javascript">
$(window).load(function(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
The html is lengthy and changes depending on the stage in the checkout process but I can still post it if someone wants it.
CSS
#lightPole {
background:url(../images/lightPole8aSlice.png);
margin: 0 0 0 19.9px;
padding: 0;
position: absolute;
width: 15px;
z-index: -100;
display: inline-block;
float: left;
}
#LayoutColumn2{
float: left;
height: auto;
margin: 0;
padding: 0;
width: 641px;
}
.Content {
background: url("../images/contentMiddleBackground.png") repeat scroll 0 0 transparent;
float: left;
font-size: 0.95em;
margin: 0;
min-height: 266.5px;
padding: 0 5px 0 28px;
width: 609px;
}
It's nested pretty deeply and there are several other script blocks in there so maybe one of those is causing the problem...?

Your issue is imho to resize the div(#lighPole) when the other div(#LayoutColumn2) changes its height. This can be archived e.g. using the jquery resize plugin.
<script type="text/javascript" src="/content/jquery.ba-resize.min.js"></script>
<script type="text/javascript">
$(function() {
$('#LayoutColumn2').resize(function() {
var ht = Math.max($('#LayoutColumn2').height(), $('#LayoutColumn3').height());
$('#lightPole').height(ht);
}).resize();
});
</script>

Vertical Tabs with JQuery?

I want tabs along the left side of the page instead of across the top. I'm already loading jQuery for other reasons (effects), so I prefer using jQuery to another UI framework. Searches on "vertical tabs jquery" yield links to works-in-progress.
Is getting Vertical Tabs to work across browsers fraught, or is it so trivial that, once you have a solution, it doesn't seem worthwhile to post example code?

Have a look at the jQuery UI vertical Tabs Docu.
I try out it, it worked fine.
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
<script>
$(document).ready(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
</script>

Try here:
http://www.sunsean.com/idTabs/
A look at the Freedom tab might have what you need.
Let me know if you find something you like. I worked on the exact same problem a few months ago and decided to implement myself. I like what I did, but it might have been nice to use a standard library.

I've created a vertical menu and tabs changing in the middle of the page. I changed two words on the code source and I set apart two different divs
menu:
<div class="arrowgreen">
<ul class="tabNavigation">
<li> Tab 1</li>
<li> Tab 2</li>
</ul>
</div>
content:
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="secund">
CONTENT 2
</div>
</div>
the code works with the div apart
$(function () {
var tabContainers = $('div.pages > div');
$('div.arrowgreen ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.arrowgreen ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});

//o_O\\ (Poker Face) i know its late
just add beloww css style
<style type="text/css">
/* Vertical Tabs ----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
UPDATED ! http://jqueryui.com/tabs/#vertical

I wouldn't expect vertical tabs to need different Javascript from horizontal tabs. The only thing that would be different is the CSS for presenting the tabs and content on the page. JS for tabs generally does no more than show/hide/maybe load content.

Another options is Matteo Bicocchi's jQuery mb.extruder tabs plug-in:
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Have a look at Listamatic. Tabs are semantically just a list of items styled in a particular way. You don't even necessarily need javascript to make vertical tabs work as the various examples at Listamatic show.

super simple function that will allow you to create your own tab / accordion structure here: http://jsfiddle.net/nabeezy/v36DF/
bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) {
//Dependent on jQuery
//PARAMETERS
//tabClass: 'the class name of the DOM elements that will be clicked',
//tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)',
//contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked',
//contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)',
//MUST call bindSets() after dom has rendered
var tabs = $('.' + tabClass);
var tabContent = $('.' + contentClass);
if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')};
tabs.each(function (index) {
this.matchedElement = tabContent[index];
$(this).click(function () {
tabs.each(function () {
this.classList.remove(tabClassActive);
});
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
this.classList.add(tabClassActive);
this.matchedElement.classList.remove(contentClassHidden);
});
})
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
//tabs[0].click();
}
bindSets('tabs','active','content','hidden');