Recently, I developed a jQuery loader for my content div. However, it seems that the loader is causing my div class="typeface" to not display properly anymore. As a result, I am unable to use different fonts within this section of my webpage. The rest of the content div is functioning correctly. Can anyone assist me with solving this issue?
Below is the Javascript code I have used for elements:
$(document).ready(function() {
// Checking for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
And here is the HTML code used:
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="index.html">Welcome</a></li>
</ul>
<div id="content">
<div class="typeface-js" style="font-family: Helvetiker; color:#0182a8; font-size:25px; margin-bottom:10px;">Mauris ac eros. Donec quis lacus Header text.
</div>
Morbi gravida posuere est. Fusce id augue. More content text.
</div>
</div>