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;
}