javascript code to close slide div without hiding the setting icon upon clicking outside the div

Question

javascript code to close slide div without hiding the setting icon upon clicking outside the div

Can you help me with an issue I am facing while implementing a slide div for creating theme color? The div works fine, but when I click outside of it, the div does not close. I have tried multiple solutions, but none seem to work. I have researched various internet resources, but I am still unsure of how to implement the fix. Here is the relevant code snippet:

function clickedThemebtn() {
  var ele = document.getElementsByClassName("theme-colors")[0];

  if (ele.classList.contains("shown")) {
    ele.classList.remove("shown");
  } else {
    ele.classList.add("shown");
  }
}

You can find my code on JSFiddle

javascript html css

Answer 1

Answer №1

Take a look at this JSFiddle link.
I've implemented a fixed positioned div to cover the entire screen and handle clicks outside of it.

Here's the HTML structure:

<div class='toggleclickoutside' onClick="handleOutsideClick()"></div>
<div id="toggleshown" class="theme-colors">...</div>

JavaScript function for handling outside clicks:

function handleOutsideClick() {
  var element = document.getElementsByClassName("theme-colors")[0];

  if (element.classList.contains("shown")) {
     element.classList.remove("shown");
  }
}

CSS for the new div:

.toggleclickoutside{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}

Answer 2

Take a look at this JSFiddle link.
I've implemented a fixed positioned div to cover the entire screen and handle clicks outside of it.

Here's the HTML structure:

<div class='toggleclickoutside' onClick="handleOutsideClick()"></div>
<div id="toggleshown" class="theme-colors">...</div>

JavaScript function for handling outside clicks:

function handleOutsideClick() {
  var element = document.getElementsByClassName("theme-colors")[0];

  if (element.classList.contains("shown")) {
     element.classList.remove("shown");
  }
}

CSS for the new div:

.toggleclickoutside{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}

Answer 3

Answer №2

To ensure that the menu closes when clicking anywhere inside the menu, you can add an event listener to the document that triggers the close event. It's important to note that additional checks may be needed to prevent unintended behavior.

function handleMenuClick(e) {

    var menu = document.getElementsByClassName("menu")[0];
    
    if (e.target.id === "menuButton") {
        if (menu.classList.contains("visible")) {
            menu.classList.remove("visible");
        } else {
            menu.classList.add("visible");
        }
        return;
    }
    
    menu.classList.remove("visible");    
}

document.addEventListener('click', handleMenuClick);

Check out the updated fiddle

If you prefer a jQuery solution, here's a link to a relevant fiddle: jQuery fiddle

Answer 4

To ensure that the menu closes when clicking anywhere inside the menu, you can add an event listener to the document that triggers the close event. It's important to note that additional checks may be needed to prevent unintended behavior.

function handleMenuClick(e) {

    var menu = document.getElementsByClassName("menu")[0];
    
    if (e.target.id === "menuButton") {
        if (menu.classList.contains("visible")) {
            menu.classList.remove("visible");
        } else {
            menu.classList.add("visible");
        }
        return;
    }
    
    menu.classList.remove("visible");    
}

document.addEventListener('click', handleMenuClick);

Check out the updated fiddle

If you prefer a jQuery solution, here's a link to a relevant fiddle: jQuery fiddle

Answer 5

Answer №3

To ensure the theme selector closes when it is clicked outside of, you need to listen for the click event on the document object and verify if the click occurred within the theme selector before hiding it.

document.addEventListener('click', handleDocumentClick);

function handleDocumentClick(event) {
  const themeSelector = getThemeSelector();
  if (!themeSelector.contains(event.target)) {
    hideThemeSelector();
  }
}

function getThemeSelector() {
  return document.getElementsByClassName("theme-colors")[0];
}

function hideThemeSelector() {
  const themeSelector = getThemeSelector();
  themeSelector.classList.remove("shown");
}

function showThemeSelector() {
  const themeSelector = getThemeSelector();
  themeSelector.classList.add("shown");
}

Additional functions have been included for ease of use.

The updated fiddle can be viewed here: https://jsfiddle.net/0nqzpyko/

Answer 6

To ensure the theme selector closes when it is clicked outside of, you need to listen for the click event on the document object and verify if the click occurred within the theme selector before hiding it.

document.addEventListener('click', handleDocumentClick);

function handleDocumentClick(event) {
  const themeSelector = getThemeSelector();
  if (!themeSelector.contains(event.target)) {
    hideThemeSelector();
  }
}

function getThemeSelector() {
  return document.getElementsByClassName("theme-colors")[0];
}

function hideThemeSelector() {
  const themeSelector = getThemeSelector();
  themeSelector.classList.remove("shown");
}

function showThemeSelector() {
  const themeSelector = getThemeSelector();
  themeSelector.classList.add("shown");
}

Additional functions have been included for ease of use.

The updated fiddle can be viewed here: https://jsfiddle.net/0nqzpyko/

javascript code to close slide div without hiding the setting icon upon clicking outside the div

Answer №1

Answer №2

Answer №3

Similar questions

Matching names with corresponding IDs from multiple arrays in React

Object is not compliant with HTMLInputElement interface and cannot execute 'stepUp'

Disruption of HTML file content

jQuery Mobile offers a feature that allows users to create collapsible elements

Implementing Multiple Identification using JavaScript and PHP

Beneath the footer lies a blank space in white

Replace the checkbox display heading with a text box in the designated area

Integrate the dForm plugin with a convenient time picker widget

Two selection options controlling filters. The first choice influences the data shown in the second filter

Sort through JSON information to establish a filter that relies on the job's location

The JQuery function assigning a value of 0 to the selectedIndex property is not functioning properly across all selected fields

Generating a container DIV with loops and ng-class in AngularJS

How to position the navigation bar to the right using bootstrap

Error: Jasmine cannot access a property of undefined value

What is the solution for fixing the error "Uncaught SyntaxError: Cannot use import statement outside a module" while using Chart consoletvs/charts:7.* in Laravel 8?

What is the best way to find out if an array index is within a certain distance of another index?

Solving the Cross-Origin Resource Sharing problem in AngularJS

Bootstrap: the rows are breaching the boundaries of their parent containers, causing them to overlap with

What is the proper method for utilizing the "oneOf" keyword in this schema?

Combining multiple objects in an array to create a single object with the aggregated sum value can be achieved using JavaScript