A freshman here that's stuck and confused on an assignment..
I'm surely doing it wrong because I get error on keyPressed as event is not define, with the code below. How do I define event in this instances?...
function keyPressed()
{ console.log("keyPressed");
// When any key is pressed:
// - Make RestrictedSafeComb2 equal to the value of 'keyCode'
event.keyCode = 'enter'
RestrictedSafeComb2 = event.keyCode;
}
First of all keypress event is deprecated. I am not sure what the nature of your assignment is, but you might go ahead with keydown instead.
Also keydown is the event you want your code to watch for and use its properties. I presume KeyboardEvent.code is what you want.
More details on MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
document.addEventListener('keypress', keyPressed);
function keyPressed(e) {
console.log (e.code)
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
Related
Hi I have a problem that I can't quite solve. I'm a total noob with HTML/Javascript, so I'm not sure how to proceed. The instructions are in the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q2</title>
<script type="text/javascript" src="342.js"></script>
<script type="text/javascript">
function swap() {
if (Math.random()>.5){
document.getElementById("c").style.display = 'none';
document.getElementById("f").src = "images/f.jpg";
} else {
document.getElementById("d").style.display = 'none';
document.getElementById("f").src = "images/f.jpg";
}
}
</script>
</head>
<body>
<p>Add code so that clicking the button changes either the src "c.jpg" or "d.jpg" to "f.jpg" The choice of which should be replaced
should be determined randomly.</p>
<img src="images/c.jpg" id="c"><br>
<img src="images/d.jpg" id="d">
<br><br>
<button type="button" onclick="swap()">OK</button>
</body>
</html>
The original problem had everything but the scripts. When I try this, I'm able to get the image c or d to disappear, but image f doesn't appear. I don't know how to get the image to show. getELementById won't work because I haven't made an id, but how do I do that without having image f showing? Any help is appreciated.
Seems you're missing html
Try add f html element for work:
<img src="images/f.jpg" id="f">
The p tag in the html is talking about c.jpg, d.jpg and e.jpg.
Its not talking about f.jpg, you may want to check that
with the assumption that it is e.jpg and not "f.jpb". And also assuming that you have e.jpg in your images folder. Below code will work fine (small modification in the script)
function swap() {
if (Math.random()>.5){
// document.getElementById("c").style.display = 'none';
document.getElementById("c").src = "images/e.jpg";
} else {
// document.getElementById("d").style.display = 'none';
document.getElementById("d").src = "images/e.jpg";
}
}
please help me with this.
I am using ck editor 4.
The data is required in a particular font style, font size, and font color.
The user will get the data from an external source and the user has to paste the data in the CKeditor.
so whenever the user will paste the data, he will have to apply style, size, and color. I want to automate this so that whenever some data is pasted in the CKeditor these styles are auto-applied.
is there any way to automate this? If yes, how?
I looked into the API docs and searched on google but couldn't find the answers.
Look at CKEditor's Clipboard Integration.
You can customize the pasting of data on the paste event.
Here's a simple example of pasting text with bold and italic properties:
CKEDITOR.replace('editor', {
}).on('paste', function (evt) {
evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
});
Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor: Customized Pasting</title>
<script src="./node_modules/ckeditor4/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" id="editor" rows="10" cols="80">
</textarea>
<script>
CKEDITOR.replace('editor', {
}).on('paste', function (evt) {
evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
});
</script>
</body>
</html>
Demo:
You can work on it further according to your own use case and customize it according to some existing styles or maybe write a custom plugin only to custom-paste your particular data to avoid overriding the default pasting behavior.
you can customize the content when on paste event is occurred, use this code
CKEDITOR.replace('my_editor', {
}).on('paste', function (event) {
event.data.dataValue = '<b><i>' + event.data.dataValue + '</i></b>';
});
I've just started becoming acquainted with qunit and I'm trying to get through the official introduction.
There are quite a lot of questions arising and I can't find anything on their documentation about qunit or elsewhere on the web.
What does "function (assert)" do? Assert is a category in qunit for several assertion methods, yet it isn't a method by itself. So if I put "assert" into the parameter of a function, what happens? Are all assertion methods associated with "assert" executed in the test?
https://qunitjs.com/intro/
Here's one piece of code where this syntax is used
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Refactored date examples</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.5.0.css">
<script src="https://code.jquery.com/qunit/qunit-2.5.0.js"></script>
<script src="prettydate.js"></script>
<script>
QUnit.test("prettydate basics", function( assert ) {
var now = "2008/01/28 22:25:00";
assert.equal(prettyDate(now, "2008/01/28 22:24:30"), "just now");
assert.equal(prettyDate(now, "2008/01/28 22:23:30"), "1 minute ago");
assert.equal(prettyDate(now, "2008/01/28 21:23:30"), "1 hour ago");
assert.equal(prettyDate(now, "2008/01/27 22:23:30"), "Yesterday");
assert.equal(prettyDate(now, "2008/01/26 22:23:30"), "2 days ago");
assert.equal(prettyDate(now, "2007/01/26 22:23:30"), undefined);
});
</script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>
The full line is:
QUnit.test("prettydate basics", function( assert ) {
This calls the function QUnit.test, and you're passing it a callback. That callback takes one parameter. QUnit.test will pass an object as the first argument to your callback, which becomes your assert parameter. That object has various methods for asserting things.
It's basically injecting the assertion object into your code so you can use it to make assertions.
Roughly QUnit.test is implemented like this:
QUnit.test = function (name, callback) {
const assert = {
equal: function () { ... },
...
};
callback(assert);
};
Struggling on writing the testcases on click,toggle,slideUp,fade events.
How do I write jasmine test cases to check if div is clicked or not and the slideUp and down and toggle events. Is there a provision in jasmine to test them.
Have listed my code having click test case for reference.
SpecRunner.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib_jasmine/jasmine- 2.3.4/jasmine_favicon.png">
<link rel="stylesheet" href="lib_jasmine/jasmine-2.3.4/jasmine.css">
<script src="scripts/jquery.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/jasmine.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/jasmine-html.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/boot.js"></script>
<script src="lib_jasmine/jasmine-2.3.4/jasmine-jquery.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="js/eigMain.js"></script>
<script type="text/javascript" src="js/sinon.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="js/specEig.js"></script>
</head>
<body>
</body>
</html>
js file for reference
$('#screenPane').click(function(e){
$('#Panel,.FixedHeader').toggleClass('fullscreen');
$('#eIcon').toggle();
$('#cIcon').toggle();
$(".Col").toggle();
$('html, body').animate({scrollTop: $('#total-results').offset().top}, 800);
$('#nav_up').fadeIn('slow');
$('#nav_down').hide();
});
Spec.js file having click event test case on it. It gives me ERROR : Expected event [object Object] to have been triggered on [object Object]. Also, toggle test case fails to execute.
it ("should invoke the screenPane click event.", function() {
spyOnEvent($('#screenPane'), 'click');
$('#screenPane').click();
expect('click').toHaveBeenTriggeredOn($('#screenPane'));
});
Please help
While most tags accept or react to a click event, detecting it may prove difficult on the various platforms and browsers. You would probably be better checking to see if the CSS classes that toggle() deals with have been swapped in response to the click. For checking anything that is going to get moved around, simply check the starting X/Y coordinates and then compare them to the ones when the animation is finished and just check to see if they are different (so as to not create a brittle situation with strictly defined values.)
//Checking coordinates
it ("should invoke the screenPane click event.", function() {
var coords = $('screenPane').offset();
$('#screenPane').click();
var newCoords = $('screenPane').offset();
expect(newCoords).not.toEqual(coords);
});
//Checking classes
it ("should invoke the screenPane click event.", function() {
var classes = $('screenPane').val('class');
$('#screenPane').click();
var newClasses = $('screenPane').val('class');
expect(classes).not.toEqual(newClasses);
});
I was today seeking the net for information about textbox-validation, but even on Dojo-Homepage I couldn't get any useful information.
My problem: I've got a NumberSpinner, in which only numbers in steps of ten (10, 20, 30, ...) should be allowed. But I've got no idea how to set a validator for this. In the 'constraints'-statement there seems to be no possibility to do this. And I don't know how to use the validator-function so that the box shows me warning sign immediately when typing in somethin wrong.
Another question is how to check if any part of a form is not valid before sending it. Is there an attribute in every input/select-box like 'valid' to check them all at once?
Oh, one hint, I create all widgets programmatically.
Hopefully anyone out there can help me!!!
Best regards,
Robin
You can override the NumberSpinner's isValid() method. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>class</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/soria/soria.css" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.config.parseOnLoad = true;
dojo.addOnLoad(function() {
dojo.require('dijit.form.NumberSpinner');
dojo.require('dojo.parser');
dojo.addOnLoad(function() {
new dijit.form.NumberSpinner({
isValid: function(isFocused) {
var value = parseFloat(this.attr('value'));
if (isNaN(value) || (value % 10 != 0)) {
return false;
} else {
return true;
}
}
}, 'here');
});
});
</script>
</head>
<body class="soria">
<div id="here"></div>
</body>
</html>
dijit.form.NumberSpinner is derived from dijit.form.ValidationTextBox, and as such it would accept the same arguments (see dijit.form.ValidationTextBox docs and inline docs in its source code). Just write a regular expression (as a string) that can validate your input. Something like that should do the trick:
var box = new dijit.form.NumberSpinner({
regExpGen: function(){ return "\\d+0"; }
}, "my_node");
You can also use the delta/smallDelta attribute for this. See the example at Dojo Campus