The code snippet below is included in the <head> section of the main page:
<script type="text/javascript">
$(document).ready(function () {
$('#innerframe').load(function () {
$(this).contents().find($(".TitleBG")).css("background-color", "red");
});
});
</script>
<iframe src="/HomePage.aspx" onload="GetAlerts();" id="innerframe"></iframe>Following that, there is a sample div on the .aspx page within the iframe:
<div class="col-md-12">
<div class="col-md-1 TitleBG">Drive</div>
<div class="col-md-3 TitleBG">Name</div>
<div class="col-md-1 TitleBG">Type</div>
<div class="col-md-1 TitleBG">Format</div>
<div class="col-md-2 TitleBG">Free Space</div>
<div class="col-md-2 TitleBG">Available Space</div>
<div class="col-md-2 TitleBG">Drive Size</div>
</div>
I am attempting to change the background-color property of the divs with the 'TitleBG' class using the provided jQuery code. However, it does not seem to be functioning as expected.
The code works when I apply the
$(".TitleBG").css("background-color", "red");