How we set Flags icon in google translator in my website? - javascript

function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'ar,de,en,nl,ru',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
<script src="https://translate.google.com/translate_a/element.js"></script>
<div id="google_translate_element"></div>
I want to show flags in google translater with language text?

Related

How to include external javascript [StatCounter] in a Vue Nuxt 3 project?

I need to include the following code in a Nuxt 3 project but I can't seem to get it to work:
<script type="text/javascript">
var sc_project=XXXXXXXX;
var sc_invisible=1;
var sc_security="XXXXXXXX";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/"
target="_blank"><img class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->
In Vue (without Nuxt) there is/was an index.html page that I used to place this code in, but there isn't an index.html file in a Nuxt 3 project anymore.
useHead()
you can use this in your app.vue file's script:
useHead({
script: [
{ src: "https://www.statcounter.com/counter/counter.js", body: true },
{
children:
"var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security='XXXXXXXX'; ",
body: true,
},
],
noscript: [
{
children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
body: true,
},
],
});
Learn more: https://nuxt.com/docs/getting-started/seo-meta#components
or
app config
use this in your nuxt.config.ts file:
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: { dir: "ltr", lang: "en" },
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [
{ src: "https://www.statcounter.com/counter/counter.js", body: true },
{
children: "var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security='XXXXXXXX'; ",
body: true,
},
],
noscript: [
{
children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
body: true,
},
],
},
},
Learn more: https://nuxt.com/docs/api/configuration/nuxt-config#head
Components
use <NoScript> and <Script> components in your template:
<template>
<Script :body="true">
var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security="XXXXXXXX";
</Script>
<Script
type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
:async="true"
></Script>
<NoScript :body="true">
<div class="statcounter">
<a
title="Web Analytics Made Easy - Statcounter"
href="https://statcounter.com/"
target="_blank"
><img
class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"
/></a>
</div>
</NoScript>
</template>
Learn more: https://nuxt.com/docs/getting-started/seo-meta#body-tags
the result will be this :

how make different regions and lang in nuxt.js with i18n

I need multy-regions(different content and pages at regions) and languages. I try use i18n, but i have alot problems with it.
I need structure like this:
/* (default en-EU)
/en-EU/*
/en-US/*
my nuxt.config.js:
seo: true,
parsePages: false,
strategy: 'prefix_and_default',
pages: {
fees: {
'en-US': false,
},
},
locales: [
{
code: 'en-US',
iso: 'en-us',
file: 'en-us.json',
},
{
code: 'en-EU',
iso: 'en-eu',
file: 'en-eu.json',
},
],
defaultLocale: 'en-EU',
langDir: 'locales/',
lazy: true,
and in pages I render my components by name + currentLocale
but i have problems with meta and redirects
when I on page /fees and use landSwitcher it change lang, but not change content because I haven't en-US/fees page(and it not redirect to 404)
<link data-n-head="ssr" data-hid="i18n-alt-en" rel="alternate" href="https://localhost:5050/en-EU/fees" hreflang="en">
<link data-n-head="ssr" data-hid="i18n-alt-en-us" rel="alternate" href="https://localhost:5050/en-EU/fees" hreflang="en-us">
<link data-n-head="ssr" data-hid="i18n-alt-en-eu" rel="alternate" href="https://localhost:5050/fees" hreflang="en-eu">
wtf where he find en? and why it have en-US version? (in config false for this page)
it generate me <html lang="en-eu" /> but its now valid, because EU is not region code

How can configure MathJax to recognize textrm{} in equation when using textcolor?

I'm trying to make an HTML page from LaTEX document that recently achieve it, I used the following mathjax, script configuration, after the head tag:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { fonts: ["TeX"] }
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
styles: {".MathJax": {color: "#FF0000 ! important"}}
}
});
MathJax.Hub.Queue(
["resetEquationNumbers",MathJax.InputJax.TeX],
["PreProcess",MathJax.Hub],
["Reprocess",MathJax.Hub]
);
</script>
When I try to write the following equation:
\[
\det A=|A|=\left\{
\begin{array}{ll}
-\textrm{fixation d'une \textcolor{red}{ligne:}} i=\color{red}{p} \Rightarrow |A|=(-1)^{\color{red}{p}+j}\Delta_{\color{red}{p}j}\\
-\textrm{fixation d'une colonne: } j=\color{red}{p} \Rightarrow |A|=(-1)^{\color{red}{p}+i}\Delta_{i\color{red}{p}}
\end{array}
\right.
\]
The command textcolor{red} doesn't work. What can I do it with MathJax to configure it in order to get a colorful text in equation?
This is the result of my compilation:
As per the documentation, MathJax does does not focus on textmode and only allows the following within its text-mode macros (\text{} etc): $ for re-entering math mode, \ref and \eqref.
So there is no way to get anything like \textcolor inside \text to work.
However, you can wrap \color around \text to color the text and thus you could define a custom macro \textwithcolor{red}{some text mode}, e.g., by using $\require{color}\newcommand{\textwithColor}[2]{\color{#1}{\text{#2}}} \textwithColor{red}{halleo}$.
You would still need to drop out of text mode to use it.
FWIW, there is an open issue for MathJax v3 to reconsider macros within text mode.

Uncaught TypeError: Cannot read property 'regional' of undefined?

I am using jQuery UI Calender for French Language.
But unfortunately I see the below error not sure if I am missing some thing.
Please advice.
Uncaught TypeError: Cannot read property 'regional' of undefined
JS :
/**
French initialisation for the jQuery UI date picker plugin.
**/
/* Written by Keith Wood (kbwood{at}iinet.com.au),
Stéphane Nahmani (sholby#sholby.net),
Stéphane Raimbault <stephane.raimbault#gmail.com> */
jQuery(function($){
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin',
'Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['fr']);
});
Thanks!!
I'm guessing you forgot to include the localisation file:
<script src="https://jquery-ui.googlecode.com/svn-history/r3982/trunk/ui/i18n/jquery.ui.datepicker-nl.js"></script>
Source :Datepicker jQuery UI ... set language
Be sure to do not use ASYNC on script tags, because will fire this error.
Wrong:
<SCRIPT SRC="/includes/js/jquery/jquery-ui.js" TYPE="text/javascript" ASYNC></SCRIPT>
<SCRIPT SRC="/includes/js/jquery/jquery-datepicker-ptBR.js" TYPE="text/javascript" ASYNC></SCRIPT>
Right:
<SCRIPT SRC="/includes/js/jquery/jquery-ui.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT SRC="/includes/js/jquery/jquery-datepicker-ptBR.js" TYPE="text/javascript"></SCRIPT>

Google Translate: TranslateElement is not a function

i was trying adding Google translate dropdown to a website.
For the sake of simplicity, i added all the code in the same place of the page.
I have added this code (slightly beautified):
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'it',
includedLanguages: 'de,en,es,fr,it',
gaTrack: true,
gaId: 'UA-XXXXXXXX-X'
},
'google_translate_element'
);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
On the Chrome console i receive this error:
Uncaught TypeError: google.translate.TranslateElement is not a function
This error code doesn't show up with a google search, and i don't know what caused it.
Any help is really appreciated...
Thanks!
You should add google script before your own.
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'it',
includedLanguages: 'de,en,es,fr,it',
gaTrack: true,
gaId: 'UA-XXXXXXXX-X'
},
'google_translate_element'
);
}
</script>

Categories