When clicked, check if the CSS value is equal to

I have no idea why it's not working.

After toggleClass is executed, if the CSS value equals "-84%" then hide();

$(".rwd-sec").click(function() {
      $(".rwd-main").toggleClass("is-active");
      if ($(".rwd-main").css("right") == "-84%") {
        $(".rwd-main").hide();
      }
})
.rwd-main {
  right: -84%;
}

.rwd-main.is-active {
  right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rwd-main">
  <div class="rwd-sec"></div>
</div>

codepen

jquerycssif-statement

Answer №1

One way to approach this is by simply checking if the element contains a specific class, rather than checking for a specific CSS value which could potentially change in the future:

$(".rwd-sec").click(function () {
  $(".rwd-main").toggleClass("is-active");
  if ($(".rwd-main").hasClass('is-active')) {
    $(".rwd-main").hide();
  }
}

Answer №2

attempt

//try to determine the percentage value of the css
var percent = parseFloat( element.css('width'))/parseFloat(element.parent().width())*100+'%';

Ref: obtain css width of an element and transform it into percentage

Note: parseFloat function is utilized to convert the return value into a float (e.g. "47px")

$(".rwd-sec").click(function() {
     var element = $(this);

    $(".rwd-main").toggleClass("is-active");
    var percent = parseFloat( element.css('width'))/parseFloat(element.parent().width())*100+'%';
//alert(parseFloat(element.css('width')))
if ($(".rwd-main").css("right") == percent) {
  $(".rwd-main").hide();
}
})
.rwd-main {
  right: -84%;
}

.rwd-main.is-active {
  right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rwd-main">
  <div class="rwd-sec"></div>
</div>

Answer №3

Another approach, besides using the .hasClass() method mentioned by @Alex, involves utilizing the .is() method:

$(".rwd-sec").click(function() {
      $(".rwd-main").toggleClass("is-active");
      //console.log( $('.rwd-main').css('right') );
      if ($(".rwd-main").is(".is-active")) {
        $(".rwd-main").hide();
      }
})
.rwd-main {
  right: -84%;
}

.rwd-main.is-active {
  right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rwd-main">
  <div class="rwd-sec">X</div>
</div>

Resource

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

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The concept is to have users select options and then receive employment sector suggestions based on their selections. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

javascripthtmlcssforms

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

javascriptphpjqueryhtmlajax

Discovering the full file path of an image using PHP starting from a relative path

While there are questions similar to mine (see PHP: Find images and links with relative path in output and convert them to absolute path), I'm uncertain if they address my specific issue. I am currently working on a jQuery plugin that can be easily i ...

phpjquerypathrelative-pathabsolute-path

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

In my Angular 4 project, I have integrated Bootstrap, Fontawesome, and some custom CSS. However, all these styles are rendering as separate tags at the top of my index.html file. I would like them to be combined into a single bundled CSS file for better ...

htmlcssangular

Minimize the use of globalized variables in your LESS CSS code

Is there a better way to avoid using globally diffused variables? I conducted a test with the following setup: _import.less @test: #FFF; _import2.less @test: #000; test.less @import (reference) "_import"; body { background: @test; } test2.less ...

cssless

Mobile Menu in wordpress stays visible after being clicked

I recently created a one-page layout that includes some links. However, when I view the site on my smartphone and open the main menu using the button to click on a link (which scrolls within the same page), I noticed that the mobile menu remains visible a ...

javascriptjquerycsswordpress

Is it common for Google Chrome console snapshots to have a prolonged idle time?

I noticed in Google Chrome console snapshot that my JavaScript code has a long "Idle" time. I'm not sure if this is normal. Attached is a screenshot for reference: https://i.stack.imgur.com/k0mkp.png Could this extended "Idle" time be attributed to ...

javascriptjqueryajaxgoogle-chromeconsole

Activate function at timed intervals

I've created a function that moves to the next slideshow image when a user clicks a link: jQuery("a.next").click(function(e) { return ngg_ajax_navigation(e, this); }); Now, I want the image to advance automatically every 3 seconds as well. What& ...

jquery

Is it possible to use just one <map> tag for multiple images in jQuery or JavaScript?

I have multiple images on my website <img usemap="#slideMap_branches" src="branches.png" width="890" height="270" alt="Slide 4"> <img usemap="#slideMap_order" src="order.png" width="890" height="270" alt="Slide 2"> <img usemap="#slideMap_c ...

javascriptjqueryhtml

Should each navigation item be enclosed within its own div element?

Currently, I am studying HTML + CSS and developing a website that requires a vertical navigation bar on the left side with four interactive elements. I'm wondering if it is customary to enclose each of these four elements in a div, or if there is a mo ...

csshtmlsemantic-markup

Displaying an email exist error message is important when updating an email address, and it is necessary to validate both the

      My code is triggering an email exists error when I remove NOT EXISTS from the SELECT query. However, it also incorrectly claims that my current email already exists when I try to update it. How can I modify the select query to handle the email e ...

phpjqueryhtmlajax

HTML and CSS: Focus on border for <td> cells only

I'm looking to apply a border to only one cell (B2) without nesting tables. Here's the code: <table border="0"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> ...

htmlcsshtml-tableborder

Certain browsers have difficulty running CSS keyframes animations

As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function. Here is an excerpt from my CSS file: #banner { background-color: #00BBD2; position: absolute; width: 100%; heigh ...

javascriptjqueryhtmlcssanimation

Steps to enable navigation to external pages from a ReactJS app

I am working on a simple ReactJS application: [Demo] [Source] I am trying to implement navigation within the app from external sources without refreshing the web page. This functionality should be similar to using this.props.history.push(...). /public/i ...

javascriptjqueryreactjsreact-routerreact-router-dom

Click to reveal the hidden div located at the bottom of the webpage

I have created a simple webpage where all the content is visible without the need to scroll down. However, there is additional content at the bottom that I want to keep hidden until the user chooses to see it. The idea is to have a phrase at the bottom o ...

javascriptjqueryhtmlcssshow

What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Within my project, I have connected the react-static repository with the react repository using yarn link. "react": "^16.13.1" "react-static": "^6.0.18" I am importing various components from the react-static reposi ...

javascripthtmlcssreactjsviewport-units

Filter jQuery search results for classes with identical names

I am new to using jQuery, so please excuse my lack of experience. My current challenge involves 'getting a reference to an object wrapped in a class', but there are multiple classes with the same name. How can I specifically target and retrieve t ...

javascriptjqueryangularjs

The content is not appearing correctly on the jQuery DataTable

Having trouble retrieving data from the database and displaying it in a jquery DataTable? The data doesn't seem to be showing up as expected. Here is an overview of the 'ordered_books' table structure: ordered_books with attributes 'Bo ...

phpjquerylaravellaravel-5datatables

The jQuery method .on gathers and retains click events

I created a component that manages a view containing articles with games. In order to prevent memory overload and optimize performance, I implemented a solution where when a user clicks on an article (each having the class "flashgame"), they can choose to ...

javascriptjqueryangular

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs