First off, yes, I'm AWARE there's a much easier way to do this in jQuery, but I'm trying to learn how to do it by hand in Javascript to get a better understanding of the language.
I have a div that I want to slowly fade through many colors of the rainbow. Here's what I have so far:
<script type="text/javascript">
var bar = document.getElementById("workbar");
var x = 0;
bar.onclick = change;
function change() {
requestAnimationFrame(color);
}
function color() {
window.alert("color!");
bar.style.background = "hsl(" + x + ", 100%, 50%);";
if (x < 358) {
x++;
requestAnimationFrame(color);
}
else {
x = 0;
requestAnimationFrame(color);
}
}
</script>
I'm iterating through the first digit of the hsl color system, which will provide me with hundreds of color variations but not every single unnecessary color shade in the universe.
I click on it, and nothing happens. Now I know it's getting through to the color function because I put that alert box there and it went off. I also know it's looping through the color function because after you x out of the alert box another appears. So it must be a problem with the part where it assigns the color. Any ideas?
Remove the semicolon
"hsl(" + x + ", 100%, 50%);";
^
(function () {
var bar = document.getElementById("workbar"),
x = 0;
function color() {
bar.style.background = "hsl(" + x + ", 100%, 50%)";
x++;
if (x >= 358) {
x = 0;
}
requestAnimationFrame(color);
}
function change() {
requestAnimationFrame(color);
}
bar.addEventListener("click", change, false);
}());
<div id="workbar">Click Me</div>
Related
I'm doing simple ID validating html page with javascript. My idea is, whenever user enters a valid ID number, the text field of form changes its colour for few seconds and then revert back to normal.
the code
<script>
var abcArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
var IDweights = [7,3,1,0,7,3,1,7,3];
var valuesMap = new Map();
for(var i=0;i<26;i++){
valuesMap.set(abcArray[i],i+10);
}
validateID();
function validateID(){
var idNumber = document.forms.form.idnum.value.toUpperCase();
var sumOfValues = 0;
for(var x = 0; x < idNumber.length; x++){
if(x < 3){
sumOfValues += (valuesMap.get(idNumber.charAt(x))*IDweights[x]);
}
if(x > 3){
sumOfValues += (parseInt(idNumber.charAt(x))*IDweights[x]);
}
}
if(sumOfValues % 10 == idNumber[3]){
var y = document.getElementById("idnum");
y.style.animation = "anim 5s"; // when true change to green
} else {
var y = document.getElementById("idnum");
y.style.animation = "anim1 5s"; //change to red
}
}
the css part
#-webkit-keyframes anim {
0% {background:white;}
20% {background:green;}
100% {background:white;}
}
#-moz-keyframes anim {
0% {background:white;}
20% {background:green;}
100% {background:white;}
}
#-webkit-keyframes anim1 {
0% {background:white;}
20% {background:red;}
100% {background:white;}
}
#-moz-keyframes anim1 {
0% {background:white;}
20% {background:red;}
100% {background:white;}
}
It works but only once. When I click validate button again, then nothing happens. Only when I change ID number for the wrong one, then it works but only once as well, and then again to make it work you need to put the correct one... I am aware it's probably because I'm setting css properties once and thats it, the browser will not change them again if they're the same. But I can't think of proper solution because I'm new to JS and css. I searched for quite long and still didn't find any solution for my problem, partly because I don't really know how to specify it. I'll be grateful for your help.
PS. please only pure js and css - I'am not familiar with jquery yet
the problem is, if the element already has the style="anim1 5s" for example - setting it to that same value again will do nothing. You would need to remove that style, and then add it again.
Better still, when you add the style, add an animationend event listener to that element to remove that animation when the animation completes
function validateID() {
var doneAnimating = function(e) {
// remove the listener
this.removeEventListener('animationend', doneAnimating);
// remove the animate style
this.style.animate = '';
}
var idNumber = document.forms.form.idnum.value.toUpperCase();
var sumOfValues = 0;
for (var x = 0; x < idNumber.length; x++) {
if (x < 3) {
sumOfValues += (valuesMap.get(idNumber.charAt(x)) * IDweights[x]);
}
if (x > 3) {
sumOfValues += (parseInt(idNumber.charAt(x)) * IDweights[x]);
}
}
// moved outside of if/then to tidy up code
var y = document.getElementById("idnum");
// add the listener to the element
y.addEventListener('animationend', doneAnimating);
if (sumOfValues % 10 == idNumber[3]) {
y.style.animation = "anim 5s"; // when true change to green
} else {
y.style.animation = "anim1 5s"; //change to red
}
}
Alternatively, you could simply (outside of this code) add the animationend event listener once, and the doneAnimating can simply remove the animate style and not worry about removing the event listener - in fact you can put the event handler inline to make it very simple
// this is done once only - not sure where in your code you'd put it
document.getElementById("idnum").addEventListener('animationend', function(e) {
this.style.animate = '';
});
function validateID() {
var idNumber = document.forms.form.idnum.value.toUpperCase();
var sumOfValues = 0;
for (var x = 0; x < idNumber.length; x++) {
if (x < 3) {
sumOfValues += (valuesMap.get(idNumber.charAt(x)) * IDweights[x]);
}
if (x > 3) {
sumOfValues += (parseInt(idNumber.charAt(x)) * IDweights[x]);
}
}
// moved outside of if/then to tidy up code
var y = document.getElementById("idnum");
if (sumOfValues % 10 == idNumber[3]) {
y.style.animation = "anim 5s"; // when true change to green
} else {
y.style.animation = "anim1 5s"; //change to red
}
}
I have my code set up so that when the user clicks on the img, the box-shadow will increase. However, my code only increases the box-shadow once, and I don't really understand why. I guess it has something to do with .on(), but I'm not really sure why this happening. If anyone could provide some insight, I would be very appreciative.
var hshadow=10;
var vshadow=10;
function boostShadow() {
hshadow= hshadow + 5;
vshadow= vshadow + 5;
hshadow=hshadow.toString() + "px ";
vshadow=vshadow.toString() + "px ";
$("img").css("box-shadow",hshadow + vshadow +"5px #565656");
}
$("img").on("click",function () {
boostShadow();
});
The issue in your code is that you set the variables to strings when you add "px" to them and that prevents further addition to them in the next click. Try this below:
var hshadow = 10,
vshadow = 10;
function boostShadow(image) {
hshadow += 5;
vshadow += 5;
$(image).css("box-shadow",hshadow+"px " + vshadow+"px 5px #565656");
}
$("img").on("click",function () {
// We pass the clicked image as a variable so only
// that image's box-shadow is altered
boostShadow(this);
});
http://csdev.cegep-heritage.qc.ca/students/cguigue/primordialCasino/game.html
supposed to click on the spin button and it should start the wheel spinning as well as changed the text on the screen in my displayArea, though when i click spin nothing happens,
getting undefined type error on the following code and not sure as to why
$('#wheel').rotate({
angle: 0,
animateTo: 2520,
duration: 4000
});
it says it isn't a function... :S
also...
if(currentGame.place == 0 && cellText == 0)
{
currentGame.setBet(betAmount * 40);
}
function rouletteGame(num, even, col)
{
this.place = num;
this.isEven = even;
this.colour = col;
this.win = 0;
this.hasBet = false;
this.setBet = function(bet)
{
this.win += bet;
this.hasBet = true;
}
says currentGame.place is undefined
but im initializing it in a for loop and its calling my above function...
for (var i = 1; i < rouletteWheel.length; ++i)
{
place = i;
if(i % 2 == 1)
{
isEven = false;
}
else
{
isEven = true;
}
if( i = red[count])
{
colour = "red";
++count;
}
else
{
colour = "black";
}
rouletteWheel[i] = new rouletteGame(place, isEven, colour);
}// for ()
.rotate() is not a built-in JQuery plugin. You will need to download or link the plugin in order for it to work. Add the following in your element of the HTML:
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
and see if that helps. with the first part of your problem.
As for the second part, I'm not sure if Javascript works this way too (I think it does), but you should create the new roulette game outside of the loop, and only change the values inside. Otherwise you are only creating a new roulette game for use within the scope of the for loop, not outside.
May want to check the documentation for this, as I'm not 100% positive about it. I just know it's how most other languages work.
For universoty we had to "build" a xmas tree (svg) and use javascript to make the stars (ger stern(e)) rotate and the balls (ger (kugel(n)) change colors - one star had to be a shooting star. Everything work full points... but one penalty point as it doesn't work in Firefox
Does anyone has any idea why not?
The SVG is down below.
https://www.dropbox.com/s/vi4lxgortgyeq3f/uebung4.svg
Thanks in advance... and please keep in mind it's my very first time to use javascript :D
<script type="text/javascript">
function farbe()
{
var a = "#ff0000";
var b = "#007f00";
if (document.getElementById("kugeln").style.fill == a)
{
document.getElementById("kugeln").style.setProperty('fill', b);
}
else
{
document.getElementById("kugeln").style.setProperty('fill', a);
}
}
var initialTheta = 0;
var thetaDelta = 0.3;
var delay = 10;
var stern;
var timer;
function drehen()
{
stern = document.getElementById("stern_1");
stern.currentTheta = initialTheta;
timer = setInterval(Animation, delay);
stern_2 = document.getElementById("stern_2");
stern_3 = document.getElementById("stern_3");
stern_4 = document.getElementById("stern_4");
}
function stop()
{
clearInterval(timer);
return;
}
function Animation()
{
stern.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)");
stern.currentTheta += thetaDelta;
stern_2.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)");
stern.currentTheta += thetaDelta;
stern_3.setAttribute("transform", "rotate(" + stern.currentTheta + " 50,50)");
stern.currentTheta += thetaDelta;
stern_4.setAttribute("transform", "rotate(" + stern.currentTheta + " 0,2000)");
stern.currentTheta += thetaDelta;
}
The drehen function gets called two times in a row for each mouse over, so you are calling two times setInterval but recording only the last return value. You should call clearInterval before setting the new one.
Try something like
if(timer != undefined){
clearInterval(timer);
}
timer = setInterval(Animation, delay);
You are comparing colours against hex values
var a = "#ff0000";
if (document.getElementById("kugeln").style.fill == a)
UAs don't have to return colours as hex values and in fact Firefox does not. It will convert your colour to an rgb or rgba representation. If you add an alert
alert(document.getElementById("kugeln").style.fill);
you'll see Firefox returns rgb(255, 0, 0) as the colour which is the same as #ff0000 expressed in a different way. So you could add a check for this kind of colour format or...
A more robust solution would be to have a visiblity:hidden element with the colour you want to compare to and then check against the fill property of that.
trying to get this z-sorting to work proper.
What i want to achieve is some kind of looping/carousel. When a ".area" is getting clicked it should be placed at the very bottom z-wize. And when all elements have been set to bottom they should start to be placed up again.Dont need to be animated. Just need help with the logic.
Really like an carousel but z-wise. Any ideas? http://jsfiddle.net/EjpSu/8/
var z = 1;
$(".area").each(function(e) {
z++;
$(this).css("z-index",z)
});
$(".area").click(function(){
$(this).css("z-index",z--)
})
Try subtracting the total # of area divs from z-index (updated to keep z-index non-negative):
var n = $(".area").length;
$(".area").click(function(){
var z = $(this).css("z-index") - n;
if(z === 0) {
reset();
} else {
$(this).css("z-index", z);
}
});
function reset() {
var z = n;
$(".area").each(function(e) {
$(this).css("z-index",z);
z++;
});
};
reset();
Demo: http://jsfiddle.net/verashn/mTKRL/