- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3658
Just a short note to my self. To change caption of button declared in HTML like:
<button id="animationTwoStart">Click me</button>
Use JS like:
document.getElementById("animationTwoStart").innerHTML = "Clicked"
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3624
HTML:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="/index.css"> <script type="text/javascript" src="/index.js"></script> </head> <body> <div class="animation"></div> </body> </html>
JS:
var spritePosition,
imageLeft,
imageTop,
step;
window.onload = function () {
spritePosition = 100;
imageLeft = 0;
imageTop = 0;
step = 10;
window.setInterval (function () {
document.getElementsByClassName('animation')[0].style.backgroundPosition = spritePosition + "px 0px";
spritePosition = spritePosition + 108;
}, 100);
document.getElementsByTagName('html')[0].addEventListener("keydown", function(e){
if (e.keyCode == 38) { //up
imageTop = imageTop - step;
document.getElementsByClassName('animation')[0].style.top = imageTop + "px";
};
if (e.keyCode == 40) { //down
imageTop = imageTop + step;
document.getElementsByClassName('animation')[0].style.top = imageTop + "px";
};
if (e.keyCode == 37) { //left
imageLeft = imageLeft - step;
document.getElementsByClassName('animation')[0].style.left = imageLeft + "px";
};
if (e.keyCode == 39) { //right
imageLeft = imageLeft + step;
document.getElementsByClassName('animation')[0].style.left = imageLeft + "px";
};
}, false);
};
Things to notice in JS code are window.setInterval - with that we have infinite loop, and document.getElementsByTagName('html')[0].addEventListener("keydown", function(e){ - with that we are listening key events, so you can move image around page.
CSS:
.animation {
width: 102px;
height: 120px;
background-image: url("scottpilgrim_multiple.png");
background-position: 0px 0px;
position: absolute;
}
Sprite I have stolen from this web site, and example you can download from here.
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4133
Title taken from here.
Here is my example. HTML part I need just to execute javascript files, so it looks like this:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.1.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> test </body> </html>
index.js:
$.getScript("myScript.js", function() {
debugger;
alert("Load complete!");
myFunction();
});
myScript.js:
function myFunction() {
debugger;
alert("tfqseftr");
}
//@ sourceURL=myScript.js
Notice line //@ sourceURL=myScript.js, without that line when we debug from Chrome it looks like this:
With //@ sourceURL=myScript.js line will look like:
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3229
Check this code:
aTest = function () {
["a", "b", "c", "d"].forEach(function (event) {alert(event)} )
}
aTest();
After executing it, it will popup "a", "b", "c", "d"