Disable the div by graying it out when the button is clicked

In my jsni form, I have implemented a click handler on the save button. When the save button is clicked, I would like the specific div to be greyed out to indicate that data is being saved.

var x=$doc.createElement("div");
x.id="nn";
var lbl=$doc.createElement("Label");
var labelText = $doc.createTextNode("FirstName: ");
lbl.appendChild(labelText);
x.appendChild(lbl);

var a=$doc.createElement("input");
x.appendChild(a);

var br = $doc.createElement("br");
x.appendChild(br);

var lblcl=$doc.createElement("Label");
var labelText1 = $doc.createTextNode(" LastName: ");
lblcl.appendChild(labelText1);
x.appendChild(lblcl);


var b=$doc.createElement ("input");
x.appendChild(b);

var br = $doc.createElement("br");
x.appendChild(br);


var lblc=$doc.createElement("Label");
var labelText2= $doc.createTextNode("CollegeName: ");
lblc.appendChild(labelText2);
x.appendChild(lblc);


var p=$doc.createElement("input");
x.appendChild(p);

var br = $doc.createElement("br");
x.appendChild(br);

var lblcl=$doc.createElement("Label");
var labelText3= $doc.createTextNode(" SchoolName: ");
lblcl.appendChild(labelText3);
x.appendChild(lblcl);


var q=$doc.createElement ("input");
x.appendChild(q);

var yu = document.createElement("br");
x.appendChild(yu);

var tr=$doc.createElement("Button");
var buttonTxt = $doc.createTextNode("Save");
tr.appendChild(buttonTxt);
x.appendChild(tr);
body.appendChild(x);

I have code to grey out the element, but I am unsure of where to place it within my existing code.

overlay = document.createElement("div")
overlay.style.width = _width + "px"
overlay.style.height = _height + "px"
overlay.style.position = "absolute"
overlay.style.background = "#dedede"
overlay.style.top = _top + "px"
overlay.style.left = _left + "px"

overlay.style.filter = "alpha(opacity=50)"
overlay.style.opacity = "0.5"
overlay.style.mozOpacity = "0.5"

Answer №1

To enhance the appearance of the div and its contents, develop a custom design that adjusts the opacity. When a user clicks on it, simply add this customized style to the div.

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 Upload Your Avatar Image with the Stream-Chat API from GetStream.io

I am currently in the process of developing a Stream-Chat API project and I want to allow users to upload images directly from their devices. Upon testing, everything seems to be working fine, but the uploaded image is not displayed - only the default avat ...

Utilize pre-defined Bootstrap variables in a custom variables file

When I import the /bootstrap/scss/_variables.scss file AFTER my custom ./variables.scss file, I am unable to access the existing global variables from the original _variables.scss file. Bootstrap often uses cascading variable assignments which becomes a pr ...

Include a variable within the tags parameter of the Flickr API

My Angular code snippet is up and running: var url ="https://api.flickr.com/services/rest/?method=flickr.photos.search& api_key=c4e2f731926eefa6fe1d3e9c2c9f9449&tags=coffee&format=json&jsoncallback=JSON_CALLBACK"; $http.jsonp(url).then(f ...

``The error 'Uncaught SyntaxError' is thrown during the production build of

I am facing an issue with the production build of my Vuejs application. When I use the npm run build command to generate the production build and then use serve -s dist to deploy it, everything works fine except for one parameterized path (product) in Vue ...

Align elements on the left side with some space between them

Having trouble displaying a list of images inline within a div. When I float them left, they leave a lot of space and do not display properly. Can anyone help me with this issue? See screenshot below: Here is my html code: <div class="col75"> & ...

Using the "this" keyword is required for an Angular Service-created function

Although this question leans more towards JavaScript than Angular, I encountered an issue while creating a service. The function call looked like this: // controller injects activityApi , then service function call is made var activities = activityApi.get ...

Detaching the jQuery event where the context is tied to the handler

My current challenge involves removing a jQuery event with a callback function bound using this. The issue arises from the fact that .bind() generates a new function each time it is called, causing difficulties when trying to remove the event. I am strugg ...

What is the best way to organize columns on the front end?

A table needs to be displayed on the front end with the following code snippet: <logic:present name="searchStudent"> <table class=" tblSearchResult" border="1" cellspacing="0" cellpadding="0"&g ...

Attempting to single out various entities within a JSON array through the use of radio buttons

I am currently developing a website to showcase sports teams' schedules. Each team has its own JSON file containing relevant information that I aim to display upon selecting the team from a radio button. For instance, let's consider the example ...

How can a HTML element be clicked in JQuery to copy it into a text area?

Is it possible to select text from a list and insert it into a text box by clicking on it? I have developed a JSON API that retrieves a list of individuals from the database. Following this, there is a form with a text field that displays the list of peopl ...

Tips for automatically scrolling to the bottom of a page and focusing on an iframe

My website features a large banner image with content followed by an embedded YouTube video within an iframe. While the webpage is responsive, on mobile devices the header appears too big and users have to scroll down to see the video. I want the webpage ...

Making an element sticky within a container while the parent element is set to overflow hidden

Here is a case where I have generated HTML and CSS code that includes classes for overflow, container height, and sticky positioning: .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .container { max-height: 100px; ...

Issues with Thunderbird not displaying copied HTML emails

Hello there amazing people at Stackoverflow. I need some assistance with HTML formatting. I am currently working on a bootstrap modal that is being dynamically modified through jQuery using the append() function. Check out the code snippet below: <div ...

Guide to pulling and showcasing information from XML at 30-second intervals using JQUERY AJAX and HTML

Seeking assistance as a beginner. Looking to retrieve and showcase data (HTML / PHP page) from XML every 30 seconds. XML FILE : <MAINData> <LiveData> <Field no="1">ENG ODI</Field> <Field no="2">ENG</Field> ...

Calling gtag("event") from an API route in NextJS

Is there a way to log an event on Google Analytics when an API route is accessed? Currently, my gtag implementation looks like this: export const logEvent = ({ action, category, label, value }: LogEventProps) => { (window as any).gtag("event&quo ...

Is it feasible to activate a Bootstrap Tooltip from a different element?

I am currently developing a system that enables users to add notes over an image they upload. Presently, I have a note div that, upon clicking, opens a text box for editing. When hovering over this div, I utilize Bootstrap Tooltip to preview the contents o ...

An automatic selection in my AngularJS drop-down menu

I am currently utilizing AngularJS to develop a basic web application. My goal is to have the values of city A displayed as the default choice in my select dropdown. index.html <body ng-controller="MainCtrl"> <select ng-model="selectedCity" ...

The value control input does not get properly updated by ngModelChange

Having difficulty updating an input as the user types. Trying to collect a code from the user that follows this format: 354e-fab4 (2 groups of 4 alphanumeric characters separated by '-'). The user should not need to type the '-', as it ...

Create an animated underline for two CSS tabs

I'm interested in learning how to create a similar animation using JS, jQuery, or Vue Transitions with Bootstrap. I want to achieve the effect of moving the line under TAB1 to the right when TAB2 is clicked. Can anyone guide me on animating the div sm ...

Is there a method to stop react-select (Select.Async) from erasing the search input value when it loses focus?

Situation: In my setup, I have a standard select element (categories), which dictates the options displayed in a Select.Async component from react-select. Problem: Consider this scenario: a user is searching for an option within Select.Async whil ...