Develop Reference

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

How to get spin.js behind a modal

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/

fade 4 Alphabets of a Word and Retain one alphabet "H"

I am not able to fade the 4 alphabets "ello" from the word "Hello" when the word is zooming out.
What i need is, when i reach step number 6 and 7 from my below code, the texts "e" "l" "l" "o" should fade out, but only the alphabet "H" should go towards the left top corder
// 6. zooms out to 200% heading towards left top corner,
// 7. Fades out when reaching the logo
Js:
// 3. Page load completes - the text "hello",
// has come to center with zoom 800%
$("#hello").animate({
zoom: "800%",
left: window.innerWidth / 2
}, 3000, function() {
// 4. Pause for 3 seconds
$(this).delay(3000)
// 6. zooms out to 200% heading towards left top corner,
// (logo position)
// 7. Fades out when reaching the logo 8. Logo appears
.animate({
zoom: "200%",
left:0
}, 3000, function() {
$(this).fadeOut()
})
})
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello">
<h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>

Check the fiddle link: http://jsfiddle.net/cgLLhyyu/1/
<div id="hello">
<h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">h<span>ello</span> </h1>
</div>
What you need to do is wrap the elements that need to be fade out inside a span. Rest of the code is good
$("#hello").animate({
zoom: "800%",
left: window.innerWidth / 2
}, 3000, function() {
// 4. Pause for 3 seconds
$(this).delay(3000)
// 6. zooms out to 200% heading towards left top corner,
// (logo position)
// 7. Fades out when reaching the logo 8. Logo appears
.animate({
zoom: "200%",
left:0
}, 3000, function() {
$(this).find('span').fadeOut(); //<--- change here
})
})

This should work:
$("#hello").animate({
zoom: "800%",
left: window.innerWidth / 2
}, 3000, function() {
$(this).find('span').fadeOut()
// 4. Pause for 3 seconds
$(this).delay(3000)
// 6. zooms out to 200% heading towards left top corner,
// (logo position)
// 7. Fades out when reaching the logo 8. Logo appears
.animate({
zoom: "200%",
left:0
}, 3000, function() {
$(this).fadeOut();
})
})
});
JsFiddle

titanium animation doesn't retain its values

When I'm animating on Titanium a view, it doesn't retain its values. Let say for example I have a view named bar with height=0. I would like to animate so I made this code..
aniBar1 = Ti.UI.createAnimation({
curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 250,
height : 50,
top : 0
});
bar.animate(aniBar1);
This do the trick but when I do the second animation after some events, lets say
aniBar2 = Ti.UI.createAnimation({
curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 250,
height : 150,
top : 0
});
I want it to animate from the height 50 to 150 but it doesn't do that. When I execute second animation. It shrink down to 0 do the animation.
Is there a way to retain the values when animating? I tried to set the new values on callback but I can do callbacks.
Your help will be appreciated. Thanks in advance!

you need to set new value in its complete event...
aniBar1 = Ti.UI.createAnimation({
curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 250,
height : 50,
top : 0
});
aniBar1.addEventListener('complete',function(e){
bar.height = 50;
});
bar.animate(aniBar1);