What is the best way to reset everything back to its original position by clicking anywhere on the screen except for the specified div?

Is there a way to make the entire screen reset to its original state with just one click anywhere on the screen, rather than having to click a specific button? Any assistance on this matter would be greatly appreciated. Thank you!

JQUERY CODE

$(".readNowbutton").click(readNow);

function readNow() {
    $(".bookBox-1, .bookBox-2, .bookBox-3, .bookBox-4, .bookBox-5").animate({
        top: "800",
    });
    $(".selectStoryBox").animate({
        right: "2800",
    });
    $(".bookDescription-1").delay(1000).animate({
        top: "120",
    });
    $("hr").slideToggle();
    $("hr").unbind("click");
    $(".readNowbutton").unbind("click");
    $(".readNowbutton").click(readNowReverse);
}

//REVERSES FULL STORY

function readNowReverse() {
    $(".bookBox-1, .bookBox-2, .bookBox-3, .bookBox-4, .bookBox-5").animate({
        top: "0",
    });
    $(".bookDescription-1").animate({
        top: "0",
    });
    $(".selectStoryBox").animate({
        right: "2800",
    });
    $("hr").slideToggle();
}

});

Answer №1

Check out the following code snippet for a solution to detecting clicks outside an element:

function detectOutsideClick(selector) {
  const clickListener = (event) => {
    $target = $(event.target);
    if (!$target.closest(selector).length && $(selector).is(':visible')) {
        $(selector).hide();
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', clickListener)
  }

  document.addEventListener('click', clickListener)
}

Answer №2

Simply click on any part of the screen to activate the function readNowReverse():

$(window).click(function() {
  readNowReverse()
});

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

Determining If Props Have Been Undefined In React

Greetings and thank you for taking the time to read this: I am currently working through a tutorial that can be found here: My issue lies in the creation of an author, where the application is trying to load the URL of the current author's ID, which ...

Unable to open links specified in 'href' with Bootstrap 5 Navbar

After finishing developing my first page, I encountered an issue while working on the second page. I am using a bootstrap 5 navigation bar. The way I have set up the navbar is that once it reaches a breaking point, I disable the view to allow the full bar ...

Updates in .net modify values prior to the file being downloaded as a Word document

After dynamically filling my page values with jQuery, I am trying to generate a Word file. However, when the Word file is created, it does not reflect the new values brought in by jQuery. Here is the ASPX code: <form runat="server"> <asp:Label r ...

Checkbox malfunctioning when trying to add values after being checked

I have successfully completed a calculation system project using JavaScript. Everything works well, the calculations are accurate and taxes are included properly. However, I am facing an issue where the tax is not being included when I click on the checkbo ...

Using jQuery, eliminate a single value from all drop down options

I am facing an issue where I have multiple drop-downs with the same values. When a user selects "Lunch" from one of the drop-downs, I need to remove "Lunch" from the rest. Below is my code: Frontend code: <?php for($i=1; $i<=7; $i++) {?> <se ...

Modifying arrays in ReactJS

Having trouble editing my array list, need some help. I can update a single input value successfully, but struggling with updating the entire array. Any suggestions on why the method isn't working and how to edit the array? When I try to store data ...

Frontend experiencing issues with Laravel Echo Listener functionality

I have recently developed a new event: <?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PresenceChannel; use Illuminate&bs ...

Error: Unable to Locate CSS File for Wordpress Elementor

Currently in the process of transferring a WordPress website that utilizes Elementor. Successfully migrated both the code and database over. However, upon inspecting the page, I encountered a 404 error indicating that a css file associated with Elementor c ...

Effective ways to enable users to upload files in a React Native app

Being in the process of developing a react native app, I am faced with the challenge of allowing users to easily upload files from their mobile devices (pdf, doc, etc). Unfortunately, my search for a suitable native component has proven fruitless. Can anyo ...

Exploring new possibilities in ChartJS with the use of multiple Y

I have successfully created a line chart using Chart.js with two datasets, each having its own Y scale and axis. The code for my datasets and options is as follows: datasets: [{ fill:false, label: 'Heat', yAxisID: "y-axis-1", da ...

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

What's the best way to refresh append() functionality within a modal? I'm currently working with NODE JS and AJAX and

Whenever I click the modal, the append() calls are adding HTML content. But if I try to use empty() or html(), the modal stops appearing altogether. What is the correct approach to creating this modal? function loadModalContent(id) { $('#myModal& ...

Arranging the table based on the values of the key

I have already discovered that using the sort function is necessary to sort the table onClick. My goal is to sort by the key so that I can avoid repeating the code to sort the function by key. I am trying to keep my code DRY. How can I achieve this efficie ...

Encountering a peculiar issue with including no-cors in the header while fetching JSON content in a React.js application

As someone who is relatively new to react and nodeJS, I am currently experimenting with pulling JSON data from my nodeJS webservices and displaying it in a react component. let url = "http://codepen.io/jobs.json"; let iterator = fetch(url); iterator ...

What is the best way to remove or reset a map from a material skybox in three.js?

In my ThreeJS scene, I am trying to implement different modes for viewing all models in the skybox, with or without textures. I have two functions called 'getSkyTexture' and 'getSkyColor' which are supposed to work separately. However, ...

Label Overlapping Issue in React Select

Utilizing react-select version ^5.1.0, I am encountering an issue where the word "select" overlaps with the options when scrolling. An image has been attached for better clarification. How can I eliminate the occurrence of the select word overlapping my op ...

Experience an engaging and dynamic liquid metal orb using Three.js

As I dive into the world of JavaScript and experiment with Three.js, I came across a fascinating tutorial by Paul Lewis. He demonstrated how to create an interactive liquid metal ball with Three.js, similar to the one showcased at In an attempt to incorpo ...

How to design <p> elements inside a bordered container?

I am currently working on a webpage that features text enclosed in bordered boxes with styled formatting. The primary issue I am encountering is that when I try to add another paragraph within the styled <p> tag containing the border styling, the su ...

Unable to access the attributes of the mongoose model

I'm experiencing an issue with my mongoose model.find code below Displayed here is my node.js code that utilizes mongoose to interact with MongoDB. However, upon running it, I encounter the following error message: Starting... (node:7863) Unhandl ...

Function URL.createObjectURL is not defined in Reactjs

I am currently working on a loadfile function that is supposed to load an image after uploading. However, I am facing an issue with converting it to get its URL path. Whenever I try to do so, I encounter an error saying "URL.createObjectURL is not a func ...