JQuery Dimmer and Non-Scrolling Functionality Cannot Be Used Simultaneously

My website has a Hamburger menu for the Mobile view that I toggle on and off using JQuery. The issue arises when I try to add a dimmer effect to the Main content while preventing scrolling to the Main content when the Hamburger menu is shown. When I attempt to combine both effects, they do not work as expected. If I comment out one or the other, they function individually. It seems that the dimmer doesn't show up or the no scrolling effect doesn't take place properly. This JQuery code is a bit confusing for me as I am still new to it. Any suggestions on how to improve or streamline this would be greatly appreciated.

JQuery:

jQuery(document).ready(function () {
jQuery('#toggle-nav').click(function (e) {
event.stopPropagation();
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
jQuery('.hamburgerWrapper').toggleClass('active');

//Dimmer
jQuery('.dimmer').toggleClass('active');

//No Scrolling
jQuery('.main').toggleClass('no-scrolling');

e.preventDefault();
});
});

CSS:

.main
{
    background-color: white;
    width: 100%;
}

.mainWrapper
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: white;
    flex: 1;    
}

/*NAVIGATION MENUS*/
.nav
{
    background-color: blue;
    z-index: 1;
}

.navWrapper
{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
}

/*HORIZONTAL MENU*/
.menu
{
    flex-grow: 1;
}

.menu ul.navList
{
  list-style: none;
  position: fixed;
  left: -60%;
  background: blue;
  min-width: 60%;
  transition: all 600ms ease;
  z-index: 1;
}

.menu ul.active {
  left: 0;
  transition: all 300ms ease;
}

.menu > ul > li > a
{
    text-align: left;
    display:block;
    color: #F5F5F5;
    padding:16px 16px 12px 16px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 700;
}

.menu > ul > li a:hover
{
    background-color: green;
    border-bottom: 4px solid #F1F227;
    color: #C5EFF7;
    transition: 1s ease-out;
}

/*HAMBURGER*/
.hamburgerWrapper
{
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    left: 0;
    position: absolute;
    width: 100%;
    background-color: blue;
    transition: all 600ms ease;
    z-index: 2;
    vertical-align: middle;
}

.hamburgerWrapper.active
{
    left: 60%;
    transition: all 300ms ease;
    padding-left: 20px;
}

.hamburger
{
    list-style-type: none;
}

.hamburger li a
{
    text-align: center;
    display:block;
    color: #fff;
    padding:16px 16px 15px 16px;
    cursor: pointer;
    font-weight: 700;
}

#toggle-nav:after {
    padding-left: 20px;
    display: inline-block;
    vertical-align: middle;
    content: 'Menu';
}

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
#toggle-nav span:before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: -10px; 
}
#toggle-nav span:after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
}

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after {
  transition: all 500ms ease-in-out;
}
#toggle-nav.active span {
  background-color: transparent;
}
#toggle-nav.active span:before, #toggle-nav.active span:after {
  top: 0;
}
#toggle-nav.active span:before {
  transform: rotate(45deg);
}
#toggle-nav.active span:after {
  transform: rotate(-45deg);
}

/*Sub Menu*/
.menu > ul > li:hover > ul
{
    display: block;
}

.submenu
{
    display:none;
    position:relative;
    background-color: blue;
    white-space: nowrap;
    min-width : 100%;
    list-style-type: none;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.submenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:16px 16px 12px 26px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 500;
}

