I have included Google widget in my page, but I want to increase the height and width of the dropdown box. How can I change this with CSS?
Here is my Google Translate widget code:
<html lang="en-US">
<body>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Try adding your styles as below for the class goog-te-combo, and include this in your css.
Sample working code here.
.goog-te-combo {
width: 200px;
height: 50px;
font-size: 20px;
}
Related
1.Ace editor is strong but not well documented. I use it as my SQL editor but the autocompletion comes in lower case, I edited the mode-sql.js keywords into uppercase but doesn't work, where I can change this?
2.In the future, I also want to read my db files and generate a list of the dbs, tables and so on and I want them in the autocompletion schema, which part of ace should I concentrate?
Currently I have:
<!DOCTYPE html>
<html>
<body>
<div id="editor" style="height: 500px; width: 800px">hahaha</div>
<div id="commandline" style="position: absolute; bottom: 10px; height: 20px; width: 800px;"></div>
</body>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/sql");
editor.setTheme("ace/theme/tomorrow");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>
</html>
I have change the webpage should display form Right to left for arabic and Left to write for English with Layout Change.
When I have use Google translate it will replace the Content in the same place with particular Language.
For arabic the letter should start from Rightto left, How could do that.
AnyPlugins for Javascript without change the markup.
help will be appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Google Translation</title>
</head>
<body>
<div id="google_translate_element" style="display: none">
</div>
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true, autoDisplay: false }, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div style="border:0px dotted #ccc;padding:3px 3px 3px 0px;background-color:none;margin:7px 0 7px 0;">
</div>
<h1> Site Is Down ,Under Development Reach you soon</h1>
</body>
</html>
problem See the Screencast
Demo:http://recordit.co/TsVwSYJDxk
I need the output like this:
Demo: http://recordit.co/4TcwtDPQQf
Try this. What it does is detect when the dropdown changes, get the language it changed to, and then modify the style of the text to be left to right or right to left depending on the language selected.
<!DOCTYPE html>
<html>
<head>
<title>Google Translation</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true, autoDisplay: false }, 'google_translate_element');
$('.goog-te-menu-value').on('DOMSubtreeModified', 'span', function(){
language = $(".goog-te-menu-value span").html();
if (language == "Arabic"){
$('#theContent').css('direction', 'rtl');
}
else{
$('#theContent').css('direction', 'ltr');
};
});
};
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="theContent">
<div id="google_translate_element" ></div>
<div style="border:0px dotted #ccc;padding:3px 3px 3px 0px;background-color:none;margin:7px 0 7px 0;"></div>
<h1> Site Is Down ,Under Development Reach you soon</h1>
</div>
</body>
</html>
Can anyone suggest me a solution please? I've been trying half an hour to get jQuery ready and working for my Visual Studio but it does not work. I can't really be specific because i also don't know why.
<script>
$(document).ready(function () {
$("button").click(function () {
$("#square").animate({ left: '500px' }, slow);
});
});
</script>
<style>
#square{
border: solid; border-color: aqua; border-width: 1px; background-color: skyblue; width: 125px; height: 125px; text-align:center;
}
</style>
<body>
<div id="square">Focus on me!</div>
<div> <button>Click me</button> </div>
You have to add jquery to your page. You can add jQuery in two ways :
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
The jQuery library is a single JavaScript file, and you reference it with the HTML tag :
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
And for CDN :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
then write your code :
$(document).ready(function(){
alert("Hello there!")
});
Add this piece of code above the closing body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Now you have successfully added jQuery!
The JSTween library doesn't seem to perform a simple animation pulled from the library's tutorial. Using the following code, the alert box will show up after the allotted 1 second duration, but no animation will take place.
I must have set up the library wrong somehow, but I can't see the problem.
<html>
<head>
<style type="text/css">
#box
{
width: 16px;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jstween-1.1.js" ></script>
<script type="text/javascript" src="jstween-1.1.min.js" ></script>
<script type="text/javascript">
function animate()
{
$('#box').tween({
width:{
start: 16,
stop: 200,
time: 0,
units: 'px',
duration: 1,
effect:'easeInOut',
onStop: function(){ alert( 'Done!' ); }
}
}).play();
}
</script>
</head>
<body>
<div id="box">
<img src="image.png" onClick="animate()" />
</div>
</body>
</html>
Additional info: using Safari on 10.7.5. Code does not work in Chrome or Firefox either.
For anyone who may read this in the future, I discovered the problem: the CSS element #box needs position: relative; as an attribute, otherwise the browser will hold the element in place by default.
is there some code I can add to setup which will achieve this or is it a case of configuring files or making a new skin.
<head>
<script src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id='my-video'></div>
<script type='text/javascript'>
wplayer('my-video').setup
({
file: 'clash.mp4',
width: '480',
height: '270',
});
</script>
This is a bug that we are going to fix.