I am attempting to use the the bing translator on a site I am working on but I am not able to get it to display on the page. I have tried do what is suggested on the following site: https://www.bing.com/webmaster/tools/translator/
The following code has been applied to a navigation script as so
<header>
<div class="col-xs-12 col-md-8 pull-right collapse navbar-collapse navbar-ex1-collapse">
<div class="navbar-form navbar-right form-inline hidden-xs hidden-sm">
<div id='MicrosoftTranslatorWidget' class='Dark' style='color:white;background-color:#555555'></div>
</div>
</div>
<script>
setTimeout(function(){{var s=document.createElement('script');s.type='text/javascript';s.charset='UTF-8';s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=False&ui=true&settings=Manual&from=';var p=document.getElementsByTagName('head')[0]||document.documentElement;p.insertBefore(s,p.firstChild); }},0);
</script>
</header>
Any help would be appreciated.
As MS translator blog said, The Translator Web Widget will be retired on July 31, 2019. Beginning July 31st, the widget will no longer translate your webpages.
That could be a reason why your code doe4sn't work...
Related
I'm using Blazor, and it doesn't look like CSS Push/Pull is working
If I take the stock Microsoft Sample app, and replace the table in FetchData.razor with:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
</div>
The lavender block is still on the left (aka not pushed)
(sample code from TryIt Tutorial on Push/Pull)
Any ideas?
The bootstrap version in the blazor default website is different from the w3schools link you have shared. The version in default blazer website is 4.3.1 and the one on w3schools is 3.4.1
As far as I can find, there is no .col-sm-push-8 helper class in bootstrap 4. Instead you can use the class order-* as below:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 order-4" style="background-color:lavender;">.col-sm-4 .order-4</div>
<div class="col" style="background-color:lavenderblush;">.col</div>
</div>
</div>
Output will be like this:
Here are more details
The above was really close, I just changed to order-sm-xxx
I'm working a little dashboard app for one of our internal systems, and opted to add a full-screen overlay when something is loading. It all works fine in Chrome, but on Edge I get something to this effect...
As far as I can tell its caused by having the fa-spin class on my main loading indicator as well as the overlay being transparent. I've removed fa-spin, Edge still has a few weird side effects (that I can live with), but it exacerbated by having the spin effect active.
Questions:
Has anyone encountered this before as my google attempts are returning seemingly futile results. Is there even a fix / work around for this, or is it just Edge being Edge...
Even though I'd love to opt and say to our users to not use Edge / IE, I'd feel like I'm giving up which isn't an option :P
HTML structure (More or less)
<div class="container-fluid" ng-class="{ 'overlay' : vm.isLoading }">
<div ng-if="vm.isLoading">
<div class="overlay-modal">
<p><i class="fa fa-gear fa-spin"></i>
</p>
</div>
</div>
<div class="col-md-7 main">
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-12 container-fluid" ng-class="{ 'blur' : vm.isLoading }">
...
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
<div class="col-md-5">
...
</div>
</div>
I've just tried on my dashboard application using fa-spin and I can assure you that it didn't caused my issues. I've tried fontawesome both from cdn and embedded in my static files. Most probably that weird effect is caused by a number of overlapping CSS/JS styles/class toggling. I hope this answers your question.
I am trying to learn meteor, so I created few sample which worked fine. I searched for boiler plate and came across http://www.meteorkitchen.com/examples which is very helpful.
I setup the http://generator-accounts.meteor.com/ and added Login with facebook and google out of which Google worked fine.
The sample I am working on need sub pages for which I referred Subpages example and modified code but it is not working as expected.
Now the requirement is whenever I click on menu the content should be displayed below the menu.
So I modified the template
<template name="HomePrivate">
<div class="page-container container">
<div class="row">
<div id="navbar" class="navbar navbar-inverse" role="navigation">
<div class="navbar-container container">
<div id="listing" class="collapse navbar-collapse">
<ul id="menu-items" class="nav navbar-nav">
<li id="menu-item-simple" class="{{menuItemClass 'home_public'}}">
<a href="{{pathFor 'home_private.general_information'}}">
<span class="item-title">
General Information
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div id="subcontent">
{{> yield region='HomePrivateSubcontent'}}
</div>
</div>
</div>
</template>
and in route
this.route("home_private.general_information", {path: "/home_private/general_information", controller: "GeneralInformationController"});
Now when I click on menu item it replaces the menu as well whereas my understanding is the content should be rendered in
{{> yield region='HomePrivateSubcontent'}}
Please advice.
I have solved the problem.
Please use the YAML version instead of JSON version to setup locally.
https://github.com/perak/kitchen-examples/tree/master/example-subpages
and some changes in controller were required.
I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.
For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html
and I want try to create a WP template starting by it.
Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?
Is it the right way?
The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)
Can you give me some ideas about how do these things?
Tnx
Andrea
I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/
The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.
As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
I have been trying to resolve an issue for awhile with rendering of content and the {{currentUser}} check in meteor. A code snippet is below:
{{#if currentUser}}
<div class="sparkline-box side">
<div class="sparkline-row">
<h4 class="gray"><span>Pending Contract Actions</span> 25</h4>
<div class="sparkline big" data-color="gray"><!--28,11,24,24,8,20,26,22,16,6,12,15--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="dark-green"><span>Outstanding Task Orders</span> $43.33M</h4>
<div class="sparkline big" data-color="darkGreen"><!--16,20,6,19,25,22,9,13,7,10,15,4--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="blue"><span>Current Month Actions</span> 45</h4>
<div class="sparkline big" data-color="blue"><!--20,18,21,17,5,7,29,9,8,14,23,8--></div>
</div>
<hr class="divider">
</div>
{{/if}}
With the {{currentUser}} block in place, the text appears, but the sparkline charts do not render in the browser, even when the page is reloaded. If I am not logged in, the text and charts are not visible. The problem is with the rendering of the sparkline charts when wrapped in the {{currentUser}} block. This also happens with other third-party javascript libraries that I am using in the application if wrapped in a {{currentUser}} block. Any thoughts on what may be happening?
Thanks!!
What happens is that meteor re-renders the context when {{currentUser}} changes. It does not preserve any changes made to the DOM by third parties. Read about isolate, preserve and constant. I believe that {{#constant}} will do the trick here.