Addthis button size class stopped working - addthis

We have a sharing toolbox that defaults to 32x32 px but we also use the same toolbox code to display at 20x20 px in other parts of our site. The code below (including Drupal tokens) worked fine for a few months but last month it started showing the icons at 32x32 even though it has the class addthis_20x20_style. It also changed the behavior on another system outside Drupal that uses the same toolbox code.
<div addthis:title="[node:title]" addthis:url="[node:url]"
class="addthis_sharing_toolbox addthis_default_style addthis_20x20_style">
</div>
I tried changing addthis_sharing_toolbox to addthis_toolbox per the support page at http://www.addthis.com/academy/customizing-the-addthis-toolbox/, but then the buttons do not display at all. The AddThis support pages are incredibly disorganized and outdated and they seem to have abandoned their user forum. I don't even know where else to ask.

Here's a reply I received from AddThis support. Hopefully this will be of use to others:
JAN 07, 2016 | 03:26PM EST
Hi,
We recently made a change to our code that affected some of our older
buttons.
You will need to use our advanced configuration code in the locations
that you would like our buttons to appear in 20x20.
Replace the current code in these locations with the following:
<div class="addthis_toolbox addthis_default_style addthis_20x20_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
Additional advanced configuration code information can be found here:
http://www.addthis.com/academy/customizing-the-addthis-toolbox/
Please let me know if you need any additional help
Thanks,
Mike

I am having the same problem. It looks like they have removed support for 20x20 sized buttons, as it is no longer listed on the academy support page you provided. It is a shame because it is the only size that has a constant height for facebook, facebook_like, tweet, etc buttons.
The below css styles, while feeling a little hacky, go some distance in repairing the broken functionality:
.addthis_20x20_style .at-icon-wrapper,
.addthis_20x20_style .at-icon {
height:20px !important;
width:20px !important;
}
That didn't fix the size of the google_plusone button. I happen to be using drupal as well - the addthis module - and the below 'customize services' settings worked pretty well.
That's:
Service code: google_plusone
HTML classes: addthis_button_google_plusone
HTML attributes: g:plusone:size="medium"
(Re the addthis service, the phrase "you had one job!" comes to mind...)

Related

How do I make disable-for-touch work in Zurb Foundation?

I'm working on a site that another designer built: http://bigbolts.qa.aztekhq.com/. The products in the New Products and Recently Viewed areas on that page have two buttons with tooltips on them, and when they are clicked, they are supposed to trigger other link events: "More Information" goes to the detail page, "Add To Cart" triggers a modal. This works fine on desktops, but not on touch devices. On my iPhone and iPad, touching the links only triggers the tooltips and nothing else. I added data-options="disabled-for-touch:true" to the links, but it does not seem to be working.
foundation makes it easy to disable or enable on touch-enabled devices, just add class= "show-for-touch" or "hide-for-touch" to the element you want to disable. code example below.
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>
Ahem... according to the tooltips documentation, it is better to add data-options="disable_for_touch:true" to your link. Like this:
<span data-tooltip data-options="disable_for_touch:true" class="has-tip" title="Tooltips are awesome!">
Your Cart
</span>

Tumblr Photo Caption within Container

I have a blog theme which does not include captions in photo posts. I have been successful with plugging in {block:Caption} {Caption} {/block:Caption} before {/block:Photo}, but the caption seems to be floating on the background and not inside the post box as seen below:
How do I include the caption to be apart of the same box as the date?
Any help is appreciated!
It would be much easier if you posted the relevant code here. I don't know what theme you are using but if you take a look at this site http://www.tumblr.com/docs/en/custom_themes you'll see that dates are rendered by {block:Date} {/block:Date}, {Timestamp}, {DayOfYear} etc. Take a look and see which one suits you theme. When you have found it, simply Ctrl + F in you code and find where in your HTML code the date box is rendered and then put the {block:Caption} {Caption} {/block:Caption} inside.

Trying to right justify "Like Us On Facebook Code" in Header

