I want to show loading animation if browser supports js. if javascript is disabled then the image will show but never be hidden, in this case. For this purpose I wrote this code directly after tag
<?php
$results = get_browser();
if ($results["javascript"] == 1) {
echo '<div id="loading"><img src="core/design/img/load/load.gif"/></div>';
}
?>
And my js looks like that
$(window).load(function(){
$('#loading').fadeOut(600);
});
Got error message browscap ini directive not set in Any suggestion to realize my idea? Please help
You can just use:
<body>
//set the div to hidden by default
<div id="loading" style="display:none"><img src="core/design/img/load/load.gif"/></div>
//place this code directly below the loading div, it will run before page/dom is loaded
<script type="text/javascript">
document.getElementById('loading').style.display = 'block';
</script>
<script type="text/javascript">
$(function() {
//this will run after the page has loaded
$('#loading').fadeOut(600);
});
</script>
...
If you want to do exactly what aquastyle.az does (though the above solution is faster), You can do this:
<body>
<script type="text/javascript">
//if JavaScript is enabled, append the loading div to be body
$('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
</script>
<script type="text/javascript">
$(function() {
//this will run after the page has loaded
$('#loading').fadeOut(600);
});
</script>
...
The get_browser function must be download the appropriate INI file and include it in your PHP.ini file.
Instead of trying to figure out if the user has javascript enabled, why don't you build out the site from the perspective of progressive enhancement, so it works for all users regardless of their browser settings.
Alternatively, you could ask javascript to set a cookie, and then check that the cookie exists in PHP, it's by no means 100% foolproof method but could work for your situation.
In your HTML, you could do something like this:
<html class="no-js">
...
Then, once the page loads, replace the no-js class with a js class via JavaScript.
$(window).load(function(){
$('html').removeClass('no-js').addClass('js');
});
Finally, in your CSS, show the loading image if the browser supports js and hide it if it doesn't.
.js #loading {
display: block;
}
.no-js #loading {
display: none;
}
Does that make sense?