Is there a way for me to conceal this setting-box by clicking on the gear icon or anywhere outside of the body?

Here is the CSS code I am using.

.setting-box 
{
position: fixed;
left:-200px;
top:0;
width: 200px;
z-index: 1000;
min-height: 100vh; 
}
.toggle-setting 
{
position: absolute;
right: -34px;
top: 6em;
background: #fff;
border-radius: 0px 5px 5px 0;
text-align: center;
cursor: pointer; 
}

I have tried multiple solutions but none seem to work!

The code functions correctly, however...

When I click on the page, the setting box does not close.

$('.setting-box .toggle-setting').on('click',function () {
$(this).parent('.setting-box').toggleClass('open');

if ($(this).parent('.setting-box').hasClass('open')) {
$(this).parent('.setting-box').animate({
        left:0,
        },1000);

     } else {
       $(this, 'body').parent('.setting-box').animate({
            left:'-200'
      },1000);
     }
});
javascripthtmlcsssasssettings

Answer №1

Give this a shot.

UPDATE

let clicked = false;

$('.setting-box .toggle-setting').on('click', () => {

if (clicked === false) {
$(this).parent('.setting-box').animate({
        'right' : '0',
        },1000);
  clicked = true;
     } else {
$(this).parent('.setting-box').animate({
        'right' : '-200px',
        },1000);
  clicked = false;
 }
console.log(clicked);
});

$(document).click(() => {
 let target = $(event.target);
 if (!target.is(".toggle-setting") && !target.is('.setting-box') && clicked === true) {
  $('.setting-box').animate({
     'right' :'-200px',
  },1000);
   clicked = false;
   console.log(clicked);
 }
});

Answer №2

the initial function is responsible for toggling the display of the setting box;

$('#gear-button').click(function() {
  $(".setting-box").toggleClass("display-block");
});

the second function hides the setting box when the user clicks anywhere on the document (body click)

// hide setting box on body click
$(document).on('click', function() {
  $(".setting-box").removeClass("display-block");
});

the third function prevents the body click event from being triggered when the user clicks on a button or the setting box itself

$("#gear-button, .setting-box").click(function(e) {
  e.stopPropagation();
})

In essence, you can customize this template to incorporate your own animations and classes.

for a complete demonstration, refer to the following link:

JSFiddle

Answer №3

To optimize your layout, consider nesting the settings block within another container and applying the style align:center;. You can also incorporate a z-index: property to control the stacking order of elements. Additionally, by setting the display to none for the block when clicking on the gear icon or anywhere else, you can achieve a seamless user experience.

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

Unable to submit form using jQuery is not functioning as expected

I am attempting to trigger a function when the submit button in the form is clicked. My aim is for the page not to refresh, and instead, I want to use AJAX to add the category. The issue arises when I manually include it in the HTML file, everything works ...

javascriptformsjquery

utilize dynamic variable within the template's views

