CODEWITHSUNDEEP
javascriptjqueryhtml
Viking
Viking

Reputation: 1

in javascript, how to always keep the spinner in the center of current screen?

My following code can't make the spinner always show up in the center of the screen. Could anyone please help me? 

var div = document.createElement("div");
div.id="create";
div.style.top="50%";
div.style.left="30%";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "white";
div.style.color = "blue";
div.innerHTML = "please wait while your request is processed.";
div.style.zIndex="5";
div.position="fixed";
div.style.margintop="-9em"; 
div.style.marginleft="-15em";  
document.getElementById('center').appendChild(div);
ams.showSpinner( {

    element: $('create'),
    opacity: 0.3,
    duration: 0.3
 } );

Upvotes: 0

Views: 624

Answers (1)

Joe
Joe

Reputation: 15528

I'd recommend this approach:

JS:

$("<div/>", {
    id: 'create',
    text: 'Please wait while your request is processed.'
}).appendTo('#center');
ams.showSpinner({
    element: $('create'),
    opacity: 0.3,
    duration: 0.3
});

CSS:

#create{
    background: white;
    color: blue;
    position:absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    z-index: 5;
    margin: -50px 0 0 -50px;
}

#create is 50% from the top and 50% from the left but the negative margin value is half the width/height of itself so it's positioned in the center.

I only added the extra jQuery code to make it more readable, it's fine to use this instead:

var div = document.createElement("div");
div.id = "create";
div.innerHTML = "please wait while your request is processed.";
document.getElementById('center').appendChild(div);
ams.showSpinner({
    element: $('create'),
    opacity: 0.3,
    duration: 0.3
});

Upvotes: 1

Related Questions