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;}
Related
I ran Flutter for Web by running flutter run -d chrome, then I see bunch of <flt-*> tags such as <flt-glass-pane>, <flt-scene>. I think Flutter Web renders web pages by Canvas and not sure why it generates those html tags. Are they for SEO purposes? Tried to look up documentation but could not find any about it.
I removed style attributes from the generates html tags on the default startup page and it looks like below.
<flt-glass-pane>
<flt-semantics-placeholder role="button" aria-live="true" tabindex="0" aria-label="Enable accessibility"></flt-semantics-placeholder>
<flt-scene-host aria-hidden="true">
<flt-scene flt-layer-state="updated">
<flt-transform flt-layer-state="updated">
<flt-offset flt-layer-state="updated">
<flt-picture flt-layer-state="updated"></flt-picture>
<flt-offset flt-layer-state="updated">
<flt-clip flt-layer-state="updated" clip-type="physical-shape">
<flt-clip-interior>
<flt-picture flt-layer-state="updated">
<flt-dom-canvas>
<p>You have pushed the button this many times:</p>
<p>0</p>
</flt-dom-canvas>
</flt-picture>
<flt-clip flt-layer-state="updated" clip-type="physical-shape" >
<flt-clip-interior >
<flt-picture flt-layer-state="updated" >
<flt-canvas >
<div >
<div >
<p >Flutter Demo Home Page</p>
</div>
</div>
</flt-canvas>
</flt-picture>
</flt-clip-interior>
</flt-clip>
<flt-transform flt-layer-state="updated" >
<flt-clip flt-layer-state="updated" clip-type="physical-shape" >
<flt-clip-interior >
<flt-picture flt-layer-state="updated" >
<flt-dom-canvas >
<p ></p>
</flt-dom-canvas>
</flt-picture>
</flt-clip-interior>
</flt-clip>
</flt-transform>
</flt-clip-interior>
</flt-clip>
</flt-offset>
</flt-offset>
<flt-picture flt-layer-state="updated" >
<flt-dom-canvas >
<draw-rect flt-rect="Rect.fromLTRB(-40.0, 28.0, 40.0, 40.0)" flt-paint="SurfacePaintData(color = rgba(0,0,0,0.4980392156862745); maskFilter = MaskFilter.blur(BlurStyle.normal, 4.0); isAntiAlias = true)" ></draw-rect>
<draw-rect flt-rect="Rect.fromLTRB(-40.0, 28.0, 40.0, 40.0)" flt-paint="SurfacePaintData(color = rgba(183,28,28,0.6274509803921569); isAntiAlias = true)" ></draw-rect>
<p >DEBUG</p>
</flt-dom-canvas>
</flt-picture>
</flt-transform>
</flt-scene>
</flt-scene-host>
</flt-glass-pane>
<flt-ruler-host >
<div data-ruler="single-line" >
<p >_</p>
<div></div>
</div>
<div data-ruler="min-intrinsic" >
<p >_</p>
</div>
<div data-ruler="constrained" >
<p >_</p>
</div>
<div data-ruler="single-line" >
<p >Flutter Demo Home Page</p>
<div></div>
</div>
<div data-ruler="min-intrinsic" >
<p >Flutter Demo Home Page</p>
</div>
<div data-ruler="constrained" >
<p >Flutter Demo Home Page</p>
</div>
<div data-ruler="single-line" >
<p >You have pushed the button this many times:</p>
<div></div>
</div>
<div data-ruler="min-intrinsic" >
<p >You have pushed the button this many times:</p>
</div>
<div data-ruler="constrained" >
<p >You have pushed the button this many times:</p>
</div>
<div data-ruler="single-line" >
<p >0</p>
<div></div>
</div>
<div data-ruler="min-intrinsic" >
<p >0</p>
</div>
<div data-ruler="constrained" >
<p >0</p>
</div>
<div data-ruler="single-line" >
<p ></p>
<div></div>
</div>
<div data-ruler="min-intrinsic" >
<p ></p>
</div>
<div data-ruler="constrained" >
<p ></p>
</div>
<div data-ruler="single-line" >
<p >DEBUG</p>
<div></div>
</div>
<div data-ruler="min-intrinsic" >
<p >DEBUG</p>
</div>
<div data-ruler="constrained" >
<p >DEBUG</p>
</div>
</flt-ruler-host>
Flutter has two types of web renderers.
The code snippet you attached looks like using html renderer not the canvaskit. So, you are getting DOM elements instead of canvas. When you run flutter run -d chrome it builds in auto mode that choose the renderer automatically here it choose html renderer.
The renderer to be used can be enforced by the --web-renderer option (html or canvaskit) in flutter run or flutter build command.
Now if we look at the DOM elements, some of the DOM elements are common for both renderers.
The pattern looks like the below
<flt-glass-pane>
<flt-semantics-placeholder></flt-semantics-placeholder>
<flt-scene-host>
<flt-scene>
<!-- if canvaskit renderer used here will be one canvas element only
and all elements or widgets will be drawn inside
the canvas -->
<!-- if html renderer used here will be DOM elements with
different tags and attribute to render the
widgets in the browser -->
</flt-scene>
</flt-scene-host>
<flt-glass-pane>
For html renderer the DOM elements with different tags and attributes inside flt-scene are used to render the widgets in browser.
Apart from the container DOM elements (flt-glass-pane, flt-scene-host, flt-scene), the flt-semantics-placeholder element is interesting. If javascript click() is triggered on the flt-semantics-placeholder element it enables accessibility. Technically it creates an overlay of dom elements over the canvas mapped to the widget coordinates, so that the widgets in flutter app can be used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application though they are rendered in a canvas as, in canvas we can not know the co-ordinates or read text of the widgets easily (using OCR it is possible but that is different). This is used in flutter driver also here.
In Nuxt I have 3 pages (index, login and register) that needs to show the same structure, the code above.
It's a form with tabs. then in the tag it's were I show some diferences.
I decided to put that code in the default.vue file.
But now, I have more pages were I don't need to show the "forms" class and the tabs.
Any suggestion about how can I achieve it?
Thank you
<template>
<div>
<div class="container is-fluid">
<navbar></navbar>
<div class="places">
<div class="structure">
<div class="forms">
<div class="tabs help-tabs">
<ul class="tab_title">
<li :class="[tab === 'register' ? 'is-active' : '']">
<a #click="tab='register'">Register</a>
</li>
<li
:class="[tab === 'login' ? 'is-active' : '']"
#click="goToRoute('login')">
<a #click="tab = 'login'">Login</a>
</li>
</ul>
</div>
</div>
<nuxt />
</div>
</div>
</div>
</div>
</template>
You could either create a second layout beside the default.vue and use it only for these routes (index, login and register) so you have:
auth.vue for index, login and register pages
default.vue for all other pages
You could then specify which layout you want to use in the page file directly like here
export default {
layout: 'auth',
}
Or you stick to using one single layout (default.vue) and create a component (eg. tab component) which you then display on all 3 of those routes.
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
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;
}