Here is a snippet of my HTML code var marker; function initMap() { map = new google.maps.Map(document.getElementById("mymap"), myOptions); getMapMetadata([]); // setInterval(function(){ getMapMetadata([]); }, 3000); } function createMarke ...

javascripthtmlajaxdjangotweak

[SCSS] I am experiencing difficulties with loading fonts on my machine/browser, while they are functioning normally on other devices

When using relative paths, fonts may not load properly. However, absolute paths seem to work without any issues. //styles.scss @font-face { font-family: 'Roboto-Bold'; src: url('../fonts/Roboto-Bold.ttf'); } @font-face { font-fam ...

cssreactjssassvite

JSON geometry imported is not following the movement of the bones

After importing a model into my Three.js scene, I encountered an issue where the bones can be moved and rotated successfully, but the model's geometry does not follow these bone movements. For importing the JSON file and adding it to the scene, here ...

javascriptjsonthree.jsgeometrymesh

Distribute the text evenly on either side of the center

I have a unique layout with two datalist elements centered, text positioned above, and two buttons integrated. body { background-color: DarkGray; } h1 { color: black; font-size: 30px; font-family: 'lucida console' } span { color: #4434 ...

htmlcsscss-floatcentering

Alter the onSeries property dynamically

If there are 3 different series identified by the IDs series1, series2, and flags, where initially the onSeries property of flags is set to series1. In a scenario where I click on the legend to hide series1, is it possible within the legendItemClick even ...

javascriptangularjshighcharts

Leveraging ng-repeat and indexing to facilitate input for textboxes

Trying to implement ng-repeat and indexing for a Q&A setup in AngularJS and MVC has been my latest project. To make this happen, I've structured my database with two key tables: Question Question InputType (textbox, checkbox, radio, etc.) Ans ...

javascriptjqueryhtmlangularjs

Learning the process of extracting Fast Fourier Transform (FFT) data from an audio tag within

I am struggling to retrieve the FFT data from an <audio> tag without any syntax errors. After reviewing the Web Audio API documentation, I have written a sample code snippet as follows: <audio id="aud" controls="controls" src="test.mp3"></a ...

htmlaudiofft

Basic inquiry about Ajax

Would you like to know a simple solution for refreshing a specific area of your website using ajax? Instead of having JavaScript constantly checking for changes on the server, is there a way for the server to send data when a certain event occurs? Imagine ...

javascriptajaxstreamingpush

Using the hide() method in jQuery will automatically reset the value

When using the jQuery .hide() function to hide an input by ID, I am wondering if it resets the field/select value to [0], val(''), or empty, etc. My concern is that if a user populates a field, then decides to hide it due to a show/hide condition ...

javascriptjqueryhtmlvalidationshow-hide

Leveraging Material UI's Button element along with the enctype attribute

I'm working on incorporating Multer for image uploads and utilizing Material UI's button component with the onClick prop to submit the data. If I wrap the button component within a form tag, will it achieve the same result? If not, how can I spec ...

htmlreactjsmaterial-ui

"Utilizing AJAX to set an array as a global variable

Struggling with storing data values from an AJAX response XML into a global array, and then attempting to call a function that removes specific elements from it. The issue lies in the fact that the array is not declared as global. Here's the current c ...

javascriptajaxarraysglobal

The hyperlink will not work

Check this out: When you go to the Graphic Design section in the graphic section and click on "View more Information," nothing happens. The code in that section looks like this: [columns] [two_third] [animated_item] <img class="size-full wp-image-536 ...

htmlwordpresswordpress-theming

What is the best way to bring an image into your nextjs project?

I have a question about importing images into my Next.js project. I created an array of objects and want to import an image stored in a folder on my laptop, specifically in the src folder rather than the public folder. How can I properly achieve this in ...

javascriptreactjsjsonimagenext.js

Tips for refreshing a table component after receiving a notification from a WebSocket in React JS

Currently, I am utilizing React table to load a page that shows a table with data fetched from an API. Additionally, I am listening on a web socket and whenever there is new data sent over the web socket, a console message is printed. My goal now is to a ...

javascriptreactjssocketsweb-component

Cannot access pseudo elements in the Microsoft Edge browser

Is there a workaround for not being able to select or access the properties of :before & :after elements on Microsoft Edge's inspect element? .arrow_box { position: relative; background: #d43959; border: 4px solid #ac1f3c; width ...

htmlcssmicrosoft-edgepseudo-element

Refresh the angular list filter by clicking on it

I'm struggling with updating an Angular list after the filter is changed. Below is the HTML code I am using: <li ng-repeat="items in list | filter:filterList" style="list-style-type:none"> {{items}} </li> Additionally, here is the o ...

javascriptjqueryangularjs

Use leaflet.js in next js to conceal the remainder of the map surrounding the country

I'm currently facing an issue and would appreciate some assistance. My objective is to display only the map of Cameroon while hiding the other maps. I am utilizing Leaflet in conjunction with Next.js to showcase the map. I came across a helpful page R ...

javascriptreactjstypescriptnext.jsleaflet

Float isn't showing on the screen

I'm encountering an issue where the float property applied to my #middle-content element is not displaying and also removing its background. My objective is to have the middle-content positioned to the right of #leftcontent. Any assistance would be gr ...

htmlcss

There was a syntax error when trying to include HTML code and JavaScript actions within a PHP file

My current challenge involves loading dataTables using AJAX in Laravel framework. Here is a snippet of my code: if($posts) { foreach($posts as $r) { $nestedData['name'] = $r->name; $nestedData['email'] = $r->e ...

javascriptphplaraveldatatables