How to get spin.js behind a modal - javascript

I have a modal which shows some figures and in the background I have some spinning wheels from spin.js, which indicate that some work is done (see figure attached). I want the modal to be on top, while currently the spinning wheels are on top of the modal. I can't find a proper doc for spin.js... does anyone know whether that exists?
Here is my setup of spin.js
var opts = {
lines: 9, // The number of lines to draw
length: 10, // The length of each line
width: 3, // The line thickness
radius: 6, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000000 ', // #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
};
I figured that zindex might be the tool to get this working? Any idea what I would need to do?
thanks
carl

You need to set the zIndex property of the spinner to be lower than that of the modal. For example:
#myModal {
z-index: 100;
}
var opts = {
zIndex: 50,
// other options...
};
For your reference, the spin.js documentation is here: http://fgnass.github.io/spin.js/

Related

How do I make bootstrap button size (width * height) stay the same if value changes?

My goal is to change the button text to a spinner or to a div, but whenever the value changes the size of the button changes as well. How do I make the button fixed?
$(function() {
var opts = {
lines: 9 // The number of lines to draw
,
length: 2 // The length of each line
,
width: 2 // The line thickness
,
radius: 10 // The radius of the inner circle
,
scale: 1 // Scales overall size of the spinner
,
corners: 1 // Corner roundness (0..1)
,
color: '#FFFFFF' // #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
}
$("#apply").on("click", function() {
$("#apply").html(new Spinner(opts).spin().el);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter something">
<span class="input-group-btn">
<button class="btn btn-success" id="apply" type="button">Apply</button>
</span>
</div>
Fiddle link: https://jsfiddle.net/dq9b2xcw/1/
I would wrap the text in an element, and hide it visually using opacity, then either $.append() the spinner code (instead of using $.html()) to the button, or if you're going to toggle the state of the button back and forth so it will go from text to spinner and back, add an element for the spinner and add the spinner to that element instead.
Here's an example.
$(function() {
var opts = {
lines: 9 // The number of lines to draw
,
length: 2 // The length of each line
,
width: 2 // The line thickness
,
radius: 10 // The radius of the inner circle
,
scale: 1 // Scales overall size of the spinner
,
corners: 1 // Corner roundness (0..1)
,
color: '#FFFFFF' // #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
}
$("#apply").on("click", function() {
$("#apply").find('.text').addClass('invisible').end().find('.spinner').append(new Spinner(opts).spin().el);
});
});
.invisible {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter something">
<span class="input-group-btn">
<button class="btn btn-success" id="apply" type="button"><span class="text">Apply</span><span class="spinner"></span></button>
</span>
</div>
The button is collapsing because there is no text content in the button after it is replaced by a spinner. Try adding an invisible character to the button and see if that does the trick in this case:
$("#apply").html(new Spinner(opts).spin().el).append(' ');
That will maintain the height of single-line text If you want to maintain the width too, just store it off before swapping out the HTML.
var buttonWidth = $('#apply').css('width');
// ... swap html
$("#apply").css('width', buttonWidth);
The same could be applied to height as well if you wanted to be consistent.

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
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.
try to use a CSS loader on MathJax_Preview class
CSS snippet
.MathJax_Preview {
display: inline-block;
width: 12px;
height: 12px;
background-image: url(https://anishmprasad.com/images/loader.gif);
background-repeat: no-repeat;
}
math{
display:none
}
demo jsfiddle here
I hope this way solves your problem

Unable to show spinner using spin.js after clicking button

I want to fade out the submit button after the user clicks on it, and I want to replace it with a loading icon. I'm using the spin.js library
This is my button:
<button type="submit" name="inscripcionUsuarioForm" id="botonSubmit" class="btn btn-primary pull-right" onclick="ocultarSubmit();" >Inscribirme ahora</button>
<div id="spinner"></div>
And this is my function inside formularios.js
function ocultarSubmit() {
$('#botonSubmit').fadeOut();
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 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 0.6 // 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: true // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
var spinner = new Spinner(opts).spin();
$("#spinner").append(spinner.el);
}
And I'm calling the file at the very end of the page:
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/js/additional-methods.min.js"></script>
<script src="/js/spin.min.js"></script>
<script src="/js/formularios.js"></script>
The button gets faded out but the spin wheel won't appear. The console won't show any errors. What could I be doing wrong?
Move the opts array, outside of the ocultarSubmit function, avoid inline JS:
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
}
$('body').on('click', '#botonSubmit', function() {
$(this).toggleClass('in');
var target = document.getElementById('spinner')
var spinner = new Spinner(opts).spin(target);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://spin.js.org/spin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="submit" name="inscripcionUsuarioForm" id="botonSubmit" class="fade in btn btn-primary text-center">Inscribirme ahora</button>
<div id="spinner"></div>

JavaScript rotation is wrong after translating

I'm using Velocity.js for animation.
I'm first translating and rotating an object. After the animation is complete I need to rotate the object by an additional 360 degrees.
The problem is that during the second animation the rotation axis is off. Instead of rotating around the center the object rotates around its original point.
$.Velocity( obj, "stop" );
$.Velocity( obj,
{translateX: pos, rotateZ: rotation + 'deg'},
{duration: 1000, complete: function() {
$.Velocity( obj, {rotateZ: "360deg"}, {duration: 1000} ); }
});
What may be the problem?
UPDATE
Codepen that demonstrates the issue: http://codepen.io/anon/pen/MYZaaj
This is because Velocity currently does not parse initial transform values. From the docs:
Note that Velocity's performance optimizations have the byproduct of ignoring outside changes to transform values (including initial values as defined in your stylesheets, but this is remedied via Forcefeeding). (You can manually set transform values within Velocity by using the Hook function.)
This will be addressed in future version but currently follow the advice below to use forcefeeding to fix it.
Sorry, I don't have enough points to comment, but hook (the other answer is right). Just add $.Velocity.hook(circle, "translateY", "0");
var circle = $(".circle");
circle.velocity({
translateX: 500,
rotateZ: 360
}, {
duration: 2500
}).delay(500).velocity({
rotateZ: -360 * 2,
translateY: 200
}, {
duration: 2500
});
$.Velocity.hook(circle, "translateY", "0");
circle.delay(500)
.velocity({
translateY: 0,
rotateZ: -360 * 5
}, {
duration: 2500
});
.circle {
background: url("https://dl.dropboxusercontent.com/u/16997159/square.png");
width: 128px;
height: 128px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<div class="circle">
</div>

Cross-dissolve transition for scrolled elements

I am creating a long single page website and using ScrollMagicJS v1.3.0 to trigger events and to make some elements sticky. I would like to create a variety of other transition effects as one scrolls down the page.
Here's a jsfiddle that replicates the horizontal scrolling of my site.
scrollControl = new ScrollMagic({
vertical: false,
});
var myScrollScene = new ScrollScene({
triggerHook: 0,
offset: 0,
triggerElement: '#shot-0-1',
duration: '100vw',
pushFollowers: true
})
.setPin('#shot-0-1')
.addTo(scrollControl);
For instance, I want to create fade-to-black, flare-to-white, and cross-dissolve transitions between pages.
I understand some of the basic principles of HTML5 transitions, how to make one image dissolve into another, but I haven't been able to figure out a clever way to do it using the ScrollMagic scrolling.
Things I've considered: The next page slides under the current page and then transitions from 1.0 to 0 opacity using ScrollMagic triggers?
But how to do it in a way non-hacky and consistent with ScrollMagic's framework?
This has been asked and answered in the ScrollMagic's issues section:
https://github.com/janpaepke/ScrollMagic/issues/269
here's a copy:
A common misconception is that you need to do everything with the ScrollMagic pin functionality.
If the content isn't moving within the scroll flow anyway (it stays in position and is faded out or moved to side or sth. like that) you can have it as "fixed" right from the beginning.
That saves a lot of work and confusion.
The only reason to use ScrollMagic's pinning functionality is when an element should sometimes scroll naturally with the DOM and sometimes it shouldn't.
So if you have elements that are in place and should just be replaced by others, have them fixed the whole time.
Like this: https://jsfiddle.net/janpaepke/6kyd6ss0/1/
If it is indeed a case were you should use ScrollMagic's pinning method, then do the animation inside of a wrapper, that you pin.
Like this: https://jsfiddle.net/janpaepke/6kyd6ss0/3/
 
Here's the solution I settled on.
scrollControl = new ScrollMagic({
vertical: false,
});
vw = $(window).width();
console.log("width:" + vw + "px");
// pin frame 2
var myScrollScene = new ScrollScene({
triggerHook: 0,
triggerElement: '#shot-2',
// This pin is considerably longer than average
offset: 0,
// duration = stickyLength + disolve_duration
duration: 1.5 * vw + 'px'
})
.setPin('#content-2', {
pushFollowers: false
})
.addTo(scrollControl)
.addIndicators({
zindex: 100,
suffix: 'pin2'
});
// move frame 3 up early and pin it
var myScrollScene = new ScrollScene({
triggerHook: 0,
triggerElement: '#shot-2',
offset: 0,
// duartion = 1.5, but why?
duration: 1.5 * vw + 'px'
// the faux pin doesn't actually expand the container the way SM does
// so the results are a little strange
})
.on("start end", function (e) {
$('#content-3').css({left: 0, position:'fixed'});
})
.on("enter leave", function (e) {
$('#content-3').css({left: 0, position:'relative'});
})
.addTo(scrollControl)
.addIndicators({
zindex: 100,
suffix: 'pin3faux'
});
var dissolve = TweenMax.to('#content-2', 1, {
autoAlpha: 0
});
// dissolve frame 2 to frame 3
var myScrollScene = new ScrollScene({
triggerHook: 0,
// Note that though we are fading frame 2, we are
// using the arrival of frame 3 the trigger
triggerElement: '#shot-2',
// The sets the rapidity of the dissolve
// offset = stickyLength
offset: 0.33 * vw + 'px',
// The sets the rapidity of the dissolve
duration: 1 * vw + 'px'
})
.setTween(dissolve)
.addTo(scrollControl)
.addIndicators({
zindex: 100,
suffix: 'dissolve'
});
I used a pushFollowers: false on a pin and z-index to slide the next frame (also pinned) behind the first. Then a Tween to dissolve into the second frame. The result is a nice cinematic dissolve feature with adjustable duration.
Hope it is useful to others.
https://jsfiddle.net/wmodes/b4gdxeLn/

Categories

Resources