We Keep Coding

How to stop Spin.js from other js file

i need help
Actually in my work i need to implement spin.js and block UI in a jqgrid. This is ok when i put the code in the same file and function, but i want to call a method from other JS file, and hear is where my problem. The spin.js and block UI start, then block UI stop with unblock but the spin.js still running.
Here is my code:
In BeforeRequest() in jqgrid i call one method
$.pui.common.loaderAnimationON("pane-content");
this method have this code
loaderAnimationON: function (div) {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent in px
left: '50%' // Left position relative to parent in px
};
var target = document.getElementById(div);
var spinner = new Spinner(opts).spin(target);
$.blockUI({
blockMsgClass: "gridProjectsLoader",
message: null
});
return spinner;
},
in gridComplete() i call other method
$.pui.common.loaderAnimationOFF("pane-content");
this method have this code
loaderAnimationOFF: function (div) {
var target = document.getElementById(div);
var spinner = $.pui.common.loaderAnimationON();
spinner.stop(target);
$.unblockUI();
}
Anyone can help me?
Thanks guys

You should use the same object to start and stop it. You can use global variables anywhere (just another .js)
Check this jsFiddle. It's stop spinner after 3 secs.
http://jsfiddle.net/YX7dy/8/
spinner=loaderAnimationON('Spin');
setInterval(function(){spinner.stop();},3000);

Call Javascript Method if Form is Valid in MVC4 Razor

I have an MVC4 Razor page and jQuery validation methods on it. I want to show a Loading spinner and I can show it when pressing Submit Button. However, if the form is not valid the spinner does not work due to not checking the validity of the form properly.
To achieve this I think 2 different approach can be used:
Scenario I: After user presses Submit button, the Spinner method is called. If the form is valid, the Spinner will be shown and the form will be submitted. If not, the spinner will not be shown and the form will not be submitted. After the user validate the form and presses the Submit button, it will work as the first stage.
<script type="text/javascript">
$(function () {
$("#submitbtn").click(function () {
if ($('#myform').valid()) { //If there is no validation error
//Show "Loading..." spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);
}
});
});
<input id="submitbtn" type="submit" value="Send" />
Scenario II: The Form will be validated with jQuery validation method as the other controls. In that case, if the Form is valid, showSpinner() method will be called. If not, the Form will not be submitted and the showSpinner() will not be called. Here is the method like above just a little changes and jQuery validation method.
<script type="text/javascript">
function showSpinner() {
//if ($('#myform').valid()) { //As the Form is checked already, there is no need to check again.
//Show "Loading..." spinner if all the components on the Form are valid
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);
//}
}
<script type="text/javascript">
/* <![CDATA[ */
jQuery(function () {
//...
jQuery("#myform").validate({
expression: "if (VAL) {showSpinner(); return true;} else {return false;}",
message: "Form is not valid!.."
});
});
/* ]]> */
How can I apply this properly by using one of this approach?

How to display page loading indicator using spin.js

I am learning how to use Spin.js so that a loading indicator (the spinner) can be shown while the web page is loading.
I got it working but I am not sure whether I am calling the spin/stop in the proper page lifecycle. Is it possible to show the spinner before $(window).ready ?
<script type="text/javascript">
var spinner;
$(window).ready(function loadingAnimation() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = $("body")[0];
spinner = new Spinner(opts).spin(target);
});
window.onload = function() {
spinner.stop();
};
For the working example, please see http://sgratrace.appspot.com/industry.html

I created an object to control the spinning:
Rats.UI.LoadAnimation = {
"start" : function(){
var opts = {
lines : 13, // The number of lines to draw
length : 7, // The length of each line
width : 4, // The line thickness
radius : 10, // The radius of the inner circle
corners : 1, // Corner roundness (0..1)
rotate : 0, // The rotation offset
color : '#000', // #rgb or #rrggbb
speed : 1, // Rounds per second
trail : 60, // Afterglow percentage
shadow : false, // Whether to render a shadow
hwaccel : false, // Whether to use hardware acceleration
className : 'spinner', // The CSS class to assign to the spinner
zIndex : 2e9, // The z-index (defaults to 2000000000)
top : $(window).height()/2.5, // Manual positioning in viewport
left : "auto"
};
var target = $("body")[0];
return new Spinner(opts).spin(target);
},
"stop" : function(spinner){
spinner.stop();
}
};
When the DOM is loaded, I start spinning:
$(document).ready(function(){
// Once the DOM is loaded, start spinning
spinner = Rats.UI.LoadAnimation.start();
pageUI();
});
When the entire page is loaded, I stop spinning:
$(window).load(function(){
// Once the page is fully loaded, stop spinning
Rats.UI.LoadAnimation.stop(spinner);
});
What's the difference between window.onload vs $(document).ready()
See the full code on my github repo:
https://github.com/seahrh/sgratrace/blob/master/war/js/rats.js
https://github.com/seahrh/sgratrace/blob/master/war/index.html