.submenu > li:hover > a
{
  background-color: green;
  color: #FFDB00;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

/*Child Sub Menu*/
.menu > ul > li > ul > li:hover > ul 
{
    display: block;
}

.subSubmenu
{
    display:none;
    position:relative;
    background-color: blue;
    white-space: nowrap;
    min-width: 100%;
    list-style-type: none;
    bottom: 100%;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.subSubmenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:19px 16px 12px 36px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 300;
}

.menu > ul > li > ul > li:hover > ul > li:hover > a
{
  background-color: green;
  color: #C5EFF7;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

   /*set up the right arrows first*/
   .menu li > a:after { content: ' \25B6'; }

   /*set up the downward arrow for top level items*/
   .menu > ul > li > a:after {content: ' \25BC'; }

   /*clear the content if a is only child*/
   .menu li > a:only-child:after {content: ''; }

/*Dimmer to dim background and no scolling when Hamburger menu is shown*/
.dimmer {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.dimmer.active 
{
  display: block;
}

.no-scrolling 
{
  overflow: hidden;
  position: fixed;
}

HTML:

<div id="container">
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">  
    <div class="hamburgerWrapper">
        <ul class="hamburger">
    <li><a id="toggle-nav" href="#"><span></span></a></li>
        </ul>
    </div>
    <ul class="navList">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li>
        <a href="MainPage.aspx">Menu 3</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>  
        <li>
        <a href="#">Menu 4</a>   
            <ul class="submenu">
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
            </ul>
        </li>
    </ul>
    <div class="hamburgerWrapper">
          <div class="toggle-nav"><a href="#">Menu</a></div>
    </div>
</nav>
</div>
</div>
</div> 

<div class="dimmer"></div> 

<div class="main">
<main role ="main" class="mainWrapper">
</main>
</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="../Javascript/JavaScript.js"></script>
jqueryhtmlcss

Answer №1

After some trial and error, I finally got it to work by applying the no-scrolling element and using Jquery on the Body instead of the main. I'm still not entirely sure why it didn't work on the Main, but at least it's working correctly now. Here are the specific parts of the code that I adjusted:

CSS:

body.no-scrolling 
{
overflow: hidden;
}

JQuery:

    //Disable Scrolling
    jQuery('body').toggleClass('no-scrolling');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for choosing the parent elements?

I am attempting to create a sidebar that saves the last clicked link in local storage and still displays the collapsed links after the page is reloaded. $(".clickedLink").parent().parent().css('background-color', 'green'); Ca ...

javascripthtmljqueryparent

What is the best way to store values from dynamically generated input fields into a single database column?

In my application, I have implemented 2 dynamically added input fields. My goal is to insert the values from these two fields into separate columns in the database. <div class="form-group "> <div id="itemRows" class="col-md-12"> & ...

javascriptphpjquery

Aligning icons and text vertically in a list

I've encountered this issue multiple times and I'm always unsure of the best approach to resolve it. Here is a screenshot for better context: This is what it should look like... .container { max-width: 360px; font-size: 16px; } .talking-poin ...

htmlcssvertical-alignment

Switch out the Select feature for Checkboxes

Hey there! I'm currently trying to enhance the style and functionality of the Select checkboxes on my blog. However, when I change them to checkboxes, they lose their original function of searching for selected tags in each Select option. This issue i ...

javascripthtmlblogger

Centered Navigation Bar Aligned with Header

I'm having trouble aligning my header vertically with the text in my nav-bar using Bootstrap 4.6. The nav-bar items are right-aligned, so the text isn't centered in the middle of the page like shown in picture 3. .jumbotron { background: #3 ...

htmlcssbootstrap-4

Issues with CSS selectors in Internet Explorer causing problems with Selenium Webdriver C#

When automating a website with Selenium C#, I encountered a NoSuchElementException when trying to click an element using a CSS selector. However, the issue was resolved when using xpath instead. Can someone shed light on why this discrepancy between CSS an ...

cssseleniumxpathselenium-webdrivercss-selectors

Disabling the scrollTop() effect following a click event with onClick()

Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to r ...

javascriptjqueryhtmlcss

PHP - Implementing real-time search functionality across various MySQL databases

I've scoured the depths of the web, yet my quest for a solution to my unique problem remains unfulfilled. I am endeavoring to construct a live search feature that can retrieve data from various tables. It functions well with a single table, but I aspi ...

phpjquerymysqlajax

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

JavaScript Error: The method 'search' is not compatible with Object [object global]

Having trouble getting the 'search' function to run when the page loads, specifically encountering an error message in self.search(event). Can someone provide some guidance on how to properly call the search function upon page load? directory.vi ...

jquerybackbone-events

"What is the best way to move a cloned image after it has been dropped

I am facing an issue with image dragging after rotating it. The problem is that I am unable to drag the image for the first time when it is dropped. Below is the code for image drag and drop using "dhtmlgoodies_xpPane li .rotatable". I can successfully dra ...

jquery

Transmitting various pieces of information using AJAX

Is it possible to send both "credit_uri" and "address" strings in one AJAX request? Currently, only the second string is being sent. How can I include both in the data of the request? $.ajax({ url: '#{add_cards_path}', type: 'POST&apo ...

javascriptjqueryajax

Ways to expand the tooltip width in Bootstrap-Vue

Is there a way to make the tooltip wider in Bootstrap Vue? I have a long statement to display in the tooltip, but it is only showing three words per row, resulting in a taller tooltip with less width. <div> <span id="disabled-wrapper" class=" ...

cssvue.jstooltipwidthbootstrap-vue

Tips for clearing floated images when the sidebar is also floated

Can someone assist me with this code snippet? I am trying to figure out a way to clear the nearest floated block. It seems that whenever I use the clear property, it clears any floated blocks on the page, even if they are in a different div. Here is the ...

htmlcsscss-float

Modify the base URL with JavaScript

Is it possible to dynamically change the href using JavaScript? I attempted to make this change with the code below in my HTML file, but unfortunately, it didn't work: <base href="/" /> <script type="text/javascript"> function setbasehr ...

javascripthtml

Having trouble with an onClick function not working on a .php webpage?

I recently developed a simple JavaScript script that dynamically loads an image based on user input in a text field (e.g., entering 'brick1' loads brick1.jpg). Although this works fine on a regular HTML page, I faced issues triggering the onClick ...

javascriptphpjqueryhtml

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

htmlcssbootstrap-4

Styling for jQuery mobile panels disappears when used on multiple pages

Currently, I am working on developing a mobile application for PhoneGap using jQuery Mobile. The app consists of multiple pages within the same HTML document. I have configured it so that all pages share the same panel, but I am facing an issue with the st ...

jqueryhtmljquery-mobilecordova

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

Error in Typescript due to delegate function not being recognized post minification

Here is a code snippet that uses delegate: <pre> $.ajax(this.validateURL, { type: "post", url: this.validateURL, data: JSON.stringify(i), contentType: "application/json; charset=utf-8", dataType: "json", success: i => t.pro ...

jquerytypescriptdelegates