I have added addthis to a Joomla site. By default it loaded like this:
<div class="addthis_sharing_toolbox"></div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
And it looks like this:
I have enabled JCH (to improve speed), but addthis is not working. I have to keep JCH. I manage to make it work, using following code:
<div class="addthis_sharing_toolbox addthis_default_style addthis_64x64_style" data-title="title">
<a class="addthis_button_facebook at-icon-wrapper at-share-btn at-svc-facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_google_plusone" style="cursor:pointer"></a>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
As you see I have added the tags with the icons, in that way they load, but the styling is totally different, how can I keep same design?
The answer is here: https://www.addthis.com/academy/customizing-the-addthis-toolbox/.
In my div I had the class "addthis_sharing_toolbox" but I had to use "addthis_sharing_toolbox"
<div class="addthis_toolbox addthis_default_style addthis_64x64_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
</div>
Related
I have a problem with CKEditor 4 adding additional HTML tags. I've been using v3 for a few years without any problems, and I've built my own plug-ins, so I'm not a complete novice but this has me stumped. For instance the following block of HTML:
<section class="component2">
<div class="">
<div class="component2__row">
<a class="component2__item component2__item--primary" href="#">
<img class="component2__item__image" src="http://MyServer/webmedia/Images/Components/component2/image-1.jpg" alt="IMG"/>
<h4 class="component2__item__title">Light Vehicle</h4>
</a>
</div>
</div>
</section>
Gets saved as:
<section class="component2">
<div>
<div class="component2__row">
<a class="component2__item component2__item--primary" href="#">
<img alt="IMG" class="component2__item__image" src="http://MyServer/webmedia/Images/Components/component2/image-1.jpg" />
</a>
<h4 class="component2__item__title">
<a class="component2__item component2__item--primary" href="#">Light Vehicle</a>
</h4>
<a class="component2__item component2__item--primary" href="#"> </a>
</div>
</div>
</section>
Any ideas? (Note for example the additional anchor tags!) Is there something in the HTML
it doesn't like? Is there a setting in config.js that I can use?
Thanks
If someone else stumbles across this I worked round it. As it was already my default (from v3) I'd already tried:
config.allowedContent = true;
I went through the documentation in detail, and even tried editing the dtd to allow headers to be in divs and anchors:
CKEDITOR.dtd['div']['h'] = 1;
CKEDITOR.dtd['a']['h'] = 1;
All to no avail. Eventually I gave up and replaced the <h4> tag in my sample with a <span> and styled it accordingly. That worked and CKEDITOR now leaves my source HTML untouched. Irritating that there isn't a feature whereby you can tell the Editor "Look, I know my HTML is valid, leave it alone and I'll deal with any consequences."
EDIT
Fiddle of that problem: https://jsfiddle.net/9k449qs2/ - debug the fiddle and try to select the header with your picker. You will not be able to do so, it will select you the whole page every time you click.
I'm just working on a project which has a persistent header and footer. Just the content changes by clicking through the application. Now i wanted to add a backbutton into the header which i did with:
<header id="headerMain" data-position="fixed" data-role="header">
<a href="#" data-rel="back">
<div class="backButton">GO BACK</div>
</a>
</header>
The rest of my code directly after the header looks like this:
<div data-role="page" id="pageMain">
<div class="content gray">
adfjsöalfjasödf
</div>
</div><!-- pageMain end -->
<footer id="footerMain" data-position="fixed" data-role="footer">
Footer
</footer>
<div data-role="page" id="checkConnection">
<div class="content gray">
<button id="checkConnectionState" class="button" onclick="CTFNetworkState()">Check your Connection</button>
<a href="#checkBattery">
<button id="checkBatteryState" class="button">Check your Battery</button>
</a>
</div>
</div> <!-- checkConnection end -->
<div data-role="page" id="checkBattery">
<div class="content gray">
<p>Just plug your device and you'll get information about your battery state.</p>
</div>
</div> <!-- checkBattery end -->
So all works fine, the transitions and so on. But i can't get the backbutton work. He is not clickable. The headers on each page are not clickable in any form. If i debug that with gapDebug and i click onto the header, GapDebug marks the Pagecontainer and not the header.
So, how can i make the backbutton inside the header clickable on each page?
EDIT
So the header doesn't care what kind of button i place inside it. No matter what button i choose, or what attribute i add to my <a></a> it is not clickable.
So i tried to run GapDebug again, pressing the "Inspect" Button and than clicked on my backbutton, it selects me the code from the page which is wrong.
So i found the solution. The problem was, that not the documentation for persistent toolbars helped me, instead the documentation for external toolbars did it then.
Simply add
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
inside your <script></script> tag and all works fine. This happens Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.
I've tried all of the following:
<a name="test"></a>
<a id="test"></a>
<h4 id="test">SOME TEXT</h4>
And then linking to them like this:
<a href="pagename#test">
All of the above work with Firefox, IE and Chrome, but none of them worked with Safari 5.xx on a mac. Any help is very much appreciated.
Go to Test
.
.
.
<div id="test">This is Test.</div>
This should work.
EDITED:
Also, if you want to link to a particular id in a different page, which I think you do, use:
Go to Test on some different page.
Looks like you have a misunderstanding of how anchors work, you need to use the href attribute.
<a name="test"></a> <!-- not required -->
<a id="test"></a> <!-- not required -->
<h4 id="test">SOME TEXT</h4> <!-- this is correct -->
To link to the <h4 id="test"> element do this (if target on the same page):
Go to Test
If target on a different page:
<a href="other_page.html#test">
I use plugin addthis in share option I use the default (share web pages), but in like(facebook), twitter, and google+ I want with my definition. Here my Code :
<div class="addthis_toolbox addthis_default_style" style="float:left">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" href="http://www.website.com/"></a>
<a class="addthis_button_tweet" href="http://www.website.com/"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium" href="http://www.website.com/"></a>
<a class="addthis_counter addthis_pill_style"></a>
But this code not work in my web..
Replace "href" with "addthis:url". To specify title as well, use "addthis:title". Full documentation can be found here:
http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#.UFczI6SXRuo
Here is what your code should look like:
<div class="addthis_toolbox addthis_default_style" style="float:left">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:url="http://www.website.com/"></a>
<a class="addthis_button_tweet" addthis:url="http://www.website.com/"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium" addthis:url="http://www.website.com/"></a>
<a class="addthis_counter addthis_pill_style" addthis:url="http://www.website.com"></a>
</div>
Guys I am about to get a massive headache here. First of all, I am working on a website and everything seems to be runng. So, I had difficulties with making them links etc. so I tried to add the addthis.com plugin which would do all of that automatically. But, when I add that everything seemed to crash so I have made a quick jsFiddle to show you what I want. Here: http://jsfiddle.net/cSP9Q/1/ the problem is that I want to change those icons to mine which you can see on the first link and I just can't seem to change the spacings in between the icons. Furthermore, is there anyway of deleting the bubble with the counter because that just looks ridiculous.
HTML
<div id="social"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"><img src="your_image_url" /></a>
<a class="addthis_button_preferred_2"><img src="your_image_url" /></a>
<a class="addthis_button_preferred_4"><img src="your_image_url" /></a>
<a class="addthis_button_google_plusone"><img src="your_image_url" /></a>
<a class="addthis_button_compact"><img src="your_image_url" /></a>
</div>
<!--javascript goes here-->
</div>
Example and Reference.
NOTE: your link http://www.aasingercom.ipage.com/php/ doesn't work, anyway.