How do I modify the jQuery aToolTip plugin to "flip" to left when approaching the right margin?

I am using aToolTip and need to have the tooltips flip from a normal lower left placement, to a right placement to keep them from going off the page.
I did a little research, and with a little help, I was able to modify the code to a little to allow for a working "flip" on a single image. The image is referred to as hat_icon, and that code is below:
$(function() {
//$("#wrap a[title]").tooltips();
//$("#page-wrap a[title]").tooltips();
// $('a').aToolTip({
// $('a').aToolTip({
$("a:not(.tooltipquestion, .accountnav, #hat_icon)").aToolTip({
// no need to change/override
closeTipBtn: 'aToolTipCloseBtn',
toolTipId: 'aToolTip',
// ok to override
// fixed: false, // Set true to activate fixed position
fixed: false, // Set true to activate fixed position -- chris/peter 12/9
clickIt: false, // set to true for click activated tooltip
// inSpeed: 200, // Speed tooltip fades in
inSpeed: 400, // Speed tooltip fades in --chris/peter 12/9
outSpeed: 400, // Speed tooltip fades out
tipContent: '', // Pass in content or it will use objects 'title' attribute
toolTipClass: 'defaultTheme', // Set class name for custom theme/styles
xOffset: 15, // x position
yOffset: -50, // y position
onShow: null, // callback function that fires after atooltip has shown
onHide: null // callback function that fires after atooltip has faded out
});
jQuery('a.accountnav,#hat_icon').hover(function(){
setTimeout(function(){
jQuery('#aToolTip').css({'border-radius':'12px 0 12px 12px'});
}, 1000);
}, function(){
setTimeout(function(){
jQuery('#aToolTip').css({'border-radius':'12px 12px 12px 0'});
},500);
});
jQuery('a.accountnav,#hat_icon').aToolTip({
fixed: false,
xOffset: -250,
yOffset: -50,
});
jQuery('#hat_icon').aToolTip({
fixed: false,
xOffset: -250,
yOffset: -80,
});
});
I know there is a way to detect collision using something like position: (collision: "flipfit flip"), but I do not know how to implement it properly. Can you help me?

To flip
Find this:
$('#'+settings.toolTipId).css({
top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
left: (el.pageX + settings.xOffset)
});
And replace by this:
A_TOP = (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset);
if(A_TOP<0){
A_TOP = 40;
}
A_LEFT = (el.pageX + settings.xOffset);
WindowWidth = ($(window).width()-$('#'+settings.toolTipId).outerWidth());
if(A_LEFT>WindowWidth){
A_LEFT -= $('#'+settings.toolTipId).outerWidth();
}
$('#'+settings.toolTipId).css({
top: A_TOP,
left: A_LEFT,
whiteSpace:"nowrap"
});

How to make a spinner work using Spin.js?

Hello guys,
I am new at JavaScript and after tons of research on the Internet and failed attempts on implementing a spinner I decided to ask you.
I am using Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6 ). It seems to be an great tool, but I simply cannot make it work. My question is what I doing wrong? I cannot really figure it out. Any help will be much appreciated. Thank you so much.
Here is my piece of code:
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
function spinnerInit() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto', // Left position relative to parent in px
visibility: true
};
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts).spin(target);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnPerformSave').click(function () {
spinnerInit();
});
});
</script>
<div id="spinnerContainer" class="spinner" style="width: 100%; height: 150%;
position: absolute; z-index: 100; background-color: Gray;
left: 0; top: 0; bottom: 0;right: 0">
</div>

Try replacing
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
with
$('#spinnerContainer').after(new Spinner(opts).spin().el);
You need to append the html element the spin method creates to the dom
Here is an example to get you started http://jsfiddle.net/5CQJP/1/

I am not sure if this question ever got answered, but for those who are still looking for an answer:
I found out that I needed to move the javascript underneath the spinnerContainer div. I believe this would also work if you put the javascript in an onload event. Here is what I did:
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>

Here is my answer. Works great.
//Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>
<button id="btnSearchClick">Search</button>
//Displays Loading Spinner
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script type="text/javascript">
//On button click load spinner and go to another page
$("#btnSearchClick").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
//Go another page.
window.location.href = "http://www.example.com/";
});
</script>

Try this:
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts);
If you use jQuery:
$(target).html(spinner.el);
If not, as in the documentation:
target.innerHtml = '';
target.appendChild(spinner.el);
I didn't try this but it should work. If a problem occurs, just let me know.

I know this is way late but I am curious if you ever got this to work. I'll tell you one dumb thing I was doing for a bit and didn't realize it. I was making the spinner the same color as the background it would be showing up against and that's why I couldn't see it. Also I used JQuery as seen here https://gist.github.com/its-florida/1290439
Worked like a charm