I can start spinner, but dont know how to stop it. Pls help:
//On button click load spinner and go to another page
$("#btn1").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);
});
$("#btn2").click(function () {
//Write code to stop spinner
});
<button id="btn1">Start</button>
<button id="btn2">Stop</button>
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>
Refernces:
http://spin.js.org/
Stop Spinner.js
Use this Code.
$("#btn2").click(function () {
//Write code to stop spinner
$('#loading').fadeOut();
});
Just destroy it, for instance - it will disappear
$("#btn2").click(function () {
document.getElementById('loading').innerHTML='';
});
$(trget).data('spinner', spnr);
$('loading').data('spinner').stop();
//On button click load spinner and go to another page
$("#btn1").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);
});
$("#btn2").click(function () {
//Write code to stop spinner
$('#loading').fadeOut();
});
<button id="btn1">Start</button>
<button id="btn2">Stop</button>
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>
make the var spnr for accessible both the functions,
spnr = new Spinner(opts).spin(trget);
----------
$("#btn2").click(function () {
//Write code to stop spinner
spnr.stop();
});
Related
I have the following Ajax request which is within a partial view that requests addresses from a service and can take a few seconds to populate the table:
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "updatearea", OnBegin = "ShowLoading", OnComplete = "HideLoading" }))
{
<div id="updatearea" class="form-group">
<div style="width:300px; display:block; float:left;">
#Html.TextBox("PostCode", null, new { #class = "form-control" })
</div>
<div id="NewAddressLine">
<input id="btnLookupPostcode" type="submit" value="Lookup Postcode" class="btn btn-default" />
</div>
</div>
<div id="spinner"></div>
}
And this JavaScript which is successfully starting the loading spinner but not stopping it once the partial view has rendered fully:
function ShowLoading() {
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
left: '50%' // Left position relative to parent
};
var target = document.getElementById('spinner');
var spinner = new Spinner(opts).spin(target);
}
function HideLoading() {
var spinner = $('.spinner');
spinner.stop();
}
Please make it stop!
Posted as a comment initially and a bit of a radical solution but this will stop it completely :
spinner.remove()
Cleans up all references and attached events...
Might be spinner.spin(false) or $('.spin').spin('hide'); depending on jQuery plugin in use. Which library are you using? Just spin.js?
Your reference to the widget may be getting lost as well. Numerous ways to fix this; essentially make a variable in a scope you know will be maintained and assign the widget to that variable for safe keeping.
var MySpinner = function(){
var spinner = undefined; //Widget will be assigned here
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
left: '50%' // Left position relative to parent
};
return {
show: function(){
var target = document.getElementById('spinner');
spinner = new Spinner(opts).spin(target);
},
hide: function(){
spinner.stop();
}
}
}
var spinnerInstance = new MySpinner();
spinnerInstance.show();
spinnerInstance.hide();
I created two functions that should show and hide a spinner (iOS Spinner):
var overlay;
function startSpin() {
var opts = {
lines: 13, // The number of lines to draw
length: 11, // The length of each line
width: 5, // The line thickness
radius: 17, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#FFF', // #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.createElement("div");
document.body.appendChild(target);
var spinner = new Spinner(opts).spin(target);
overlay = iosOverlay({
text: "Searching ...",
spinner: spinner
});
return false;
}
function stopSpin() {
window.setTimeout(function() {
overlay.update({
icon: "img/check.png",
text: "Success!"
});
}, 3e3);
window.setTimeout(function() {
overlay.hide();
}, 5e3);
}
So in my process() function I first enable the spinner, call another function that loads data from the database and after this I stop the spinner:
function process() {
startSpin();
loadData();
stopSpin();
}
The loadData() function is quite heavy, that means it can take some seconds for it to finish.
The problem is that the spinner only shows up once the loadData() function finished.
Why does the spinner not show up before the loadData() function is called?
I am using jsplumb to draw dynamic state machine diagram. On click of a button I need to add new box in a drawing area and allow user to position it as per their need.
I am not getting any proper easy to understand documentation for this. I tried few things:
var i=8;
function AddDiv() {
var obj = new Date();
var Div = $('<div/>', {
'class':'box ui-draggable ui-draggable-handle ui-droppable',
'id':'box_'+i,
'html':'BOXESNEW'
}).appendTo('.statemachine_cont');
jsPlumb.addEndpoint($(Div), targetEndpoint);
$(Div).draggable(
{
drag: function(){
jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints
// jsPlumb.addEndpoint($(this));
}
});
$(Div).addClass('box ui-draggable ui-draggable-handle ui-droppable');
}
var a = $("#a");
//Setting up drop options
var targetDropOptions = {
activeClass: 'dragActive'
};
//Setting up a Target endPoint
var targetColor = "#BEBEBE";
var targetEndpoint = {
anchor: "BottomCenter", //Placement of Dot
endpoint: ["Dot", { radius: 8}], //Other types are rectangle, Image, Blank, Triangle
paintStyle: { fillStyle: targetColor }, //Line color
isSource: true, //Starting point of the connector
// scope: "green dot",
connectorStyle: { strokeStyle: "#5C96BC", lineWidth: 2 }, // Means Bridge width and bridge color
connector: ["Bezier"], //Other properties Bezier
maxConnections: -1, //No upper limit
isTarget: true, //Means same color is allowed to accept the connection
dropOptions: targetDropOptions //Means when the drag is started, other terminals will start to highlight
};
jsPlumb.bind("ready", function () {
//Set up endpoints on the divs
jsPlumb.addEndpoint($(".box ui-draggable ui-draggable-handle ui-droppable"), targetEndpoint);
jsPlumb.addEndpoint($(".box ui-draggable ui-draggable-handle ui-droppable"), sourceEndpoint);
jsPlumb.draggable($(".box ui-draggable ui-draggable-handle ui-droppable"));
jsPlumb.animate($("#a"), { "left": 50, "top": 100 }, { duration: "slow" });
});
Not sure what I have done is correct, I referred to some online code available and modified it.
My issue here is: Onclick of a button I am able to add a new box and also able to drag a connection from that box. But when I try to drag that box (i.e change its position), the connection does not move. Box is moved but I am unable to move the connection with the box.
When I try to move the newly added box or the box connected to new one, both the boxes can be moved but the connection remains static and doesn't move. where as if other boxes are moved it moves along with the connections. I have added a image of that for reference.
1st image shows how newly added box and new connection appears. 2nd image shows how moving of the box creates the issue.
Here is how I manged to get it working. I modified my entire code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='js/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css" href="css/demo-all.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type='text/javascript' src="js/jquery.ui.touch-punch-0.2.2.min.js"></script>
<script type='text/javascript' src="js/jquery-ui-1.9.2.min.js"></script>
<script type='text/javascript' src="js/jquery.jsPlumb-1.7.2-min.js"></script>
<style type='text/css'>
.hidden { display: none; }
</style>
<script type='text/javascript'>
$(window).load(function(){
function cloneWindow(instance) {
var $jspContainer = $("#statemachine-demo"),
divid = "fromTemplate_" + new Date().getTime().toString()
$cloneElement = $("<div class='w'>New Window <div class='ep'></div></div>").attr("id", divid);
$jspContainer.append($cloneElement);
instance.draggable(divid);
instance.makeSource($cloneElement, {
filter: ".ep", // only supported by jquery
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 1
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 10,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
instance.bind("connection", function (info) {
info.connection.getOverlay("label").setLabel(info.connection.id);
});
instance.makeTarget($cloneElement, {
anchor:"Continuous",
dropOptions:{ hoverClass:"dragHover" }
});
}
jsPlumb.ready(function () {
$("#addwindow").click(function() {
cloneWindow(instance);
});
// setup some defaults for jsPlumb.
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", {
radius: 2
}],
HoverPaintStyle: {
strokeStyle: "#1e8151",
lineWidth: 2
},
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}],
["Label", {
label: "Drag this and drop it on another element to make a connection.",
id: "label",
cssClass: "aLabel"
}]
],
Container: "statemachine-demo"
});
jsPlumb.importDefaults({
filter: ".ep",
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 1
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 10,
dropOptions: {
hoverClass: "dragHover"
}
});
var windows = jsPlumb.getSelector(".statemachine-demo .w");
// initialise draggable elements.
instance.draggable(windows);
// bind a click listener to each connection; the connection is deleted. you could of course
// just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
// happening.
instance.bind("click", function (c) {
instance.detach(c);
});
// bind a connection listener. note that the parameter passed to this function contains more than
// just the new connection - see the documentation for a full list of what is included in 'info'.
// this listener sets the connection's internal
// id as the label overlay's text.
instance.bind("connection", function (info) {
info.connection.getOverlay("label").setLabel(info.connection.id);
});
// suspend drawing and initialise.
instance.doWhileSuspended(function () {
// make each ".ep" div a source and give it some parameters to work with. here we tell it
// to use a Continuous anchor and the StateMachine connectors, and also we give it the
// connector's paint style. note that in this demo the strokeStyle is dynamically generated,
// which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i
// would recommend you do. Note also here that we use the 'filter' option to tell jsPlumb
// which parts of the element should actually respond to a drag start.
instance.makeSource(windows, {
filter: ".ep", // only supported by jquery
anchor: "Continuous",
connector: ["StateMachine", {
curviness: 1
}],
connectorStyle: {
strokeStyle: "#5c96bc",
lineWidth: 2,
outlineColor: "transparent",
outlineWidth: 4
},
maxConnections: 10,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
// initialise all '.w' elements as connection targets.
instance.makeTarget(windows, {
dropOptions: {
hoverClass: "dragHover"
},
anchor: "Continuous"
});
// and finally, make a couple of connections
instance.connect({
source: "opened",
target: "phone1"
});
instance.connect({
source: "phone1",
target: "inperson"
});
instance.connect({
source: "phone1",
target: "phone1"
});
});
});
});
</script>
</head>
<body>
<div class="demo statemachine-demo" id="statemachine-demo" style="border:2px solid;border-radius:25px;">
<button type="button" id="addwindow">Add Window</button>
<div class="w" id="opened">BEGIN
<div class="ep"></div>
</div>
<div class="w" id="phone1">PHONE INTERVIEW 1
<div class="ep"></div>
</div>
<div class="w" id="phone2">PHONE INTERVIEW 2
<div class="ep"></div>
</div>
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">REJECTED
<div class="ep"></div>
</div>
<div class="w hidden" id="template_newwindow">
<div class="ep"></div>
</div>
</div>
</body>
</html>
Div is already a jquery object, there is no need to wrap it again.
Option 1
Div.draggable(
{
drag: function(){
jsPlumb.repaintEverything();
}
});
Option 2
jsPlumb.draggable(Div.attr('id'));
I can't seem to stop this spinner no matter what I try.
I have searched around for the way to do it but nothing I have tried works.
Fiddle:
http://jsfiddle.net/gmvT4/5/
Backup code:
var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius: 5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // 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
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
$(document).on('click', '#spin', function () {
var spinner = new Spinner(opts).spin(target);
});
$(document).on('click', '#stop', function () {
$("#foo").data('spinner').stop();
});
<div id="foo"></div>
<button id="spin">Spin!</button>
<button id="stop">Stop!</button>
Thanks for any help! Craig.
Uncaught TypeError: Cannot read property 'stop' of undefined
This error tells you something. You're trying to run .stop() on $("#foo").data('spinner'). Instead, use the instance created by spinner, which you'll need to first declare outside of the scope of that click event.
var spinner;
$(document).on('click','#spin',function(){
spinner = new Spinner(opts).spin(target);
});
$(document).on('click','#stop',function(){
spinner.stop();
});
Updated fiddle c/o René Roth
I'm using spin.js ( http://fgnass.github.com/spin.js/) while a large full width/height image loads. The problem is I'm having trouble stopping the spinner. The stop() method doesn't seem to work. There's what I've got:
$(document).ready(function($) {
var img = new Image();
img.src = $('#top-bg').css('background-image').replace(/url\(|\)/g, '');
img.onload = function(){
$("#top-bg").spinner.stop();
$(".top-bar").delay(1500).fadeIn(5000);
$("#arrow, #arrowrt, #top-icons").delay(5000).fadeIn(5000);
};
});
I also tried
.spin(false)
and
.data('spinner').stop()
This is the spinner settings:
$(document).ready(function($) {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
rotate: 0, // The rotation offset
color: '#fff', // #rgb or #rrggbb
speed: 0.9, // Rounds per second
trail: 54, // 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('top-bg');
var spinner = new Spinner(opts).spin(target);
});
You need to store the spinner instance somewhere - in a way that you can access it when you need it to stop the spinning:
var spinner = new Spinner(opts).spin(target);
$(target).data('spinner', spinner);
And now you're able to stop it like this:
$('#top-bg').data('spinner').stop();
You can stop spinner without instance:
$(target).spin(false);
This seems to work across browsers and uses less code:
$(".spinner").remove();
Remove all DOM of containter, example:
<style type="text/css">.loader{ display: none; }</style>
<div>
<span class="loader"></span>
<span>Foo</span>
</div>
If need apply sping append it in
$('.loader').show().spin();
And destroy:
$('.loader').hide().empty();
Remember, jQuery.empty() automaticaly remove all DOM of object before destroy.