I have a script that loads external HTML files, but I am facing an issue with changing the font to Arial. The script is as follows:
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('140314F00604.htm');
//alert("Thanks for visiting!");
});
$("#page2").click(function(){
$('#result').load('140314F029.htm');
//alert("Thanks for visiting!");
});
$("#page3").click(function(){
$('#result').load('140221F193.htm');
//alert("Thanks for visiting!");
});
});
</script>
<table cellpadding="0" cellspacing="0" style="width: 100%; border-size: 1px">
<tr>
<td><a id="page1" href="#">About</a></td>
<td><a id="page2" href="#">Community</a></td>
<td><a id="page3" href="#">Sponsor</a></td>
</tr>
</table>
<div id="result" style="color:red; font-style:italic; font-family:Arial; font-size:12px;"></div>
While the script changes the color, italicizes and adjusts size correctly, it struggles to change the font to Arial.
The imported HTML generated by software cannot be edited in the program itself. Hence, I aim to load it and modify its formatting.
The initial script worked seamlessly. However, switching the font from courier messes up the spacing due to text alignment using spaces in the imported HTML. Is there a way to rectify this issue?
function applyPreFont(){
var oldHtml = $('#result pre').html();
$('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');
}
function LoadExternalContent(pagename){
$('#result').load(pagename, function(data) {
applyPreFont();
// do other stuff
});
}
$(document).ready(function(){
$("#page1").click(function(){
LoadExternalContent('140314F00604.htm');
});
$("#page2").click(function(){
LoadExternalContent('140314F029.htm');
});
$("#page3").click(function(){
LoadExternalContent('140221F193.htm');
});
});
Original html file
The output from the script