I am trying to implement a close button for my popup DIVs. Each one has a unique ID and I want to hide them by setting the CSS 'display' property to 'none' when closed.
However, the following example is not functioning as expected. I am puzzled as to why...
Javascript
function CloseDiv(element) {
var id = $(element).closest('div').attr('id')
alert(id); // It correctly returns the ID
$("#" + id).css("display", "none");
}
HTML
<span id='close' onclick='CloseDiv(this)'>x</span>
Instead of extracting the id and hiding the div, you can simply use a direct selector to hide it.
function HideDiv(element) {
$(element).closest('div').hide()
}
.hide() function is basically the same as using .css("display", "none");
You can also get rid of the inline function call by using jQuery like this,
$(".close").click(function() {
$(this).closest("div").hide();
});
It's worth noting that I've opted for using class selectors instead of id selectors, especially if there are multiple elements with the same functionality.
Simply update
$(id).css("display", "none");
with
$('#' + id).css("display", "none");
or for a cleaner solution, utilize
$('#' + id).hide();
In my ongoing project using Spring MVC, the homepage features two input fields of String type. However, the regNo field accepts numbers as input. If a user enters a regNo, it should be directed to a specific method in the controller. On the other hand, if ...
I acknowledge that there are numerous questions similar to mine regarding this issue, but none of them have provided a solution for me. I understand that web services inherently convert my objects into json as part of the framework. I manually set the requ ...
After reviewing the documentation at this link: http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29, I noticed that the syntax for attaching rules to input arrays is as follows: rules: { "user[email]": "ema ...
How can I change the color of the hamburger menu icon's lines for medium and smaller screen sizes? I have attempted changing it through style attributes and using !important in my CSS file, but so far nothing has been successful. ...
When seeking to use jQuery to submit a form, I encountered a hurdle. I want to send the POST variables to a different action script rather than the default one in the form. Specifically, my form functions accordingly when the submit button is clicked: &l ...
Is there a way to style a select box without changing its fixed width when using lowercase and uppercase letters in the option tag? How can I achieve this with 'width="auto"'? DEMO: http://jsfiddle.net/uG3gq/ <div class="select_box" style="m ...
Is there a way to use $.getJSON to access the "name", "url", "headline", "timestamp", and "excerpt" from the array "article"? Link to API endpoint ...
Currently, I am researching $http interceptors and noticed that there are requestError and responseError functions available. 1) Can you explain the distinction between requestError and responseError? 2) Under what circumstances does requestError get t ...
A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...
When attempting to update my npm version from 3.10.10 to 5.4.2 and migrate react from 15.3.0 to 16.0, I deleted the node_modules folder and re-ran npm install. However, upon trying to run my application again, I encountered the following error: ERROR in ./ ...
When moving rows between tables, everything seems to work fine. However, once the row is moved to the other table, all JavaScript functions related to that row stop working, and the reason remains unknown. The JavaScript code is simple - it involves takin ...
class WebGLProcessor { initializeGLContext = (canvas, version) => { canvas.width = window.innerWidth * 0.99; canvas.height = window.innerHeight * 0.85; var gl = canvas.getContext(version ? 'webgl' : 'webgl2&apo ...
Having some trouble compiling Font Awesome SCSS files in my Laravel application. I installed Font Awesome using NPM, and the compiled CSS is stored in the 'public/css/' folder while a 'public/fonts/' folder was also created. However, th ...
Can someone assist me with playing a glb animation in A-FRAME using Three.js? The animation works for a second and then stops. Here is my current code: <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <scrip ...
Exploring the world of search functions for the first time, I decided to implement an AJAX function to call a PHP file on key up. However, I encountered some strange behavior as the content in the display area was changing, but not to the expected content. ...
One issue I faced was when trying to view a webpage in landscape mode on iPhones (specifically testing on model SE, but it appears that many people are experiencing the same problem with other iPhone models). I have created a simple example below, consist ...
My experience with IE versions 8 and 9 has been that they do not recognize the % entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...
Which is the optimal way to utilize MongoClient in Express: placing the client inside routes or embedding routes within the client? There are tutorials showcasing both methods, leaving me uncertain about which one to adopt. app.get('/',(req,res) ...
Encountering this unexpected error in the live environment, despite implementing a retry strategy of 500ms and wrapping the setAsync and getAsync functions with a setTimeout of 1s. It's puzzling why this issue persists. Error Message: AbortError at ...
Trying to manage an array that is returned from a PHP file after submitting form data. The value of the data after form submission is = ARRAY but I am unable to use this array in any way. Any suggestions on how to handle this array? Javascript: $(&apo ...