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
Related
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.
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>
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/
I am trying to make a zoom-like effect on hover event in a gallery exercise. What I need is for an image to seem to expand from its center, not down and right. If I understood correctly, I need to move it half way left and up for this to work. Also, I'm using em, so I try to convert em to pixels here.
Relevant html:
<div id="gallery">
<img src="img/cool1.gif">
<img src="img/cool2.gif" id="gal2">
<img src="img/cool3.gif" id="gal3">
</div>
CSS:
#gallery {
width: 31em;
margin-left: auto;
margin-right: auto;
}
#gallery img {
width: 10em;
height: auto;
position: absolute;
}
#gal2 {
margin-left: 10em;
}
#gal3 {
margin-left: 20em;
}
Finally, jQuery:
var fontSize = $("#gallery img").css("font-size");//equal to 1em?
var fontInt = parseInt(fontSize);
var t = $("#gallery img").position().top;
var tNew = t - (5 * fontInt);//top position
var l = $("#gallery img").position().left;
var lNew = l - (5 * fontInt);//left position
$("#gallery img").hover(
function() {
$(this).stop().css("zIndex", "1").animate({
height : "20em",
width : "20em",
top : tNew,
left : lNew
}, 400);
}, //end mouseover
function() {
$(this).stop().animate({
height : "10em",
width : "10em",
top : t,
left : l,
zIndex : "0"
}, 400);
} //end mouseout
);//end hover
edit 1 Images expand and change position, but not as expected. Also, they don't return on mouseout. Thanks to Racil Hilan for solving em-px conversion problem!
edit 2 Problem moslty solved by fixing variable scope – position values moved before hover() function. The only remaining bug is that the pictures escape to the top right corner of the body before returning to their place on first interaction. Afterwards, it runs as expected. Also, could somebody explain why this works when the fontInt variable is multiplied by five, not by 10?
edit 3 – solution As Mauricio Santamaria said below, just add the css() function setting top and left parameters before hover on #gallery img element like so:
$("#gallery img").css({"top" : t, "left" : l}).hover(...);
The rest stays the same.
I improvised a fiddle for this, too: http://jsfiddle.net/dzenesiz/wudw5hmu/15/
The problem is that the $(this).css("font-size"); returns the size with the unit (e.g. 16px) which is not a number and the calculation results in a NaN.
A quick solution is to parse it to an integer like this:
var fontSize = parseInt($(this).css("font-size")); //equal to 1em?
to remove the "jump" when first interaction you should set "top" and "left" on your css, this removes that behavior (tested on your fiddle with 8px or 0.4em equivalent to your initial image size), and for your question about why 5 gets your desired result its that the result of that operation (5 * fontInt) gives you the initial value of images ie. 100px (10em), and that's the amount for top and left that you need to make it zoom from center. (the initial value for fontSize is 20em, initial t =8, so 8-100 = -92, the right value taking in account the margin )
I'm using this cropping tool https://github.com/fengyuanchen/cropper/. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.
here is my code:
<div id="imgWrap" style="max-height:400px;min-height:400px">
<img id="img" src="" /> // Image gets added dynamically
</div>
the javascript
var reader = new FileReader();
reader.onloadend = function () {
var img = $('#imgWrap img');
img.attr('src', reader.result);
img.cropper({
aspectRatio: 1 / 1,
autoCropArea: 0.65,
guides: false,
strict: true,
highlight: false,
responsive:true,
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom:true,
rotatable: false,
minCropBoxWidth:105,
minCropBoxHeight:105,
built: function () {
// cropper-container is the element where the image is placed
$('.cropper-container').cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
}
);
},
})
I tried to this: https://github.com/fengyuanchen/cropper#setcanvasdatadata but nothing happens
You can see an example here:
The natural size of the image is 1920x1200
This is what is generated after the image is added:
So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?
I had the exact same issue. In the Cropper doc it says to set the img max-width = 100%. I did this and it fixed the issue
https://github.com/fengyuanchen/cropper
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
Setting background property of cropper object to false fixes this problem.
You can set option:
aspectRatio: 1 / 1, // select area ratio 16:9, 4:3, 1:1, 2:3, free
viewMode: 3, // sketch image to fit the container
In case someone else gets a similar problem, I fixed mine by encasing the <img> its in own div. Cropper (at least in 2.0.1) defines the container with
$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));
and $container is created with this.$container = $this.parent(); so if you have padding, some other lines of code, etc it calculates its size along with those lines. Given the age of this though, I doubt OP can validate if that was his problem or not.
I had a same problem and solution was easy.
Everything what you need is setup your css height, width to your cropper selector instead of cropper but after init cropper. This is normal jQuery object and you call cropper init on him later. As latest thing you'll setup new visual variables.
var $area = $('div.crop-area-image'); // jquery object
$area.cropper(options); // init cropper
$area.css({height: '300px'}); // setup css
voala .. thats all!
Unfortunatelly
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
is not enough. This only fixes top and bottom empty space issue.
I had to add display: inline-block; to my container to clamp canvas and image boxes: https://jsfiddle.net/h9ktgxak/
Use fillColor option in the getCroppedCanvas method
Also, make sure to use full color name ('#ffffff') not ('#fff')
getCroppedCanvas({fillColor:'#ffffff'}).toBlob((blob) => {});
You call setCanvasData method on wrong element.
You should call it on the image:
...
img.cropper({
...
built: function () {
img.cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
});
}
});
...