javascript include new attribute adjustment

I am working with this JavaScript code snippet:

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("company-overview.html");
    }, 2000);

});
</script>

It's great because it allows me to load another page into the current one, which is quite useful.

Now I have a question, how can I change the background color of a class that has already been loaded?

The class is named 'metro' as defined in its CSS file that is included and used to set the background color of the main page.

EDIT -------

I updated my JavaScript like so, but it still doesn't work...

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".metro.tile-area-darkCrimson").css('background-color', '#f36c20');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script> 

I'm not sure what is causing the issue, any help would be greatly appreciated!

By the way, the CSS rules for the .metro.tile-area-darkCrimson class are as follows...

.metro .tile-area-darkCrimson {
  min-width: 100%;
  height: 100%;
  background-color: #1f255b !important;

    transition: background-color .25s ease-in-out;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out;

}

Answer â„–1

Consider loading only a fragment of the company-overview.html page instead of adding another body element.

Source: https://api.jquery.com/load/

Loading Specific Page Sections

By using the .load() method, we can specify a specific part of the remote document to be inserted. This can be done by utilizing a special syntax in the url parameter. If the string contains one or more spaces, everything after the first space is considered a jQuery selector that determines which content should be loaded.

$( "#result" ).load( "ajax/test.html #container" );

Once the content is loaded, you have the option to add or remove CSS classes and modify the CSS using a callback function:

Using Callback Functions

If a "complete" callback function is provided, it will run after post-processing and HTML insertion are complete. The callback function is executed for each element in the jQuery collection, with 'this' referring to each individual DOM element.

$( "#result" ).load( "ajax/test.html", function() {
  $('.my-class', '#result').removeClass('my-class');
});

Answer â„–2

If you want to enhance your load method, consider including a callback:

$(".main-tile-group").css({ marginLeft:"-40px", width: "1080px"}).load(
  "company-profile.html",
  function() {
        $(".cityscape").css("background-color", "blue");
    }
);

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

Using the combined power of CSS and jQuery to create dynamic visual effects based

Having some trouble figuring out why this code isn't functioning as expected... I've got a bunch of DIVs that have the class .rightColumnButton. Some of them currently have a height set to 30px: .rightColumnButton{ height:30px; width:206px; mar ...

JavaScript: Transforming a key-value pair collection into an array of objects

I'm looking to convert a dictionary into a list of dictionaries using JavaScript. Can someone help me with that? var dict = { "apple" : 10, "banana" : 20, "orange" : 30 } var data = [ {"apple" : 10}, {"ban ...

Issue with third-party react module (effector) causing Webpack error

UPDATE: After struggling with my own custom Webpack setup, I decided to switch to using react-scripts, and now everything is compiling smoothly. It seems like the issue was indeed with my Webpack/Babel configuration, but I still can't pinpoint the exa ...

Unleashing the Power of RxJS with OR Conditions

I am working with two Observables. For instance, I am waiting for either an HTTP POST call or a WebSocket call to return so that I can proceed. Once either call returns, I need to verify the information until a certain condition is met. In the following e ...

struggling to send variables to jade templates with coffeescript and express.js

As a newcomer to node and express, I am currently building the front end of an application that utilizes jade as its templating engine. Despite extensive searching online and within this community, I have not been able to find a solution to a particular is ...

What is the process for transforming the outcome of a Javascript function into a webpage containing solely a JSON string?

I have a specific requirement where I need to fetch a URL and ensure that the only content displayed on the page is a JSON string. For instance, let's say I created a basic function called getDayOfWeek() to determine the current day of the week. The ...

Ensure that parameters are validated correctly in the Next.JS application router using the searchParams method

When building the page, I need to properly validate params in the Next.JS app router using searchParams. My goal is to show a main image (coverImage) for each photo on the /gallery page. When a photo is clicked, I want to display more photos of the same k ...

Blend the power of Dynamic classes with data binders in Vue.js

Recently, I've been working on a v-for loop in HTML that looks like this: <ul v-for="(item, index) in openweathermap.list"> <li>{{item.dt_txt}}</li> <li>{{item.weather[0].description}}</li> <li>{{item.w ...

Encountering an issue when trying to upload a file for the second time

I am currently working on a project where I need to upload an excel file and send it to an API using ReactJS. So far, I have been able to successfully send the file to the API. However, in my submit function, I want to reset the saved excel file from the s ...

Having trouble getting a basic jQuery UI tooltip to function properly

I attempted to recreate the demo found on this website: http://jqueryui.com/tooltip/#default Here is the HTML code I used: <h3 title='this is the title of hello world'>hello world</h3> And here is the JavaScript code: $(document). ...

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

I'm attempting to achieve the following: {{#if model.user.isAdmin}} <div> My name is {{model.user.name}} </div> {{/if}} within a handlebar that is being used in a controller unrelated to users: <script type="text/x-handlebars" data- ...

Injecting a PHP file into a div upon clicking the submit button, all the while already submitting data

Hello there, I have a question regarding submitting a form and loading a relevant PHP file into a target div using the same submit button. I have attempted to do this but need some help. <form id='myForm' method="POST" action="processForm.php ...

What is the process of adding an array into a JSON object using the set() function in Firebase?

I am trying to add a new item to my firebase database with a specific JSON object structure: var newItem = { 'address': "Кабанбай батыр, 53", 'cityId': 1, 'courierName': "МаР...

Is it possible for node.js to execute promises without needing to await their fulfillment?

When I visit the Discord tag, I enjoy solving questions that come my way. While I am quite proficient in Python, my skills in Javascript are just about average. However, I do try my hand at it from time to time. The Discord.py library consists of several ...

The jQuery library triggers an error that can only be resolved by refreshing the

I am currently experiencing an issue with my form (form links are provided below, specifically referring to form1). The problem arises when I include jquery.js, as it fails to load the doAjax and getIP functions that are contained in a separate js file nam ...

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

Display the printed outcome in a fresh window

HTML: <form id="dbview" method="post" action="core/process.php"> .... <p style='text-align:center;'> <input id='delete' type='submit' name='process' value='Delete selected'/> < ...

Changing the name of a React Native sample application

I am currently working on a project based on this App example: https://github.com/aksonov/react-native-router-flux/tree/master/Example When I tried to change the following lines: index.ios.js import App from './App'; AppRegistry.regist ...

Regular expressions should be utilized in a way that they do not match exactly with a

Can someone help me create a regular expression for an html5 input pattern attribute that excludes specific items? How can I convert ab aba ba into a pattern that will match anything that is not exactly one of these words? For example, I want the fol ...

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...