I want my TextArea to be able to support multiple CodeMirror modes. For now I want it to support json and xml. Is this possible?
Also, is it possible to automatically detect whether the user placed json or xml in the area?
Thanks.
CodeMirror actually has an example very close to what you are looking for here.
Here is a more specific example that does what you want.
Create a CodeMirror instance.
When the content changes we determine if we should switch modes.
The logic I put in for determining what mode you are in is very simplistic and can be refactored to support as robust a check as you deem appropriate for either mode. (Regex is good for complex checking if you want to get fancy...that is the only reason I used it even in my simple example) Currently, my example code just checks for any content where the first non-space character is "<" thus indicating xml mode. When deciding to switch back it just checks that the first non-space character is not "<" and that it is not blank (in case the user just deleted everything to start over with more xml).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Code Mirror Example</title>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
<script src="mode/xml/xml.js"></script>
<style type="text/css">.CodeMirror{border:1px solid black;}</style>
</head>
<body>
<div><span>Mode: </span><span id="modeType">JSON</span></div>
<textarea class='codeEditor'></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function determineCodeMirrorType(cm)
{
if (cm.getMode().name == 'javascript')
{
checkAndSwitchToXML(cm, cm.getValue());
}
else if (cm.getMode().name == 'xml')
{
checkAndSwitchToJSON(cm, cm.getValue());
}
}
function checkAndSwitchToXML(cm, val)
{
if (/^\s*</.test(val))
{
cm.setOption("mode", "xml");
$('#modeType').html("XML");
}
}
function checkAndSwitchToJSON(cm, val)
{
if (!/^\s*</.test(val) && val.match(/\S/))
{
cm.setOption("mode", "javascript");
$('#modeType').html("JSON");
}
}
function buildCMInstance(mode, value)
{
var cm = CodeMirror.fromTextArea($('.codeEditor')[0], {
mode:mode,
value:value,
lineNumbers:true,
onChange:function(cmInstance){
determineCodeMirrorType(cmInstance);
}
});
return cm;
}
$(document).ready(function(){
//mode changing demo: "http://codemirror.net/demo/changemode.html";
var cm = buildCMInstance("javascript");
});
</script>
</body>
</html>
Related
first of all I'm relatively new to javascript. So I'm sorry if my question is dumb. I would like to draw a molecule on my webiste by using this tool https://github.com/rdkit/rdkit-js. I also found an example here https://iwatobipen.wordpress.com/2021/12/29/create-desktop-chemoinformatics-application-with-js-chemoinformatics-rdkit-js/comment-page-1/. This example works in my case but when i try to invoke a function to draw a molecule as a .svg without using the example code, I fail. I get this error-message in my browser:
Uncaught ReferenceError: RDKit is not defined
at drawmol (results:21:15)
at results:33:5
In the following code example you can see the first case where it works and the second case were it doesn't. In both cases i use the same function.:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/#rdkit/rdkit/dist/RDKit_minimal.js"></script>
<title>Document</title>
<script>
window
.initRDKitModule()
.then(function (RDKit) {
console.log("RDKit version: " + RDKit.version());
window.RDKit = RDKit;
})
.catch(() => {
});
</script>
<script> var drawmol = function() {
var mol = RDKit.get_mol("C1=CC=C(C=C1)O"); // the string here is a string representation of chemical molecules, it could also be something like "CO" or "CCCCC", shouldnt be important
var svg = mol.get_svg();
document.getElementById("drawer").innerHTML = svg;
};
</script>
</head>
<body>
<button type='button' onclick='drawmol()'> <!-- this works -->
draw
</button><br>
<script>
// drawmol() //this doesnt work
</script>
<div id='drawer'></div>
</body>
</body>
</html>
Later i would like to use the module to dynamically make those images. I use django as the framework. In this case i tried to present a minimal example without the django stuff.
Thanks in advance for your effort!
You are calling drawmol() before RDKit is ready.
To fix this, place it after RDKit is loaded:
window
.initRDKitModule()
.then(function (RDKit) {
console.log("RDKit version: " + RDKit.version());
window.RDKit = RDKit;
//Now RDKit is loaded you can safely call drawmol()
drawmol();
})
.catch(() => {
});
I'm putting my hands in javascript for the first time and I can't seem to find a way to do what I need to do for a class.
We have a html file that defines a calculator and already works with mouse input.
The style and the functions are defined in separate .css and .js files. We're supposed to add keyboard-events in order to make the calculator accessible. I've been trying several options, especially from this page, but none seemed to work.
The problem is that I don't even know how to find out whether it's not working because my function is wrong or it's not working because I don't have the correct focus in my window...
I'll give an example of code below. I'll focus just on the "clear" functionality, which I'd like to assign to the backspace key (keycode=8).
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>MyCalc</title>
<link title="screen" media="screen" type="text/css" href="css/stylesheet.css" rel="stylesheet">
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div id="calculator">
<!-- Screen and clear key -->
<div class="top">
<span class="clear" onclick="clearScreen()">C</span>
<div class="screen"></div>
</div>
<div class="keys">
<!-- operators and other keys -->
</div>
</div>
</body>
</html>
where the clearScreen function is defined as:
function clearScreen() {
var input = document.querySelector('.screen');
input.innerHTML = '';
}
I'd appreciate if someone could tell me how to bind my backspace key to that clearScreen function. As I mentioned above, so far I tried to paste the following code in my .js file, but with no success:
function keyListener(event) {
event = event || window.event;
var key = event.key || event.which || event.keyCode;
var input = document.querySelector('.screen');
if (key === 8) { //this is for 'backspace'
input.innerHTML = '';
}
}
var el = window; //does this even work?
var eventName = 'keypress';
if (el.addEventListener) {
el.addEventListener('click', keyListener, false);
} else if (el.attachEvent) {
el.attachEvent('on' + eventName, keyListener);
}
NOTE: I'm using Google Chrome but I also did some tests in Mozilla and IE. I didn't notice any difference.
i am having a problem with jQuery. i am trying to create an even that is triggered by a single key pressed, but instead -some of it- is triggered by any key. don't understand why. i have done this a bunch of times and had no problem. all of a sudden this particular combination of code is acting weird. i don't understand. i have tried all sorts of experiments on it to figure it out. the problem is very specific and consistent on multiple browsers. please help! here is the link to the page. http://www.lyliansill.com/test.html>
to see what i am talking about press 'a' and it works like it should. reload and press any other keys and half of the event is still triggered.
<!DOCTYPE html PUBLIC "-//W3C/DTD/ XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml1/dtd/xhtml1-strict.dtd">
<!-- This file is on level 02 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<style type="text/css">
.hidden
{
display: none;
}
.select
{
color:#cc0000;
}
</style>
</head>
<body>
<h1 class="test hidden">Test</h1>
<script type="text/javascript" src="playground/libraries/jquery.js">
</script>
<script type="text/javascript">
function showIt()
{
$(".showIt").show();
}
$(document).keypress
(
function(e)
{
if (e.which === 97)
$(".test").addClass("select"); // this line works like it should
$(".test").addClass("showIt"); // these two lines are activated...
showIt(); // ...by pressing any key! why??
}
);
</script>
</body>
</html>
This is why you should make sure to use brackets, lets look at the code:
if (e.which === 97)
$(".test").addClass("select"); // this line works like it should
$(".test").addClass("showIt"); // these two lines are activated...
showIt(); // ...by pressing any key! why??
Notice the if statements has no brackets: if(){ ... }, so the line under is is only executed if that if-statement is true, but the rest is not in the if statement so:
$(".test").addClass("showIt"); // these two lines are activated...
showIt(); // ...by pressing any key! why??
Always runs. To fix this add brackets:
if (e.which === 97) {
$(".test").addClass("select"); // this line works like it should
$(".test").addClass("showIt"); // these two lines are activated...
showIt(); // ...by pressing any key! why??
}
here's how to fix it (Add curly braces):
function(e)
{
if (e.which === 97) {
$(".test").addClass("select"); // this line works like it should
$(".test").addClass("showIt"); // these two lines are activated...
showIt();
} // ...by pressing any key! why??
}
I'm a beginner with JQuery and I was trying to create a button that dynamically changes the colors defined in the CSS depending on what color it is right now (just switch between blue / red) and also change the text on the button.
The .draggable() part executes just fine and so does the first and last console.log, so everything but the part within the click event handler works ... but why?
Relevant html code:
<!DOCTYPE html>
<html>
<head>
<title>Meine Website</title>
<meta charset="utf-8">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
type="text/javascript">
</script>
<script src="home_jquery.js"></script>
<script src="home_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="home_style_blau.css">
</head>
<body>
<input type="button" id="farbwechsel_button" value="Rot" />
/* rest of html (taschenrechner_box, etc.) */
</body>
Here's the jQuery part:
var blau = true;
$(document).ready(function () {
$('#taschenrechner_box').draggable();
console.log("test1");
$('#farbwechsel_button').click(function() {
console.log("test2");
if (blau == true) {
console.log("blau = " + blau);
$('body').css({"background-color": "8b0000"});
$('#farbwechsel_button').value = "Blau";
blau = false;
}
else {
console.log("blau = " + blau);
$('body').css({"background-color": "lightsteelblue"});
$('#farbwechsel_button').value = "Rot";
blau = true;
}
console.log("test3");
})
console.log("test4");
});
In your HTML you have:
<input type="button" id="farbwechsel_button" value="Rot" />
But in your JS you refer to
$('#farbwechel_button').click(function() {
Note the forgotten s in your JS. So the JS should be:
$('#farbwechsel_button').click(function() {
Edit: you've forgotten the s in al your referrals to the button. Don't forget to add it everywhere. You've also forgotten a ; just before the last console.log() function.
Edit 2: Here's a Fiddle with a working example. It's pretty much self explanatory. In this case you preferably should make use of classes which you toggle on pressing the button.
For the following example, how would I start the page off by hiding the 'divToToggle' DIV as it is currently showing on default? I do not want to use 'display:none;' outside of the script for accessibility reasons. How do you hide the 'divToToggle' within the script on startup?
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript hide and show toggle</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<script>
function toggleAndChangeText() {
$('#divToToggle').toggle();
if ($('#divToToggle').css('display') == 'none') {
$('#aTag').html('[+] Show text');
}
else {
$('#aTag').html('[-] Hide text');
}
}
</script>
<br>
<a id="aTag" href="javascript:toggleAndChangeText();">[-] Hide text</A>
<div id="divToToggle">Content that will be shown or hidden.</div>
</body>
</html>
Just use the hide function inside a document.ready function
$(function(){
$('#divToToggle').hide();
});
Just use jQuery, since you're already using it (and this way doesn't prevent non-JS users from seeing the element):
function toggleAndChangeText() {
$('#divToToggle').toggle();
if ($('#divToToggle').css('display') == 'none') {
$('#aTag').html('[+] Show text');
}
else {
$('#aTag').html('[-] Hide text');
}
}
$('#divToToggle').hide();
// the rest of your script(s)...
Also, a minor update to your toggle function:
function toggleAndChangeText() {
// because you're accessing this element more than once,
// it should be cached to save future DOM look-ups
var divToToggle = $('#divToToggle');
divToToggle.toggle();
// You're not changing the HTML, just the text, so use the
// appropriate method (though it's a *minor* change)
$('#aTag').text(function() {
// if the element is visible change the text to
// '...hide...'; if not, change the text to '...show...'
return divToToggle.is(':visible') ? '[-] Hide text' : '[+] Show Text';
});
}
References:
hide().
is().
text().
:visible selector.