JavaScript situation

Need some assistance with my code. I'm trying to display a div when the visibility class is set to visible, but it's not working as expected. Can someone help me troubleshoot this issue?

CSS:

#nor1 {position:absolute;top:100px;left:100px;z-index:2;}
#var1 {position:absolute;top:100px;left:100px;z-index:7; visibility:hidden;}
#corect {position:absolute;top:0px;left:0px;z-index:9;}

Javascript:

$('#box').click(function () {
    $("#var1").css('visibility', 'visible');
});
$('#nor1').click(function () {
    if ($('#var1').css("visibility") == 'visible') {
        $('#corect').delay(500).fadeIn('slow');
    }
});

Answer №1

It appears that there may be some confusion with your CSS.

Check out this link for reference

#correct {display: none;}

Other than that, everything seems to be functioning properly.

Answer №2

Everything is running smoothly on my end. Just double-check that your ID's are accurate so jQuery can target the correct HTML elements:

jQuery Code Snippet:

$('#nor1').click(function(){
if (($('#var1').css("visibility") == 'visible') && ($('#var2').css("visibility")) == 'visible') {
    $('#correct').delay(500).fadeIn('slow');
}});

HTML Structure:

<input id="nor1" type="button" />

<div id="var1" style="visibility: visible">

</div>

<div id="correct" style="display:none">
    rtretert
</div>

CSS Styling:

#correct {
    background-color: red;
    width:400px;
}

http://jsfiddle.net/CwShT/1/

To make it clearer:

$('#nor1').click(function(){
    var1 = $('#var1').css("visibility");
    var2 = $('#var2').css("visibility");

    if ((var1 == 'visible') && (var2 == 'visible'))  {
       $('#correct').delay(500).fadeIn('slow');
    }
});

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

How to customize Material UI Autocomplete options background color

Is there a way to change the background color of the dropdown options in my Material UI Autocomplete component? I've checked out some resources, but they only explain how to use the renderOption prop to modify the option text itself, resulting in a a ...

Center align the text in a vertical group placed over an image

Here is my html page along with its corresponding css code: <div class="container"> <div class="row mt-4"> <div class="col-sm-8"> <h2>blah blah</h2> <p>blah blah&l ...

Translate a portion of a painting by utilizing context.putImageData()

I am attempting to gradually fill a canvas with pieces of the original image. To achieve this, I need each square of the image to be filled in iteratively on the canvas. To optimize performance, my approach involves rendering the original image onto an of ...

Dealing with Error 462 in Excel VBA When Using Internet Explorer

This function is designed to loop through the hrefs obtained from the GetData() function, navigate each page, retrieve specific data, and then move on to the next one. Sub CreateDatabase() Dim ieNewPage As InternetExplorer, TableRows As Object, TableR ...

Is it possible to utilize multiple .html files in a single view while incorporating Materialize?

Within my AngularJS application that utilizes Materialize, I have a module called "reports" containing a view called "reports.html" intended to house all of my reports. However, I desire to separate the code for each report into individual .html files, suc ...

Sorting through a list of strings by checking for a specific character within each string

After spending years dabbling in VBA, I am now delving into Typescript. I currently have an array of binary strings Each string represents a binary number My goal is to filter the array and extract all strings that contain '1' at position X I ...

What is the best way to disable the functions doajax_red and doajax_blue when a radio button is checked?

Is there a way to halt the functions doajax_red and doajax_blue when a radio button is checked? Upon loading the page index.php, clicking the red button will display a loading image. If you check the BLUE radio button and then re-check the RED radio butt ...

Is there a way to determine the monitor's frame rate using JavaScript?

Could JavaScript be used to determine the refresh rate of a monitor, typically set at 60Hz for most LCD monitors? Is there a method available to execute a function after a specific number of frames have passed? There has been some curiosity about my reaso ...

Passing the contents of a datatable as parameters to a PHP script

I am facing a challenge with my datatable that has two columns, "Name" and "Age". After populating the datatable using Ajax, I create a button for each row. The goal is to send the "Name" and "Age" fields of the clicked row to a PHP script, which will then ...

I am having trouble displaying images with Material UI CardMedia

I'm currently using CardMedia to display images on my webpage, but unfortunately, the image is not appearing as expected. After researching a similar issue on Stack Overflow, I discovered that the suggested solution involved importing the image and t ...

The WebSocket client is failing to receive any data

I am facing an issue with my websocket server and client setup. I have a websocket server written in c# and a simple client to test it. The handshake is successful, triggering the onopen event in the client. However, when I try to send data to the client, ...

Discrepancies in Flexbox Handling of Images between Chrome and Firefox

My goal is to showcase images on a flexbox grid, and while it works perfectly in Chrome, I'm encountering issues in Firefox (uncertain where the problem lies). Check out the CodePen link for reference : https://codepen.io/anon/pen/QJNajw?editors=1100 ...

JQuery's onclick function is not functioning properly in Firefox browser

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> method: $("#logon").click(function onAction(x){ method: <input type="button" value="LogOn" o ...

The issue of the malfunctioning HTML label input tag with id functionality

Just starting out with Html/CSS. Here is my signup.html code snippet Signup.html <div class="form-floating"> <select name="phone_number_0" class="form-control" required="" id="id_phone_number_0" ...

Troubleshooting problem with custom Angular directive integrating KineticJS

Hey there, I'm currently working on putting together a KineticJS application in Angular and need to resolve a minor issue. While following an example for setting up a draggable shape in AngularJS using KineticJS from this link: , I encountered this er ...

Guide to Utilizing an AJAX Call to Populate a Line Graph in Highcharts

I've been attempting to create a line graph using highcharts in asp.net, but I'm having trouble getting anything to show up on the chart. Here's the code I have so far: var chart; $(document).ready(function () { chart = new Hig ...

What is causing the issue preventing me from running npm run dev on CentOS 7?

Currently facing an issue while trying to install my application on a new server after migrating from centos6 to centos7. When attempting to install a Laravel app, everything goes smoothly as it did on centos6, except for when I run npm run dev [root@v6-a ...

Is your Cloud Functions task generating an Array when querying?

To access items and products in my database, I need to retrieve the "ean" field from the product and check if it matches the one in the request body. The structure of my database is as follows: "cart": { "items": { "0": {info here}, "1": {info ...

Leverage PHP email functionality by incorporating variables within the email

I am utilizing Google to create a QR code using a random number. Once the number is generated, it is saved as a variable. My intention is to incorporate this variable within an image link in an email. Below is an example of how I want to achieve this: Th ...

Navigating through express.js async routing and managing errors

I am trying to streamline my route handling process by integrating error handling as middleware for my async function. Below is my current implementation: router.get( "/", asyncMiddleware( routeProviderMiddleware( async ({ y }) => ({ ...