I have site where i used addthis sahring icons code to display the scocial sharing icons. Fb like button is not coming in mozilla but it is working fine in chrome & safari.
I used the below code for displaying the sharing icons as get from addthis site https://www.addthis.com/get/sharing?frm=hp#.UDrCVsHib-s
<div class="addthis_toolbox addthis_default_style ">
<div id="fb-root"></div><a class="addthis_button_facebook_like" fb:like:layout="button_count" ></a>
<a class="addthis_button_tweet" ></a>
<a class="addthis_button_pinterest_pinit" ></a>
<a class="addthis_counter addthis_pill_style" ></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-5022bfc615892c77"></script>
Use this Code for sharing on Facebook, i have use this tons of time and each time i get success, change the sequence if you want...
<span class='st_fblike_vcount'></span>
<span class='st_twitter_vcount'></span>
<span class='st_plusone_vcount'></span>
<span class='st_email_vcount'></span>
<span class='st_sharethis_vcount'></span>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "782110c4-838d-408f-8393-98897995ced4"}); </script>
Go to wp-content/plugins/facebook-like-box-responsive/facebook-like-responsive.css
e.g http://blogs.tarungupta.info/wp-content/plugins/facebook-like-box-responsive/facebook-like-responsive.css
remove !important
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe {
width: 100%;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe {
width: 100% !important;
}
Related
I am in the process of making my first Tumblr theme and I'm a little confused about pagination.
I'm trying to make my pagination something like this:
Where there is (current page/total pages) with "NEXT" as the next page link on its right
And when you are on the other pages, a "PREV" as the previous page link appears on its left.
CSS
#pagi {
position:absolute;
z-index:10;
margin-top:18px;
width:130px;
text-align:center;
text-transform:uppercase;
}
#pagi a {
text-decoration:none;
}
HTML
{block:Pagination}
<div id="pagi">
{block:PreviousPage}
PREV
{/block:PreviousPage}
{block:JumpPagination length="3"}
{block:CurrentPage}
({PageNumber})
{/block:CurrentPage}
{block:JumpPage}
<a class="jump" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
NEXT
{/block:NextPage}
</div>
{/block:Pagination}
I thought i did it right, but instead it turned out like this:
What did i do wrong?
Current Page and Total Pages
Sadly, the jump pagination won't work here. {CurrentPage} will give you the current page number. {TotalPages} will give you the total page count.
{block:Pagination}
<div id="pagi">
<!-- Prev Page Link -->
{block:PreviousPage}
PREV
{/block:PreviousPage}
<!-- Page Counter -->
<span class="counter">({CurrentPage}/{TotalPages})</span>
<!-- Next Page Link -->
{block:NextPage}
NEXT
{/block:NextPage}
</div>
{/block:Pagination}
How can I do addthis.toolbox('.addthis_toolbox') multiple times?
I have a list of posts, and each is opened in popup window (jquery ui dialog). So I need to reload AddThis bar for each post.
Now I have:
<div id="addThis_<?=$postID?>" class="addthis_toolbox addthis_default_style" addthis:title="<?=$fullTitle?>" addthis:url="https://<?=$url?>">
<a class="share-button addthis_button_preferred_1"></a>
<a class="share-button addthis_button_preferred_2"></a>
<a class="share-button addthis_button_preferred_3"></a>
<a class="share-button addthis_button_preferred_4"></a>
<a class="share-button addthis_button_twitter" addthis:title="<?=$fullTitle?>" addthis:url="http://lj.is/<?=$postID?>"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
$(function(){
var addthis_config = {
data_track_clickback:true,data_track_addressbar:true,pubid:'...',ui_delay:300
};
var addthis_share = {url:"https://<?=$url?>", title:'<?=$fullTitle?>'};
if (window.addthis) {addthis.toolbox('#addThis_<?=$postID?>'); addthis.button("#addThis_<?=$postID?> .share-button"); addthis.counter("#addThis_<?=$postID?> .addthis_bubble_style");}
else $.getScript('https://s7.addthis.com/js/300/addthis_widget.js#pubid=...&async=1', function(){addthis.init();});
})
</script>
Now first launch is ok. But next - bar is built, but without correct click, anchor title and etc.
You can see that on https://littlejoys.ru/
And additional problem - compact menu has incorrect position when my popup window is scrolled.
You can repeat the div multiple times. But you need to change the URL, title, description using Addthis optional attributes (addthis:url, addthis:title, addthis:description).
<!-- First Post -->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/1"
addthis:title="My cool first post"
addthis:description="An Example Description 1">
<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>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
<!-- Second Post-->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/2"
addthis:title="My hot second post"
addthis:description="An Example Description 2">
<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>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
Therefore you can add it in a loop and it will pick up the correct data.
If Addthis is not getting re-initialized in UI dialog then you need to re-initialize the addthis buttons again using addthis.button(".share-button")
where share-button is the class of the addthis share anchor link.
Check this Addthis article: http://support.addthis.com/customer/portal/articles/1365325-rendering-tools-with-javascript
When using facebook comments social plugin within a jquery tab element, it now returns a 0 width iframe resulting in a blank page (tab).
Call has been working for months (years) within the tab, but now a problem since a month.
If I place the call outside the tab, the plugin works fine.
Call is
<ul class="css-tabs">
<li><a id= "t1" href="#tab1">#ISUSkating</a></li>
<li><a id= "t2" href="#tab2">Facebook</a></li>
<li><a id= "t3" href="#tab2">Timetable</a></li>
</ul>
<!-- tab "panes" -->
<div class="css-panes">
<!-- TAB 1 -->
<div></div>
<!-- TAB 2 -->
<div id="fb_comments" style="height:530px; overflow-y:auto; background-color:white;border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px;">
<fb:comments href="http://livemanager.eurovision.edgesuite.net/isu/site/index.html" num_posts="10" width="300" colorscheme="light" order_by='reverse_time'></fb:comments>
</div>
<!-- TAB 3 -->
<div id="companion_right" style="height:250px; width:300px;"></div>
</div>
<!-- activate above css tabs with JavaScript -->
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
$(".css-tabs:first").tabs(".css-panes:first > div");
});
</script>
Add this to your CSS.
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
Good evening everyone,
I have a 3 tab window where I want each tab to display a different Facebook album when the user clicks the corresponding tab. The first(and default) tab works perfectly. However when I click the second tab and it just shows a black screen. It also seems whatever FB album ID I put in tab2 overrides the content of tab1. Any help is welcome. Thanks in advance.
Here's the HTML:
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div id="galleria">
<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
facebook: 'album:303814463041408',
width: 458,
height: 250,
wait:true,
lightbox: true});
</script>
</div>
</div>
<div class="tab-pane" id="tab2">
<div id="galleria">
<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
facebook: 'album:323687541054100',
width: 458,
height: 250,
wait:true,
lightbox: true});
</script>
</div>
</div>
<div class="tab-pane" id="tab3">
<p>tab3 tab3 tab3</p>
</div>
</div>
This might be because both tabs' content are using the same ID galleria. Try changing them to id="galleria1" and id="galleria2", then update each script to target the appropriate divs: #galleria1 and #galleria2.
I was impressed by the smoothness of the iScroll on iOS so i tried to implement it in my iPhone application.
The iScroll Demo works real fine on my iPhone. But only when the scrollable content is as simple as short text in <li> elements:
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
etc..
</ul>
When i tried to put a slightly more complex contents :
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
The smoothness is completely gone, and the list hardly scrolls ..
Is there a way to make my contents lighter ?
Any suggestions whatsoever ? Thank you very much !
Here's how i declare my iScroll element:
myScroll = new $wnd.iScroll(
elem,
{
useTransition : true,
topOffset : pullDownOffset,
hScroll : false,
onRefresh : function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove : function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
}
},
onScrollEnd : function(response) {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
app.#ma.xxx.xxxxx.clientcommon.utils.IPhoneScroller::callbackSuccess(Lcom/google/gwt/user/client/rpc/AsyncCallback;Lcom/google/gwt/core/client/JavaScriptObject;)(pullDownCallback,response);
}
}
});
[EDIT]
only by removing divs from:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
and making it to:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<img class="cssDivStyle" width="120px" height="74px" src="http://some_jpg_image.jpg">
<p>Some long text ....</p>
</li>
Made the scrolling much, much faster !! I have no idea why!
The code below will render your page the way webkit expects it. So redrawing will be massively quicker.
The HTML
<body>
<div class="headerFix">
<div class="header">
<!-- The content in header...logo/menu/e.t.c -->
</div>
</div>
<div class="content"><!-- you dont need this extra div but it keeps structure neat -->
<ul>
<li>List content here which can be as complex as needed</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="footerFix">
<div class="footer">
<!-- The content in footer -->
</div>
</div>
...
The css
.headerFix, .header {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.headerFix, .footerFix {
position:relative;
}
.header {
position:fixed;
top:0;
left:0;
/*this is now fixed, but the parent being in flow keeps this div from overlapping your list which is why the height had to be the same for both*/
}
ul li {
/*basic list look for sample purposes*/
display:block;
min-height:40px;
border-bottom:solid 1px #777;
}
.footerFix, .footer {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.footer {
position:fixed;
top:0;
left:0;
/*you will need to use javascript to find the height of device screen to know what the css value for "top" should really be. This will take some work on android where getting screen sizes is funky if you plan to support it. */
/*If its iphone only you can assume the size which has always been the same, and make an exception for the new iphone 6. I say use javascript to position this footer if you plan to support many platforms*/
}
By the way I recommend using this meta tag in your html head to make sure you use the screen at its best
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
When I use 'iscroll-lite.js' library in my mobile application, I fall same problem. Then I had little change in 'iscroll-lite.js' library.
Simply add e.preventDefault() to '_move:' function in 'iscroll-lite.js';
It resolve my problem.