So I am trying to add the following "Like Us On Facebook" code in the header of my website and have it be right justified, while the Title & Description remain left justified. Here is the FB code:
<div class="fb-like-box" data-href="http://www.facebook.com/HowToForiPad" data-width="292" data-show-faces="false" data-stream="false" data-header="false"></div>
I'm not the most knowledgeable about this type of thing so I'd prefer not to mess with the CSS and have been just trying to drop the code above into the appropriate place in my header.php file. The tricky part (for me) is making the Facebook Like right aligned while the site title and description remain left aligned.
Here is an example of what I want it to look like (ignore the underscores...had to do it to make it look right)
WELCOME TO WHATEVER SITE
The site does blah blah________________________________________Like us on facebook
Here is the relevant code from the header.php:
<!-- HEADER -->
<div id="header">
<div class="website-name"><?php bloginfo('name'); ?></div>
<div class="slogan"><?php bloginfo('description'); ?></div>
</div>
<!-- /HEADER -->
So basically I'd like the Facebook code to be in line with the site description but right justified (whereas the site description is left justified).
Greatly appreciate any help!
Using CSS is pretty much your only option.
You can change the slogan div to a span (or set a width on the div), add the fb like box below this span and float it right. That should do what you need.
If you REALLY don't want to touch your CSS file, you can add the styles inline, but I don't recommend this as it is not best practice.

Phonegap w/ JQM results in slow UI responsiveness

I am using an iPhone 3GS for development and my app consists of 5 pages (data-role="page") 2 of them are dialogues (data-rel="dialogue") and the rest are links on my footer's navbar.
What I am experiencing is very slow transitions when a link is tapped.
Javascript itself is running smoothly, performing it's operations as it should without delay (alerts are instant when bound on "touchsrart" event). The actual links though are incredibly slow.
Anyone experiencing similar problems and/or has found a way to tackle them?
Thanks in advance :)
EDIT: forgot to mention -> sometimes a link gets 'stuck' before getting resolved which results in 2 'active' links (which UI-wise is aweful) and you actually need to re-tap it to make it work.
EDIT 2: posting footer bar whos links are particularly slow:
<div class = "footer-wrapper">
<div data-role="footer" class="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><span>Option 1</span></li>
<li><span>Option 2</span></li>
<li><span>Information</span></li>
</ul>
</div>
</div>
</div>
Second option's button is the active one as I grabbed the code from page #2.

html5 element repeating itself bug

I've been playing with html5 and I've noticed that sometimes the page displays my html differently in the dom (viewed through firebug) than it actually appears in my html files. The result is an element being replicated several times in different ways. I only notice this on nested elements.
For example:
<a href="#" class="block top-middle">
<h5 class="title-top">TITLE</h5>
<img src=""path/to/img.png" alt="TITLE" />
</a><!-- .top-middle -->
Is occasionally displaying as:
<a class="block top-middle" href="#"> </a>
<h5 class="title top">
<a class="block top-middle" _moz-rs-heading="" href="#">TITLE/a>
</h5>
<a class="block top-middle" href="#">
<img alt="TITLE" src="path/to/img.png">
</a>
I'm not really sure what the solution is but I wanted to know if anyone else has experienced glitches like this. I've sifted through every bit of my code and I can't find anything broken and the pages it happens on validate without any problems. It's especially frustrating because it only happens once in a while.
thanks!
**edit also, I know using anchor tags like this is not valid but as far as I have been able to tell with what I've read about html5 it is valid wrap content inside an anchor*
The browser/rendering engine was made before HTML 5 existed, so it is obeying the rule that anchors which are inline elements cannot contain h5s, which are block level.
This makes perfect sense. I don't think you can really do anything other than wait and see if the rendering engine adopts the HTML 5 rule that allows anchors to nest block levels such as h5s.
EDIT: I assume you are using the HTML 5 Doctype, although it probably won't have much bearing.
EDIT #2: This has been filed as a bug, even though I personally think it shouldn't be. A way around this seems to be wrapping the h5 in a div.