I have a problem with a wordpress plugin that uses Google Translate to translate pages. It appears a h1 tag with the text "Original text" and I don't know how can I remove it.
I would like to remove the h1 tag, so I am not interested in CSS changes.
Thanks in advance to everyone.
Puts this javascript code in the footer.php, that remove the text in h1 "Original text"
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'es' }, 'google_translate_element');
var removePopup = document.getElementById('goog-gt-tt');
removePopup.parentNode.removeChild(removePopup);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Related
Is there a way how can I display top banner (marked red) always visible and never display bottom translate option?
Or opposite way. Show only bottom options with possibility to reset language choice.
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'en',
includedLanguages: 'ar',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
Thank you.
I have a component that uses teleport to , the test html doesn't seem to be working as expected. I can't find any documentation on this particular use. Here's my test:
describe('MetaHead', () => {
it('dynamic metadata tags contain custom text', () => {
let title = 'My Page';
let description = 'Some description about my page';
// This component uses Vue3's teleport to tag <head>
// we must modify wrapper to contain such tag
document.body.innerHTML = `
<head>
<div id="app"></div>
</head>
`
const wrapper = mount(MetaHead, {
attachTo: document.getElementById('app'),
props: {
title,
description
},
global:{
mocks: {
$route:{fullPath: 'full/path'}
}
}
})
expect(wrapper.html()).toContain(title)
expect(wrapper.html()).toContain(description)
})
})
and the minimal component looks like this:
<template>
<teleport to="head">
<title>{{title}}</title>
<meta property="og:site_name" :content="title">
<meta name="description" :content="description">
</teleport>
</template>
Am I missing something?
the problem here is wrapper.html() only returns HTML in your component - since you are teleporting outside your component, that markup won't show up when you call wrapper.html().
You have a few options. One would be making an assertion against document.body.outerHTML. Another would be using a neat trick with findComponent, I wrote about it here and posted a video about it here.
Another thing you could try that I just thought of (but have not tested) would be:
mount({
template: `
<div id="app" />
<MetaHead />
`,
components: { MetaHead }
})
I don't know if that will work, but worth a try.
I created a dojo dialog using the example . I work with maps in background. The problem is that when the dialog is appeared, the background is blocked and i can't use the map(the dialog with no underlaying). Is there any way to enable using background when the dialog is appeard on background?
You can do it with a little hack :
require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/domReady!"], function(Dialog, DialogUnderlay){
//just for the snippets to get the right styling
document.body.className = "tundra";
myDialog = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 300px"
});
myDialog2 = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 300px"
});
showDialog2 = function () {
myDialog2.show().then(function() {
DialogUnderlay.hide()
//little hack to avoid JS error when closing the dialog
DialogUnderlay._singleton.bgIframe = {destroy: function() {}}
});
}
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<button onclick="myDialog.show();">show with underlay</button>
<button onclick="showDialog2();">show without underlay</button>
I have a form page that I'm working on and the basic AngularJS structure is working. When the user selects a particular font, I want all page elements to change to that font. In my stylesheet, I am using the "*" selector but I can't figure out how to update that via Angular. I have attached the basic page structure code below (note that the page has more elements than this but I removed all but the H1 for this question). Any ideas?
<!doctype html>
<html ng-app="theapp">
<head>
<title>App</title>
<style type="text/css">
* {
font-family: sans-serif;
font-size: 12pt;
}
</style>
</head>
<body ng-controller="FormController as form">
<h1>Hello</h1>
<form name="theForm">
<select ng-model="font" ng-options="font.face for font in fonts"></select>
</form>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
(function () {
angular.module("theapp", [])
.controller("FormController", ["$scope", function ($scope) {
$scope.fonts = [
{ face: "sans-serif" },
{ face: "Arial" },
{ face: "Tahoma" },
{ face: "Trebuchet MS" },
{ face: "Verdana" },
{ face: "serif" },
{ face: "Times" },
{ face: "Georgia" },
{ face: "monospace" },
{ face: "Courier" }
];
$scope.font = $scope.fonts[0];
}]);
})();
</script>
</body>
</html>
You can use ng-style in your markup and link it to the scope.font variable.
Have a look at the docs: https://docs.angularjs.org/api/ng/directive/ngStyle
I haven't tried it, but you could add a div under the body such that <div ng-style="style"> and in your controller you do $scope.style = {"font-family": $scope.font}.
Add style="font-family:{{font.face}}" to the body tag.
I made a plunkr to demonstrate
Thank you [orange] and [nilsK] for your suggestions.
Both are good ideas but still don't do quite what I need.
In the end, I decided to just use jQuery to update the $("*").css() attribute.
(We're already using jQuery anyway so I'm not bringing in another JS library unnecessarily.)
This does exactly what I need and doesn't complicate the code.
Thanks again! :)
I've been researching ways to make JW player 5 responsive and have tried both CSS/HTML and jQuery examples to modify the video player, but haven't had any success. I'm using WordPress and am trying to add the code to the page using a raw .js module and page-specific css, if that makes a difference.
Here is the code:
<script type="text/javascript" src="http://www.360north.org/jwplayer5.9/jwplayer.js"></script>
<video id="mediaplayer" width="100%" height="100%" src="http://state.ak.tvwmedia.net:1935/ktoo-live/_definst_/360north/playlist.m3u8" type="video/mp4"></video>
<script type="text/javascript">
// <![CDATA[
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '640',
'height': '480',
'image': 'http://www.360north.org/wp-content/uploads/2014/04/SmallVideoPlayer1.jpg',
'modes': [{
type: "flash",
src: "http://www.360north.org/jwplayer5.9/player.swf",
config: {
file: "360north",
streamer: "rtmp://state.ak.tvwmedia.net/ktoo-live",
provider: "rtmp"
}
}, {
type: 'html5',
config: {
'file': 'http://state.ak.tvwmedia.net:1935/ktoo-live/_definst_/360north/playlist.m3u8',
'provider': 'video'
}
}]
});
// ]]>
This method can be used for the JW Player - http://webdesignerwall.com/tutorials/css-elastic-videos
Basically, the iframe method - "Elastic Object & Iframe Embedded Videos"
http://webdesignerwall.com/demo/elastic-videos/
This method works with JW5.
Here is another way to make JWplayer 5 responsive, without an iFrame, but you must add code tags around the embedding code or it won't work:
http://www.miracletutorials.com/how-to-make-jw-player-5-10-responsive/
I hope this helps?