Ajax spinner layout

[chancar]

Hi!

I'm working on a form which is a sort of calculator. It is made of two dropdowns, a field and several calcs (currently only one of them is on).

The thing is when I run it first shows a spinner in the second dropdown (which is a CDD) and once it is loaded it shows a second spinner in the calc with a message (please see attached file).

As it actually looks awful, I'm trying to:

1.- Make it show only one spinner for all the elements to be loaded
2.- Make the spinner show in the middle of the form (not over a particular element).
3.- Remove the square around it.
4.- Delete/edit the message.

Any thoughts on how could it be done?

Thanks in advance.

Juan.

 

[chancar]

Friendly bump!

 

[rob]

hi
Its not going to be possible to show one spinner, the spinner is there to show which field is being updated and thus is embedded in each bit of Fabrik's code that is set up to use it.
Perhaps you could hack the spinner css to get it to cover the whole page the issue here is that blocks the user from doing anything whilst the spinner is shown which is really annoying.

You could certainly in your template (the fabrik form template (see here http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/#changing-a-fabrik-template) or the Joomla template) add some css to alter the look of the spinner, here's what we have as default (in media/com_fabrik/css/fabrik.css)

.spinner {
position: absolute;
opacity: 0.9;
filter: alpha(opacity =     90);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90 );
z-index: 999;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
}
 
.spinner-msg {
text-align: center;
font-weight: bold;
}
 
.spinner-img {
background: url(../images/ajax-loader.gif) no-repeat;
width: 24px;
height: 24px;
margin: 0 auto;
}

The text for the spinner is translatable - so you can globally modify it by adding a language override (extensions->language manager->overrides) - The constant that we use is 'COM_FABRIK_LOADING'

 

[chancar]

Thanks, Rob! It helped a lot.

I hacked the css and created a custom spinner using the following code:

.spinner {
position: relative;
opacity: 0.9;
filter: alpha(opacity = 90);
-ms-filter: progidXImageTransform.Microsoft.Alpha(Opacity=90 );
z-index: 999;
background: #fff;
border: 0px solid #ccc;
border-radius: 2px;
z-index: 999;
}
.spinner-msg {
text-align: none;
font-weight: bold;
display: none;
}
.spinner-img {
position: fixed;
z-index: 999;
left: 23%;
top: 51%;
height:60px;
width:60px;
margin:0px;
overflow: show;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,174,239,.15);
border-right:6px solid rgba(0,174,239,.15);
border-bottom:6px solid rgba(0,174,239,.15);
border-top:6px solid rgba(0,174,239,.8);
border-radius:100%;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
}

It seems to override the previous spinners and now it only shows one and exactly where I want. However, it feels like it will all be ruined as soon as I modify the form's custom css...

Best!