youpilat13 youpilat13 -4 years ago 105
HTML Question

Displaying Spinner until Mathjax loaded even with direct anchors URL

My issue is a little bit tricky. For the moment, I get to display a spinner until Mathjax equations are loaded in my HTML page. For this, I do :

<script type="text/javascript">

var targetSpin;
var targetHide;

$(document).ready(function() {

var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
};

targetSpin = document.body;
targetHide = document.getElementById('hide_page');
spinner = new Spinner(opts).spin(targetSpin);
});

</script>

<script type="text/x-mathjax-config">
//
// The document is hidden until MathJax is finished, then
// this function runs, making it visible again.
//
MathJax.Hub.Queue(function () {
spinner.stop();
targetHide.style.visibility = "";
});
</script>


Now, my issue is to get the same behavior, but for URL which contains anchors.

You can see this problem by clicking for example on a link which contains an anchor into the URL.

In this case, you won't see the spinner before HTML content displays : I would like to fix this issue but I don't know how to acheive it.

If someone could see a solution, that would be nice to tell it to me.

Thanks for your help

Answer Source

Use position: 'fixed'. This will keep the spinner in the center of the page, no matter if it is scrolled or not.

The spinner is present on your second example, but it is absolutely positioned at the top of your page.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download