I have a problem with adding Google Translate plugin to my webpage. It works well in Chrome but it does not in Firefox. I added this code into my HTML:
<div id="google_translate_element" style="display: none;"></div>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
end this code into JS file:
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pl',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
autoDisplay: false,
},
'google_translate_element');
}
I get this error:
Uncaught DOMException: An invalid or illegal string was specified
ss https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:468
Iu https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:551
av https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:604
mv https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:627
googleTranslateElementInit https://www.swinoujscie.pl/:2107
e https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:52
Oi https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:52
<anonimowa> https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:628
<anonimowa> https://translate.googleapis.com/_/translate_http/_/js/k=translate_http.tr.pl.a56NrSgV284.O/d=1/exm=el_conf/ed=1/rs=AN8SPfrkdghExwoIxxyRz3pC0eYbjBK20w/m=el_main:633
Also translate.googleapis doesn't work for my Firefox on page https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate
I updated Firefox but this didn't fix the problem.
I run into the same issue. It seems like the problem is caused by lack of proper support for the second parameter measureOptions of performance.measure() function in Firefox below v103 which some part of Google Translate widget relies on.
See MDN specification: https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure#browser_compatibility
Related
I have been looking for ways to use variables within the style tag of a Vue file and have come across this solution. I have attempted to use it as can be seen in the code sample below
...
</template>
<script>
export default {
data() {
return {
url: "test",
};
},
};
</script>
<style>
.backIm:before {
...
background: v-bind(url);
...
}
</style>
However, despite seeming set up the exact same way as was done in the documentation, the v-bind(url) isn't interpreted when testing, as can be seen within the developer tools
I've searched but not found anyone with this exact issue. If anyone could explain why this is incorrect, and provide a solution, I'd be grateful.
Is it possible to target elements that have no language set nor inherited, i.e. are in unspecified ("unknown") language?
Trivia
HTML document or element language can be set using HTML lang attribute, e.g.:
<html lang="en">
<h1>Dictionary</h1>
<dl>
<dt><abbr lang="en-Mors">-... - .--</abbr>
<dd><i lang="fr-Latn">à propos</i>
</dl>
or using code(s) in the HTTP Content-language header:
HTTP/2 200 OK
[other headers]
Content-language: en,en-Brai,fr-Latn
<html>
<h1>Dictionary</h1>
[rest of document]
or it's long deprecated yet still working <meta http-equiv> counterpart:
<html>
<head>
<meta http-equiv="content-language" content="en,en-Brai,fr-Latn">
</head>
<html>
<h1>Dictionary</h1>
[rest of document]
In either case using :lang(en) CSS selector matches main heading from examples and all other elements that has not explicit lang attribute with value not equal or starting with "en".
Goal
In case the document is sent without Content-language HTTP header or <meta> element and without lang attribute, is it possible to match those elements that falls to inevitable "unknown" language?
Plus in document or DOM fragment that has language set by any aforementioned mean, is it possible to use lang() CSS selector to match elements with empty lang="" attribute, that effectively 'opts out' of having language?
HTTP/2 200 OK
[no content-language header nor meta present]
<html>
<p>I Want to select this. <span>And this.</span></p>
<p lang="">And this.</p>
<p lang="en">Not this. <span lang="">But this again.</span></p>
What does not work
Neither :lang(), :lang(unknown), :lang('') nor :not(:lang(*)) works for this purpose. Selectors derived from :not([lang]), [lang=''] would logically give false negative for use-cases with HTTP Content-language header/meta present.
Answer requirements
Seeking answer that either gives solution without false negatives or confirms it is not possible with references to specs (or their absence) and explanation why is it so.
Notes:
When empty lang="" attribute is present, targeting it with [lang=""] attribute selector works, but feels weird considering there is dedicated :lang() pseudo-class for language-related stuff.
Edit 2021: This has been accepted as a bug https://bugs.chromium.org/p/chromium/issues/detail?id=1281157
We provide language range in :lang() rule and they are matched against language tags. They've mentioned about supporting asterisks in language ranges:
Language ranges containing asterisks, for example, must be either correctly escaped or quoted as strings, e.g. :lang(*-Latn) or :lang("*-Latn") ref
And in old 2013 draft:
Each language range in :lang() must be a valid CSS identifier [CSS21] or consist of an asterisk (* U+002A) immediately followed by an identifier beginning with an ASCII hyphen (U+002D) for the selector to be valid. ref
But I can't get p:lang(\*-US) to work on Chrome and Firefox on Windows. The rule p:lang(en\002DUS) works thought, but p:lang(en\002D\002A) does not. Not sure about the status of the support for special range "*" in browsers. Also there is no mention of matching undefined by the special range "*" in Matching of Language Tags.
But,p:lang(\*) and p:not(:lang(\*)) work on iPadOs in both Safari and Chrome. Open this jsfiddle on ipad
I think chromium doesn’t support the full :lang() feature.
Workaround: If a little bit of JavaScript is acceptable then you can try following solution:
document.addEventListener('DOMContentLoaded', init);
function init() {
if (!document.documentElement.lang) {
fetchSamePageHeaders(checkHeaderLanguage);
}
}
//make a lightweight request to the same page to get headers
function fetchSamePageHeaders(callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE) {
if (callback && typeof callback === 'function') {
callback(request.getAllResponseHeaders());
}
}
};
// The HEAD method asks for a response identical to that
// of a GET request, but without the response body.
//you can also use 'GET', 'POST' method depending on situation
request.open('HEAD', document.location, true);
request.send(null);
}
function checkHeaderLanguage(headers) {
//console.log(headers);
headers = headers.split("\n").map(x => x.split(/: */, 2))
.filter(x => x[0]).reduce((ac, x) => {
ac[x[0]] = x[1];
return ac;
}, {});
if (!headers['content-language']) {
console.log('No language in response header. Marking the html tag.');
let html = document.querySelector('html');
html.lang = 'dummyLang';
} else {
console.log('The response header has language:' + headers['content-language']);
}
}
p {
margin: 0;
}
p[lang=""],
p:lang(dummyLang) {
color: darkgreen;
font-size: 2em;
}
p:lang(en\2dus)::after {
content: '<= english';
font-size: 0.5em;
color: rebeccapurple;
}
<p>I Want to select this.</p>
<p lang="">And this.</p>
<p lang="en-us">Not this.</p>
<span lang='en-us'>
<p>Also, not this.</p>
<p lang="">But, this too.</p>
</span>
Here we are using JavaScript to determine if the language has been mentioned in the html tag or in response header. And assigning the html tag dummyLang language. You may also want to check meta tags.
For detailed explanation about Getting HTTP headers in javascript and pros and cons of this technique, refer this SO discussion.
I have managed to come up with a work around, first you can run some js to set the lang attribute of every element with no lang attribute to "xyz" and then select that using css.....
document.querySelectorAll("p").forEach(e => {
if (e.lang == "") e.lang = "xyz";
})
p:lang(xyz) {
color: red;
}
<p>I Want to select this.</p>
<p lang="">And this.</p>
<p lang="en">Not this.</p>
I've installed the codemirror editor succesfully.
But there is one issue regarding css of that editor.
You can check here what I mean.
So how can I display the color after 3rd line in the editor.
you should look at
<div class="CodeMirror-gutters" style=" /*height: some_pixel*/; "><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div>
instead of some_pixel after press enter or any keyword it will automatically set the height of the line number,
if you have that problem on start you might want to see how to create at first,
there is three common method,
The simplest is to define your Text Area and just use this code:
var YourCodeMirror = CodeMirror.fromTextArea(YourDefinedTextArea);
The best is put values using code:
var yourCodeMirror = CodeMirror(PlaceYouWant, {
value: /*any code here :*/"function(){return 'anything'}",
mode: /*your mode ie.*/"javascript"
});
hope it helps
UPDATE: There is a manual site here : http://codemirror.net/doc/manual.html
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};
I just posted this in the Google Visualization group, but I thought I would reach out to the Plone community as well for help.
I am using Plone 4.2.4 and wanted to integrate Google Charts with an Oracle back end via cx_Oracle. There is already a very nice package called EEA.Daviz. However, it was way more than I needed and I thought I could do it on my own, so I created some page templates and Python code that wraps the Javascript. On my laptop (Mac OS X) it all worked fine.
However, once I pushed it to my server (SLES 10), BarCharts stopped working. I have only tested Bar, Line and Motion charts. All I get is a red error box that says "e[0].K is undefined". After googling around, I found a very similar description of my problem that suggests it is a Google Visualization error and the fix is to change the width and height properties. However, changing the height or width did not fix it. What is very strange is that, if I copy the example JS from the BarChart page and copy it into a vanilla Zope Page Template, it works just fine. However, once I wrap it in the master template, I get the red error message again.
So I am confused. I have the same theme installed on my laptop and it did not give me any problems. I know I can display BarCharts on the server without the theme in a vanilla Page Template.
Can anyone point me in the right direction?
ZPT that Works:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</body>
</html>
ZPT that does NOT work:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<metal:main fill-slot="javascript_head_slot">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</metal:main>
<body>
<metal:main fill-slot="main">
<tal:main-macro metal:define-macro="main">
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</tal:main-macro>
</metal:main>
</body>
</html>
I've tested your second example and it seems to work as intended so maybe there is something wrong with your data coming from Oracle (format, missing values, etc). You'll have to do some JS debugging out there. Try adding a breakpoint to see what e[0] is and why it doesn't have the K attribute (or why e is an empty Array).
Also, EEA Daviz is a bundle that brings together multiple Visualization frameworks (Google Charts, Simile Exhibit and in the near future Highcharts) but you can always use one or more of its components without bringing in the entire plane Thus, you should also try EEA Google Charts. Don't forget that you'll need collective.js.jqueryui < 1.9 for Plone 4.2.x
I'm attempting to conditionally show/hide two divs using ng-show with a boolean value in $scope, based on when an AJAX call has completed. Basically, with the following layout:
<div id="div1" ng-show="!loadingData">
<!--Some markup here-->
</div>
<div id="loadingMessage" ng-show="loadingData">
Loading...
</div>
The function provoking the change contains the following:
$scope.loadingData=true;
var promise = dao.doAjaxGet("url");
promise.then(function(data){
//Hide loading message
$scope.loadingData=false;
});
The AJAX call is operating correctly, and this works fine in Chrome, Safari, Firefox, but not the two versions of IE that we are required to support - IE7 and IE8. The loading message stays hidden and div1 stays visible regardless of what status the call is in. Can anyone advise on this?
If you have console.log in your controller, get rid of it. It helped to get things working in IE8 e.g. ng-hide
Turns out this is caching related. Chrome and IE both cache ajax calls after the first call. I've managed to resolve the problem in chrome by introducing cache:false into the ajax call configuration but this seems to have no effect in IE. If anybody has further information on this, please let me know.
Here's a fully working Angular ie7 template. Ues a very old Angular, but works
My HTML File
https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css'>
<!--[if lte IE 8]>
<script type="text/javascript">
// IE7 fix for missing
if (!window.console) {
var console = {
log: function() {},
warn: function() {},
error: function() {},
time: function() {},
timeEnd: function() {}
}
}
</script>
<script src="https://cdn.jsdelivr.net/json2/0.2/json2.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript" src="https://cdn.jsdelivr.net/es5.shim/4.5.7/es5-shim.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.1.5/angular.js"></script>
<script>
/**
* Main AngularJS Web Application
*/
var app = angular.module('myapp', []);
app.controller('MyPageCtrl', pageController);
function pageController($scope) {
$scope.languages = [
{ 'Id': 1, 'Name': 'French' },
{ 'Id': 1, 'Name': 'German' },
];
};
</script>
</head>
<body ng-controller="MyPageCtrl">
<div class="col-xs-12">
<select name="languagesDropDown" id="languagesDropDown" class="form-control" style="width: 200px;">
<option ng-repeat="language in languages" value="{{language.Id}}">{{language.Name}}</option>
</select>
</div>
I faced this same issue of ng-show not working in Internet Explorer.
The official ngShow AngularJS documentation mentions about this, and provides a few workarounds for this.
(I'll copy-paste the text mentioned in that link, in case that link has expired or is not working for some reason)
When using ngShow and / or ngHide to toggle between elements, it
can happen that both the element to show and the element to hide are
visible for a very short time.
This usually happens when the ngAnimate module is included, but no
actual animations are defined for ngShow / ngHide. Internet
Explorer is affected more often than other browsers.
There are several way to mitigate this problem:
Disable animations on the affected elements.
Use ngIf or ngSwitch instead of ngShow / ngHide.
Use the special CSS selector ng-hide.ng-hide-animate to set {display: none} or similar on the affected elements.
Use ng-class="{'ng-hide': expression} instead of instead of ngShow / ngHide.
Define an animation on the affected elements.
The second suggestion (replacing ng-show with ng-if) worked for me. So in your case, you could consider using this -
<div id="div1" ng-if="!loadingData">
<!--Some markup here-->
</div>
<div id="loadingMessage" ng-if="loadingData">
Loading...
</div>