I like the slid.es examples.
Are there some JavaScript based slides, which work on a server so that one user can navigate to new slides and the other users see the change in their browser?
Buttons with built-in loading indicators
31–40 of 64 posts
Re: Buttons with built-in loading indicators
#32Nice. I like the in-place-with-overlay option particularly, though I can still interact with the other buttons while the overlay is in place which I was not expecting.
I dug into that, and what I found blew my mind.
Usually these lightbox/modal overlays use an extra div either loaded with the page or injected on the fly that covers the entire window and is positioned just below the modal on the z-axis (z-index).
His solution was to give the button a really massive box-shadow :O
box-shadow: 0px 0px 0px 3000px rgba(0,0,0,0.8);
---
| | Re: Buttons with built-in loading indicators
#33This is really cool! The only thing that makes it a little ugly for me is that when I click on it, my browser puts an ugly grey box around the text like I'm selecting it. Could this be solved by immediately changing the focus of the input?
That's easily solved with CSS.
You wouldn't want to remove the styling completely, but definitely get rid of the browser default and use a custom focus style that looks better.
Re: Buttons with built-in loading indicators
#34Earlier quoted context omitted.
the unclickability is also an accessibility issue imo. I know which problem it solves, but creates another when the site becomes unresponsive due to connection loss etc.
Genuinely interested: how would it be more usable if the buttons remained clickable after they'd been clicked? If you lost your connection, wouldn't you expect some kind of error? In that case how would it be more usable to be able to click the button again?
if I lose connection and the form is unresponsive I have to f5. often forms have some custom js selectors and after refresh some elements (or even whole formsets) lose their data.
of course an error would be nice, but the main goal is to submit the form I spent the last minutes filling in.
Re: Buttons with built-in loading indicators
#35Earlier quoted context omitted.
These buttons become unclickable once clicked upon. There is no additional loss of accessibility if you remove focus at this point, on the contrary.
the unclickability is also an accessibility issue imo. I know which problem it solves, but creates another when the site becomes unresponsive due to connection loss etc.
This is usually handled by returning the button to its normal state after an error or normal response. With ajax forms you have to catch more errors so if it isn't done it's just because the developer didn't take the time to set it up properly.
Re: Buttons with built-in loading indicators
#36It's worth a note that these buttons are very laggy in MobileSafari, except for zoom-in and zoom-out, which use -webkit-transform and thus have hardware accelerated animation. While slide-* could be changed to use -webkit-transform, I'm somewhat surprised that the performance of the others is so bad, and I wonder if there's some not-completely-awful trick that would improve expand-*.
I actually was impressed by their smoothness on my 4S. What device are you using?
Re: Buttons with built-in loading indicators
#37Earlier quoted context omitted.
Genuinely interested: how would it be more usable if the buttons remained clickable after they'd been clicked? If you lost your connection, wouldn't you expect some kind of error? In that case how would it be more usable to be able to click the button again?
if I lose connection and the form is unresponsive I have to f5. often forms have some custom js selectors and after refresh some elements (or even whole formsets) lose their data. of course an error would be nice, but the main goal is to submit the form I spent the last minutes filling in.
Good point, thanks for the reply.
Re: Buttons with built-in loading indicators
#38It's not known very well, but Bootstrap has similar functionality, albeit not as pretty: http://twitter.github.io/bootstrap/javascript.html#buttons
That's actually the technique I use for buttons in my apps, and I believe I prompted them to add it to Bootstrap. You can see the thread about it here where it was added:
https://github.com/twitter/bootstrap/issues/471#issuecomment...
But my point isn't who-invented-it, it's that it's very easy to implement this in your own buttons without using Bootstrap. I still use my own implementation, despite suggesting it to them. Just create some data attributes (I have data-default-message, data-inflight-message, and data-success-message) and change your buttons appropriately. I have a standard function that I call on my forms that handles that for me, which I've gisted here: https://gist.github.com/pamelafox/5714109 You could do that in a more elegant way than that bit of code. :-)
I prefer the changing-message approach to the showing-the-indicator approach because the verb stays, and you remember what it was that you were doing. Handy for us forgetful folks. You can use both, too, of course.
Re: Buttons with built-in loading indicators
#39We did something similar on one of our office hack days.
https://github.com/ADstruc/waitable
We built a generic jQuery plugin which binds to jQuery promises, taking care of the waiting state and double-submit issues while firing off Ajax requests.
Re: Buttons with built-in loading indicators
#40It's not known very well, but Bootstrap has similar functionality, albeit not as pretty: http://twitter.github.io/bootstrap/javascript.html#buttons
I combined the bootstrap method with some Font-Awesome, and accomplished getting some animation in my buttons in a simple manner.
See "Buttons" section at http://fortawesome.github.io/Font-Awesome/examples/