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.
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'm struggling trying to get a link to pop up in in the Dropbox chooser drop-in app. I'm using the javascript method and inserting into an html page. The dropbox chooser button shows up, and I'm able to select a file from the dropbox pop-up window, but the result is just a green checkmark and NO link like in the demo (I've tried both the direct and preview method). I've been struggling with this for a few hours. Anyone see anything wrong, or have a good code snipeet they want to share?
Here's my code:
<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="XXXXXX"></script>
<!-- Replace data-app-key with yours --> <script type="text/javascript">
// add an event listener to a Chooser button
document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
function(e) {
alert("Here's the chosen file: " + e.files[0].link)
window.location.href = 'e.files[0].link';
}, false);
</script>
<input data-link-type="direct" id="db-chooser" name="selected-file" type="dropbox-chooser" />
<div id="link-div" style="display: none">Link:</div>
<script type="text/javascript">
document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
function(e) {
var link = document.getElementById("link");
link.textContent = link.href = e.files[0].link;
document.getElementById("link-div").style.display = "block";
}, false);
</script>
I see two issues in the above code.
The first script references db-chooser before it's actually on the page, so that may not be working at all.
The second script looks for an element called link, but I think you mean link-div.
Finally, you might want to update to the latest version of dropins.js, just because it's the latest. :-) The input tag version has gone away, and instead you can use createChooseButton. Here's a complete working example using the latest version:
<!doctype html>
<html>
<head>
<script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="XXXXXX"></script>
</head>
<body>
<div id="container"></div>
<a id="link"></a>
<script>
var button = Dropbox.createChooseButton({
success: function(files) {
var linkTag = document.getElementById('link');
linkTag.href = files[0].link;
linkTag.textContent = files[0].link;
},
linkType: 'direct'
});
document.getElementById('container').appendChild(button);
</script>
</body>
</html>
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>
I am trying to add gradient on only .link.box.gradient but in ie7 it add on .link.box.gradient and .style.box.gradient
<!DOCTYPE html>
<html lang="sv">
<head>
<title></title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script>
jQuery(function ($) {
$('head').append("<style>.link.box{height:100px;width:100px;}.link.box.gradient{filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#ffffff');}</style>");
});
</script>
</head>
<body>
<div class="style box gradient">Gradient (style-tag)</div>
<div class="link box gradient">Gradient (link-tag)</div>
</body>
</html>
You can see here too, http://jsfiddle.net/Zhvpy/
One strange thing is when i move out .link.box{height:100px;width:100px;} from javascript as you can see here http://jsfiddle.net/Zhvpy/1 it seems to work, but I dont want to move out.
Why is it like this? How can I fix this bug?
removed original incorrect answer
EDIT 1
Odd - decided it might be the way older versions of IE handle certain elements (like <script />) so tried a non-jQuery solution.
Seems to work!
EDIT 2
Added this to your full script - outputs different results which are more in line with what IE8 outputs
function appendStyle(element, cssObj) {
//$('#a').append($('<span/>').text(cssObjToText(cssObj)));
if ($.browser.version == 7) {
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
rules = document.createTextNode(cssObjToText(cssObj));
style.type = 'text/css';
head.appendChild(style);
style.styleSheet.cssText = rules.nodeValue;
}
else {
element.after('<style class="css-finalized">' + cssObjToText(cssObj) + '</style>');
}
}