In ace editor, how to change the popup into uppercase - javascript

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>

Related

Use this script without RequireJs (or any module loader)

I'm not a JavaScript developer, and I'm struggling to do a little experiment as a side project.
I'm trying to use this script without RequireJs.
https://github.com/xxmuaddib/lottie-colorify/blob/master/examples/example1/index.html
I've been trying for a while and checked StackOverflow, but I have very little knowledge of JavaScript.
Here's what I got so far:
<html style="width: 100%; height: 100%">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.3/lottie.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
<script src="../../lib/umd/index.js"></script>
</head>
<body style="background-color: #ccc; margin: 0px; height: 100%; font-family: sans-serif; font-size: 10px">
<div style="width: 100%; height: 100%; background-color: #333" id="bodymovin"></div>
<script>
//requirejs(['../../lib/umd/index'], function (lc) {"
$.getJSON('https://assets6.lottiefiles.com/packages/lf20_guwqiaxe.json', function (data) {
var animData = {
wrapper: document.getElementById('bodymovin'),
animType: 'html',
loop: true,
prerender: true,
autoplay: true,
animationData: lc.flatten('#ffff00', data),
};
var anim = bodymovin.loadAnimation(animData);
});
//});
</script>
</body>
</html>
I removed the CDN for RequiredJS and its implementation and linked the script manually between <script> tags.
But now the variable lc is not defined.
requirejs load the script for this file
https://github.com/xxmuaddib/lottie-colorify/blob/master/lib/umd/index.js
so if you'll comment this library just remove its callback return "lc" variable
line that throws the error should be like that
animationData: flatten('#ffff00', data), //you already imported the lib/umd/index.js file which has this function

Change Google Translate widget height width

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;
}

What is the procedure to using jQuery UI?

I downloaded everything from this link (version 1.12.1).
After that I unzipped everything. So here's the thing, I have Wampserver downloaded and I'm working on a project in PHP with it. I dragged all of those items to the folder where my other codes are located.
I'm not good at Javascript or jQuery, but I want to use its "draggable" UI to make a moving "button"/image on a horizontal axis (so the person can agree or disagree). So, basically, how do I do that? Here's what I'm trying:
<script src="jQuery UI/jquery-ui.js"></script>
<script src="jQuery UI/jquery-ui.css"></script>
<script src="jQuery UI/jquery-ui.min.js"></script>
<script src="jQuery UI/jquery-ui.min.css"></script>
<script src="jQuery UI/jquery-ui.structure.css"></script>
<script src="jQuery UI/jquery-ui.structure.min.css"></script>
<script src="jQuery UI/jquery-ui.theme.css"></script>
<script src="jQuery UI/jquery-ui.theme.min.css"></script>
<script src="jQuery UI/external/jquery/jquery.js"></script>
<style>
#draggable {
width: 200px;
height: 200px;
padding: 1px;
background-color: green;
}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({
axis: "x";
});
});
</script>
<br>
<div id="draggable" class="ui-widget-content">
<p>Text</p>
</div>
Could you please help by elaborating step-by-step for me?
Thanks in advance!

Copy text from Αce editor to clipboard

I am trying to copy the text from inside an Ace Editor box into my local clipboard, using the pure JS method described here. However, when I click my copy button, it will throw me an error:
"TypeError: copyTextarea.select is not a function"
and the text will not copy to my clipboard. Is there a way to do this somehow (either pure JS or jQuery)? My code is as follows (simplified but should be enough):
$('#clipboard').on('click', function() {
var copyTextarea = document.querySelector('#result-box');
copyTextarea.select();
document.execCommand('copy');
});
<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;"><!DOCTYPE html>
<html>
</html></div>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("result-box");
editor.getSession().setMode("ace/mode/html");
editor.setReadOnly(true);
editor.setShowPrintMargin(false);
editor.getSession().setUseWrapMode(true);
</script>
P.S.: There is another error thrown about some worker and whatnot concerning Ace, if anyone knows how to fix that, too, comment below. Thanks in advance!
call focus and selectAll on the editor, it works on most of modern browsers
$('#clipboard').on('click', function() {
var sel = editor.selection.toJSON(); // save selection
editor.selectAll();
editor.focus();
document.execCommand('copy');
editor.selection.fromJSON(sel); // restore selection
});
<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;"><!DOCTYPE html>
<html>
</html></div>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("result-box");
editor.getSession().setMode("ace/mode/html");
editor.setReadOnly(true);
editor.setShowPrintMargin(false);
editor.getSession().setUseWrapMode(true);
</script>
The select method should be available in the textarea as a native method, and you're using it in a div (which is what ace requires to work).
Retrieve the value from the editor, set that value to a textarea and then copy the content using your method.
You can retrieve the text of Ace using getValue :
<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;"><!DOCTYPE html>
<html>
</html></div>
<textarea id="clipboard-content"></textarea>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("result-box");
editor.getSession().setMode("ace/mode/html");
editor.setReadOnly(true);
editor.setShowPrintMargin(false);
editor.getSession().setUseWrapMode(true);
$('#clipboard').on('click', function() {
var copyTextarea = document.querySelector('#clipboard-content');
copyTextarea.value = editor.getValue();
copyTextarea.select();
document.execCommand('copy');
// Reset textarea
copyTextarea.value = "";
});
</script>
However note that the method that you're using to copy the text, will not work if you hide the textarea.
I recommend you to use a plugin instead, read the following article to see possible solutions with pure javascript and fallbacks with flash (using js).

JSTween library broken

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.

Categories