We Keep Coding

Can I somehow remove the animation from buttons generated by addthis.com?

I'm using addthis.com to generate social media share buttons, however, their buttons come with an animation on hover which I really don't like and would like to remove it if possible.
You can see the issue live here - http://onyx.space/image/4
The problem is that the only code I've been given is this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b50a10e742393c0"></script>
And the code for the buttons:
<div class="addthis_inline_share_toolbox"></div>
There is some customization on their website, however, there's nothing about animations. I've googled this issue and found nothing about it.
I wonder whether the animation comes from the JavaScript and how would I go about finding it and removing it.

you can override that animation with more specific selector. for example add below css code in your css file
div .at-resp-share-element .at-share-btn:focus,
div .at-resp-share-element .at-share-btn:hover {
transform: none;
}

Bootstrap .form-control and RecurlyJS iframe

Thank you for your kind reading my question. I have trouble in aligning layout of Recurly subscription form.
In the screenshot, the first 4 items are using .form-control which has inside it. These s are loaded by Recurly JS code after page is loaded.
I tried to make sure height: 32px for those element as well, but I could not figure out why the height of gaps differ than the below ones. I want them to be same as the below ones.
http://paulz.dev.biznessapps.com/global/signup_subscribe?plan=mobileapp59
I used Recurly JS v4.
https://js.recurly.com/v4/recurly.js
Thank you!
Paul

you can customise styling on input fields as in here.
https://dev.recurly.com/docs/getting-started-1#section-styling-card-fields

Please try this code
iframe {
height: 26px!important;
}

Displaying dialog box (via alert or sweetalert) scrolls to top of page

I have a long table (ex: 1000 rows). Each row has a button on it, that, if pressed, displays a sweetalert dialog via jQuery. (http://t4t5.github.io/sweetalert/)
PROBLEM: If I scroll down, let's say to 50% of the table, when I click the button the dialog does appear correctly, BUT, the table has scrolled all the way to the top of the page. I'm pretty sure this has to do with the css position of how sweetalert is displayed. I tried changing it from fixed to absolute, but it doesn't work.
.sweet-overlay, .sweet-alert{
position: absolute !important;
}
Using javascript "alert", instead of sweetalert, has the same effect. If I add "e.preventDefault();" then it works for alert, but not sweetalert.
Any ideas? Thanks!

I've fixed it.
There's a CSS issue that MAY affect some users. Sweet Alert 1 and 2 both write a javascript when a modal opens, that adds a class to your
overflow-y: scroll;
It may work for some users to simply remove this CSS, strangely, it didn't for me.
So comment out line 699 in sweet-alert.js
// addClass(document.body, swalClasses.shown); // BREAKS THEME
Update:
You CAN just add some css:
body.swal2-shown { overflow-y: none !important; }
However, I get a strange bar. But I'm doing some strange theme stuff. This is the less of two evils. :)

The original sweet alert plugin is unsupported, I suggest you using SweetAlert2 plugin, which doesn't have the issue you mentioned.
Migration is simple, here's the migration guide: Migration from SweetAlert to SweetAlert2
Here's the example of your case (100 rows) implemented with SweetAlert2:
swal({
html: '<table>' + '<tr><td>row</td></tr>'.repeat(100) + '</table>'
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7"></script>

Looking through the JS i can see that the legacy version of sweet alert plugin adds a style called stop-scrolling to document body on call. This seems to be what effects the position on the page.
As a quick fix on a site i was working on, commenting out the height and overflow on this style (in sweetalert.css) stopped the page jumping.
Obviously not a final solution, just a fix.
Hope this helps.

Is there any way to change the CSS of the Facebook Like Box?

So I'm trying, through whatever way possible, to modify the Facebook Like Box's CSS. I've found the offending value and I want to change it. This is inside of an iframe.
The CSS is this:
.pluginLikeboxStream {
overflow-x: hidden;
overflow-y: auto;
}
This is causing there to always be a scrollbar on the Like Box stream, which I really, really don't want.
I'm not seeing anyway to modify this - not the Javascript SDK (which is my best hope, I think), not through using Javascript or jQuery on it (as it creates an iframe, this is impossible, as far as I can tell - even though Firebug lets me change this).
Obviously the best solution would be to be able to set a style using CSS, but that also seems impossible.
Is there any way to fix this?
I've tried to load the iframe with no scrollbars, but that's just on the outside of the iframe - this is obviously internal.
All I want is for this class to be set to overflow: hidden;

It is not possible to change the CSS of the official Facebook Like Box because it is an external iframe.
Read more in this duplicate.

Since the content you want to change via CSS is in an iframe, you can inject a style into the iframe. But as Vector said, know what you are getting yourself into.

You can create your own "Like" button - without like count (but you can fix this) and then use JS API to "like" URL's

If you set !important then it will over rule any other CSS applied to the element
.pluginLikeboxStream {
overflow: hidden !important;
}
!important should only be used in circumstances like this.
EDITED
To apply it to the iFrame you need to use jQuery
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .pluginLikeboxStream {overflow: hidden !important;} /style>"));
});
This is how i've always done it.

Twitter Bootstrap / Twipsy

I like the idea of the Twipsy plugin that is bundled as part of Twitter Boostrap, but it doesn't seem to work correctly.
Here's a jsfiddle: http://jsfiddle.net/burlesona/DUPyR/
As you can see, using the default settings as prescribed by the docs, the tooltip appears when you hover over the tool-tipped anchor, but it doesn't go away when you move the mouse away.
I understand that the appearance of the tooltip relies on CSS, but on the Twitter docs page the tooltips are being added and removed from the DOM by the script, whereas in this example and in my own local tests the script adds the tip but never removes it.
Here's a link to the script: http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js
Any ideas / suggestions? I'm pretty confused as to why this is behaving as it is.
Alternatively if anyone has a better suggestion for a clean, lightweight jQuery tooltip plugin, please let me know.
Thanks!

As you have noted, your code is not working because you have not added the CSS file to your resources.
Working example: http://jsfiddle.net/DUPyR/1/
Because in that CSS file there are two classes called
.fade {
-moz-transition: opacity 0.15s linear 0s;
opacity: 0;
}
.fade.in {
opacity: 1;
}
When you move mouse in, the Tool-tip gets prepended to body and it gets class="twipsy fade in" The in gets removed on the hide function of the tool-tip making it invisible (opacity=0).
Working example with minimal CSS: http://jsfiddle.net/DUPyR/3/
Please note that its not removing the element from DOM as in the original example. More investigation of the CSS will surely shed some light there.
If you ask me my favorite tool-tip plugin, I use Jörn Zaefferer's lightweight tooltip plugin (4kb compressed). It suits my purpose well.
Link here: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

I am not sure why twipsy is not working, but tipsy works: http://jsfiddle.net/X6H2Y/
Tipsy is the original jQuery plugin which was modified by Twitter for these:
(Twipsy is) Based on the excellent jQuery.tipsy plugin written by Jason Frame;
twipsy is an updated version, which doesn't rely on images, uses css3
for animations, and data-attributes for title storage!

Or you can use "tooltip" like this:
<div rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" data-original-title="hi">I'm here</div>
<script type='text/javascript'> $(window).load(function(){ $('div[rel=tooltip]').tooltip(); });</script>
rel: http://twitter.github.com/bootstrap/javascript.html#tooltips

Yeah, it seems to be removed as a separate plugin now (2.3.1 at the time of writing) but there is a ToolTip plugin that comes with the main bootstrap.js file so that should do you.