msurguy / ladda-bootstrap Goto Github PK
View Code? Open in Web Editor NEWLadda buttons concept originally by @hakimel, example using Bootstrap 3 by @msurguy
Home Page: http://msurguy.github.io/ladda-bootstrap/
License: MIT License
Ladda buttons concept originally by @hakimel, example using Bootstrap 3 by @msurguy
Home Page: http://msurguy.github.io/ladda-bootstrap/
License: MIT License
Based on the examples, it lookes like the Ladda effect can be achieved simply by including the correct CSS and JS files and then defining a Ladda button in HTML. However, regardless of what I do the Ladda effects never happen unless I programatically perform a Ladda.bind().
Is this the required usage of Ladda or do I have something else going on? I notice on the demo page there is a JS script tag that contains the following:
// Bind normal buttons
Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );
This makes me think that even the normal buttons must have a Ladda.bind(). If this is the required functionality for getting the Ladda effect, then it could be made much more obvious on the demo and github pages...
See initial problem description in #53
The main problem is that btn-default has a white background,
see JSFiddle: https://jsfiddle.net/terales/5v2v0mgL/1/
What could be a solution?
Should we adjust a color of spinner in this case?
I have been having this issue with my project where all of the spinner within bootstrap modal become really small (nearly invisible).
I would like to create ladda-bootstrap
on Meteor JS Package
.
But get error
Uncaught ReferenceError: Ladda is not defined
@msurguy I think it would be easier to get info about the project and demo if you:
Hello - I have started using the ladda-button, but without embedding in a form. Is there a way to overcome the problem with the button being disabled when navigating back to the page.
Thanks for your help.
PS. I posted this originally on a closed problem (#2) - sorry about that!
When creating a Ladda via the query selector:
var l = Ladda.create( document.querySelector( '#my-submit-btn' ) );
The spinner is tiny and barely visible. Most likely because it is not able to determine the height of the button.
When creating the Ladda using "var l = Ladda.create(this);" it works fine
Selectpicker (developer.snapappointments.com/bootstrap-select) selection are not visible if i use Ladda.js
in the amd loader ladda.min doesnt point to spin.min.
and it always tries to load from the root instead of relative.
for me I needed to modify what is in ladda.js line 5:
define([ "vendor/ladda-bootstrap/spin.min" ], factory);
perhaps the docs should me amended too. From the documentation I had initially assumed I needed something like this in my define:
'vendor/ladda-bootstrap/spin.min',
'vendor/ladda-bootstrap/ladda.min'
but If I do this it fails because ladda.min cant load 'spin' from the root folder.
I'm a bit new to bower. But when I try to specify the 0.8.0 dependency I get an error saying there is no tag. If I use 'master' as the version bower will install. Should there not be a git tab for the bower version?
I'm pretty new to Bootstrap as well as Bower. When I tried to run
$ bower install ladda-bootstrap
inside of my existing setup of https://github.com/BoilerplateMVC/Backbone-Require-Boilerplate
then it tried to grab the vanilla bootstrap because Backbone-Require-Boilerplate != backbone in bower.json :
"dependencies": {
"bootstrap": ">=3.0.0",
Perhaps this should be resolved in the package.json file within Backbone-Require-Boilerplate but I am not familiar enough with it to determine this.
down vote
favorite
I want to use Ladda with Bootstrap and when click on my submit button the button is expanding to the left, but the spinner is not showing.
I am using Laravel.
I have included the css file in my head:
{!! Html::style('css/plugins/ladda-themeless.min.css') !!}
And I also included both js files at the end of the page.
{!! Html::script('js/plugins/spin.js') !!}
{!! Html::script('js/plugins/ladda.js') !!}
After that I bind the input submit
<script>
Ladda.bind( 'input[type=submit]' );
</script>
This is my submit button:
{!! Form::submit('Register', ['class' => 'btn btn-primary ladda-button', 'data-style' => 'expand-left']) !!}
As I said at the top. It seems to be working. When I click my submit button the button expands to the left side and I disabled, but the Spinner is missing.
Can you help me?
There's a reference to Bootstrap CSS over HTTP, which breaks when visiting the page at https://msurguy.github.io/ladda-bootstrap/ in Chrome/Blink-based browsers. Blink blocks mixed content completely.
Hi thanks for the cool plugin!
When trying to show the 'loader' on a button inside a modal the loader is very tiny.
See example:
Thanks! :)
(guessing this also has to do with the version thats not up to date with Ladda as in issue #15)
Sorry that I found that the version field in package.json is v0.8.0, but there is no v0.8.0 release and tag, is that correct? thanks.
This is a very clever UI design -- well done!
I noticed the ladda-button stays disabled indefinitely once clicked. So if you submit a form by clicking a ladda-button, and then navigate back to the page with the form, the button is still disabled. It seems the only way to enable the button is to refresh the page.
Uncaught TypeError: a.querySelector is not a function
Today default way of managing web front-end dependencies is through package managers.
This project is very tightly connected to the Bootstrap and maybe Ladda, so it might be a good idea to have this dependencies in a manageable way.
Pros:
yarn
over npm
?Bootstrap 4 is coming to the release so eventually we would end up supporting two versions.
To make our life easier we should use yarn, as it have this functionality out of box:
mui/material-ui#7195 (comment)
@msurguy could I proceed to implementation of this idea or you have any concerns about it?
can you add this plugin to http://bower.io/ ?
I'm trying to use Ladda and when I trigger it, I get the error:
Uncaught TypeError: Object [object Object] has no method 'querySelector' ladda.min.js:8
Using the latest from dist
I updated to Bootstrap 3.3 using Nuget in visual studio. This caused the spinner to be offset incorrectly.
To fix it I removed the margin-top and margin-left attributes in the CSS for "slide-right".
Hi,
I've see that the span.ladda-spinner is created every time the button is pressed. So if you click more than once, you have lot of unused elements.
tested on chrome 38.0.2125.104 m
thanks
Just wanted to know if the original developer is still around as I'd like to use this library in my project but it is severely outdated.
Would like to see some love given to this project.
Cheers
Please update your package at nuget.org
https://www.nuget.org/packages/ladda-bootstrap/
Thank you!
are you merging ladda from original repo?
just reporting a possible issue.
if you take a look at the demo for the progress bar buttons,
you'll see the button element looks like this:
<button class="btn btn-danger ladda-button" data-style="expand-right">
<span class="ladda-label">expand-right</span>
<span class="ladda-spinner"></span>
<span class="ladda-spinner"></span>
</button>
if I manually remove one of the ladda-spinner elements it still seems to work fine.
is the extra element intended?
Please add a prefix to your SCSS variables.
Like $spinnerSize .. should be like;
$ladda-spinnerSize: 32px !default;
or even better $ladda-spinner-size (more like Bootstrap itself)
Also applicable for the theme file (colors etc).
Besides that; use Bootstrap variables too, with !default, like
$ladda-color-blue: $brand-primary !default;
And maybe even better to use bootstrap colors and names instead of something from yourself ;-)
After all; it's really a great addon for Bootstrap.
I use it for modal submit buttons which is working great!
Great git!!!! What would I need to get this to work with bootstrap 2.3.2?
Thanks in advance.
Hello,
I like you to write a tool (Ladda),
But I met a doubt in use,
I found that when using Ajax to submit the form, in the request after the start, I button animation is not working, at the end of a request, this button animation to begin the work, but I'm asking before it has been *.start, so I want to know why he didn't work.
There one issue with die IE8
SCRIPT87: Invalid argument.
ladda.min.js, line 8 character 1431
Hello !
On expand-left / expand-right buttons, the outline is not completly fabulous, as you can see on joined capture.
We don't have the issue with slide-left / slide-right because of the following code
.ladda-button[data-style="slide-left"] {
overflow: hidden;
}
Is there any good reason not to write this removing [data-style=...] ? I tried it on demo page and it seems to work fine.
.ladda-button {
overflow: hidden;
}
TypeError: Spinner is not a constructor
Using latest from dist, exact copy of ajax form example from http://msurguy.github.io/ladda-bootstrap/
Just tested how current version of the original Ladda works with Bootstrap and found that it works really well:
https://jsfiddle.net/terales/p3efcqw7/
@msurguy what do you think about adding deprecation messages, close issues and navigating people to the original Ladda?
Hey there - all of a sudden the ladda buttons in my projects began disappearing once clicked.
I though I was going crazy, or there was something in particular I was doing to cause the issue - but then I visited the demo site for this project and the same issue is happening there: http://msurguy.github.io/ladda-bootstrap/
This issue does not seem to exist on the original ladda button project demo site: http://lab.hakim.se/ladda/
Any clue as to what is causing this - or how to fix it? Thanks.
I'm using bootstrap 3.2. Facing an issue for a specific button in my page. It always showing very small spinner. It looks like a dot (.). But animation is working perfectly.
And I have used ladda-bootstrap button one more place in my web page but there it is working fine.
<button class="btn btn-lg btn-primary ladda-button start-shopping" data-style="zoom-out" data-size="l">Start Shopping</button>
This is how I start and stop
startShopping = Ladda.create($(".start-shopping")[0]);
startShopping.start();
startShopping.stop(); //This line is after exicution
Initially I have applied some custom styles to that button but later I removed and tried but faced the same issue.
I'm using a ladda button in a bootstrap panel header to refresh data in an enclosed table. Clicking on the panel header will open/collapse the panel, but I don't want that to happen if the user clicks the ladda button.
http://jsfiddle.net/mmuelle4/x6c506s6/
Catching the click event and stopping the propagation of the event works if the button is in its normal state, but if the ladda button is loading, the click event is no longer captured.
I understand the reason for the functionality -- the button click event handler isn't called because the button is loading. But - is there an event that can be registered for ALL button clicks (including while loading)?
I believe that spin.js is creating a dom object with inline style attributes. Is it possible to do this some other way? I would like to avoid all inline style attributes on my site, but it appears that ladda wont allow me to do that.
I have a comment form that is implemented as a ladda button but that button is hidden initially. Once the user focuses on the input field then I display the button. The user will then enter a comment, click the button and the spinner does not show up. I just get a button that looks like the animation is working except that the spinner does not show up.
I assume the reason is because the button is hidden initially since all the other implementations of the button work fine when it's visible initially.
Do you have any suggestions on how to fix this? I would assume, if I can get the width and height of the button before its hidden then the spinner knows what size it should be and then the spinner would display but I don't want to mess with the core files.
Please let me know what I can do.
Thanks.
The following html doesn't show a spinner when using the 'zoom-in' effect. When I delete all the bootstrap btn*
classes the spinner shows on a non styled button. The spinner shows with the expand-left
effect. I have not tested other effects.
<div class="btn-group btn-group-justified" id="rsvp-buttons">
<div class="btn-group">
<button id="iCome" class="btn btn-primary ladda-button btn-lg" data-style="zoom-in" data-guest="{{ $guest->id }}" data-coming="{{ $guest->coming }}">
<span class="ladda-label">Ik kom! :)</span>
</button>
</div>
<div class="btn-group">
<button id="iDontCome" class="ladda-button btn btn-info btn-lg" data-style="zoom-in" data-guest="{{ $guest->id }}" data-coming="{{ $guest->coming }}">
<span class="ladda-label">Ik kan helaas niet :(</span>
</button>
</div>
</div>
Need a new release that contains the common js support. Also the ladda.js in the dist directory for commonjs part of the UMD does not include the require for spin.js. AMD one does though.
Before I ask my first question - I'm confused: is this a separate library from hakim's and are they both being separately maintained? What is the difference between the two? I noticed I couldn't submit an issue to hakim's ladda github (leads me to believe it's no longer maintained?)
Onto the question.
I have a table which is enclosed in a bootstrap accordion. The accordion starts off unopened, but there is a ladda button enclosed in the table (which is in the accordion) which is therefore hidden/not visible. When I instantiate the Ladda button, open the accordion, and then press the button, the button operated, but the loading spinner is no longer a spinner, it is just a dot.
JSFiddle here: http://jsfiddle.net/mmuelle4/tpkjwa1y/
Could you make release 0.2.0 for update Ladda 0.9.4?
I'm getting bower errors when trying to install ladda-bootstrap. The only version that bower can see is 0.1.0, it can't see 0.8.0. I've tried both "bower install ladda-bootstrap" and "bower install https://github.com/msurguy/ladda-bootstrap" and it can still only see 0.1.0 despite the fact that your bower.json looks correct. Is this a bower issue or do you need to add a 0.8.0 tag for bower to see it?
I have a login form with block submit button (using BS3).
If the form has validation errors, the spinner "shifts".
Is there any way to prevent this?
Ladda has a jQuery-supported version. Would be nice to include that as well. I will likely have some time over the next week to create a PR for this if welcome.
I need to use:
Ladda.create( $(this) );
instead of this:
Ladda.create( document.querySelector( '.my-button' ) );
In order to display the spinner at center you must set '50%' to the 'top' and 'left' properties.
return new Spinner({
color: spinnerColor || "#fff",
lines: lines,
radius: radius,
length: length,
width: width,
zIndex: "auto",
top: "50%",
left: "50%",
className: ""
});
By default the value is in 'auto' and the spinner is showing bad
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.