mouse scrolling on Firefox?, i have the question of how i can get mouse scrolling on Firefox?
i try to put mouse scrolling functions on firefox, but i can't this is my code:
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8">
<meta name="author" content="http://programmingheroes.blogspot.com.es">
<style>@font-face {
font-family: "PlaneCrash";
src: url('Calligraffiti.eot?') format('eot'),
url('Calligraffiti.woff') format('woff'),
url('Calligraffiti.ttf') format('truetype'),
url('Calligraffiti.svg#Calligraffiti') format('svg');
}
body {
background-color: #000;
overflow: hidden;
margin: 0;
}
div {
-moz-user-select: none;
-moz-user-select: none;
}
canvas {
background-color: #000;
position: absolute;
}
#title {
-moz-transform: rotateZ(-5deg);
-moz-transition: -moz-transform 2s;
-moz-box-reflect: below -40px
-moz-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.6)));
-moz-transform-origin: 0% 100%;
font-family: "PlaneCrash";
position: relative;
text-align: center;
top: 30px;
font-size: 6em;
color: red;
text-shadow: 0px 0px 20px white;
}
#title:hover {
-moz-transform: rotateZ(5deg);
}
</style>
<script>
window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", onLoad, false);
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
var canvas, ctx, w, h, particles = [], probability = 0.09,
xPoint, yPoint;
var img = new Image();
img.src = "img/fire.png";
function onLoad() {
canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("DOMMouseScroll", DOMMouseScroll, false);
ctx = canvas.getContext("2d");
resizeCanvas();
window.requestAnimationFrame(updateWorld);
} // fin de onLoad();
function mouseDown() {
createFirework();
} // fin de moveDown(e);
function DOMMouseScroll(e) {
e = e || window.event;
if (e.DOMMouseScroll > 0) {
probability += 0.01;
}
else
{
(e.DOMMouseScroll < 0)
probability -= 0.01;
probability = probability<0? 0: probability;
}
} // fin dw mouseWheel();
function resizeCanvas() {
if (!!canvas) {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
} // fin de resizeCanvas();
function updateWorld() {
update();
paint();
window.requestAnimationFrame(updateWorld);
} // fin de update();
function update() {
if (particles.length < 500 && Math.random() < probability) {
createFirework();
}
var alive = [];
for (var i=0; i<particles.length; i++) {
if (particles[i].move()) {
alive.push(particles[i]);
}
}
particles = alive;
} // fin de update();
function paint() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
for (var i=0; i<particles.length; i++) {
particles[i].draw(ctx);
}
} // fin de paint();
function createFirework() {
xPoint = Math.random()*(w-200)+100;
yPoint = Math.random()*(h-200)+100;
var nFire = Math.random()*50+100;
var c = "rgb("+(~~(Math.random()*200+55))+","
+(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")";
for (var i=0; i<nFire; i++) {
var particle = new Particle();
particle.color = c;
var vy = Math.sqrt(25-particle.vx*particle.vx);
if (Math.abs(particle.vy) > vy) {
particle.vy = particle.vy>0 ? vy: -vy;
}
particles.push(particle);
}
} // fin de createParticles();
function Particle() {
this.w = this.h = Math.random()*6+1;
// Position
this.x = xPoint-this.w/2;
this.y = yPoint-this.h/2;
// Velocidades x e y entre -5 y +5
this.vx = (Math.random()-0.5)*10;
this.vy = (Math.random()-0.5)*10;
// Tiempo de vida
this.alpha = Math.random()*.5+.5;
// color
this.color;
} // fin de Particle();
Particle.prototype = {
gravity: 0.05,
move: function () {
this.x += this.vx;
this.vy += this.gravity;
this.y += this.vy;
this.alpha -= 0.01;
if (this.x <= -this.w || this.x >= screen.width ||
this.y >= screen.height ||
this.alpha <= 0) {
return false;
}
return true;
},
draw: function (c) {
c.save();
c.beginPath();
c.translate(this.x+this.w/2, this.y+this.h/2);
c.arc(0, 0, this.w, 0, Math.PI*2);
c.fillStyle = this.color;
c.globalAlpha = this.alpha;
c.closePath();
c.fill();
c.restore();
}
} // fin de Particle.prototype;
</script>
</head>
<body>
<noscript>
No tiene habilitado JavaScript. Debería habilitarlo para poder
disfrutar al completo de los contenidos de esta página.
</noscript>
<div>
<canvas id="canvas">
Tu navegador no soporta el elemento <code>canvas</code> de HTML5.
</canvas>
</div>
<div id="title">
fireworks!
</div>
</body>
</html>i try to put mouse scrolling functions on firefox, but i can't
this is my code:
<pre><nowiki><!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8">
<meta name="author" content="http://programmingheroes.blogspot.com.es">
<style>@font-face {
font-family: "PlaneCrash";
src: url('Calligraffiti.eot?') format('eot'),
url('Calligraffiti.woff') format('woff'),
url('Calligraffiti.ttf') format('truetype'),
url('Calligraffiti.svg#Calligraffiti') format('svg');
}
body {
background-color: #000;
overflow: hidden;
margin: 0;
}
div {
-moz-user-select: none;
-moz-user-select: none;
}
canvas {
background-color: #000;
position: absolute;
}
#title {
-moz-transform: rotateZ(-5deg);
-moz-transition: -moz-transform 2s;
-moz-box-reflect: below -40px
-moz-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.6)));
-moz-transform-origin: 0% 100%;
font-family: "PlaneCrash";
position: relative;
text-align: center;
top: 30px;
font-size: 6em;
color: red;
text-shadow: 0px 0px 20px white;
}
#title:hover {
-moz-transform: rotateZ(5deg);
}
</style>
<script>
window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", onLoad, false);
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
var canvas, ctx, w, h, particles = [], probability = 0.09,
xPoint, yPoint;
var img = new Image();
img.src = "img/fire.png";
function onLoad() {
canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("DOMMouseScroll", DOMMouseScroll, false);
ctx = canvas.getContext("2d");
resizeCanvas();
window.requestAnimationFrame(updateWorld);
} // fin de onLoad();
function mouseDown() {
createFirework();
} // fin de moveDown(e);
function DOMMouseScroll(e) {
e = e || window.event;
if (e.DOMMouseScroll > 0) {
probability += 0.01;
}
else
{
(e.DOMMouseScroll < 0)
probability -= 0.01;
probability = probability<0? 0: probability;
}
} // fin dw mouseWheel();
function resizeCanvas() {
if (!!canvas) {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
} // fin de resizeCanvas();
function updateWorld() {
update();
paint();
window.requestAnimationFrame(updateWorld);
} // fin de update();
function update() {
if (particles.length < 500 && Math.random() < probability) {
createFirework();
}
var alive = [];
for (var i=0; i<particles.length; i++) {
if (particles[i].move()) {
alive.push(particles[i]);
}
}
particles = alive;
} // fin de update();
function paint() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
for (var i=0; i<particles.length; i++) {
particles[i].draw(ctx);
}
} // fin de paint();
function createFirework() {
xPoint = Math.random()*(w-200)+100;
yPoint = Math.random()*(h-200)+100;
var nFire = Math.random()*50+100;
var c = "rgb("+(~~(Math.random()*200+55))+","
+(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")";
for (var i=0; i<nFire; i++) {
var particle = new Particle();
particle.color = c;
var vy = Math.sqrt(25-particle.vx*particle.vx);
if (Math.abs(particle.vy) > vy) {
particle.vy = particle.vy>0 ? vy: -vy;
}
particles.push(particle);
}
} // fin de createParticles();
function Particle() {
this.w = this.h = Math.random()*6+1;
// Position
this.x = xPoint-this.w/2;
this.y = yPoint-this.h/2;
// Velocidades x e y entre -5 y +5
this.vx = (Math.random()-0.5)*10;
this.vy = (Math.random()-0.5)*10;
// Tiempo de vida
this.alpha = Math.random()*.5+.5;
// color
this.color;
} // fin de Particle();
Particle.prototype = {
gravity: 0.05,
move: function () {
this.x += this.vx;
this.vy += this.gravity;
this.y += this.vy;
this.alpha -= 0.01;
if (this.x <= -this.w || this.x >= screen.width ||
this.y >= screen.height ||
this.alpha <= 0) {
return false;
}
return true;
},
draw: function (c) {
c.save();
c.beginPath();
c.translate(this.x+this.w/2, this.y+this.h/2);
c.arc(0, 0, this.w, 0, Math.PI*2);
c.fillStyle = this.color;
c.globalAlpha = this.alpha;
c.closePath();
c.fill();
c.restore();
}
} // fin de Particle.prototype;
</script>
</head>
<body>
<noscript>
No tiene habilitado JavaScript. Debería habilitarlo para poder
disfrutar al completo de los contenidos de esta página.
</noscript>
<div>
<canvas id="canvas">
Tu navegador no soporta el elemento <code>canvas</code> de HTML5.
</canvas>
</div>
<div id="title">
fireworks!
</div>
</body>
</html></nowiki></pre>
Modified by cor-el
All Replies (2)
Note that some CSS properties now longer need or can be prefixed with a -moz- prefix.
A good place to ask advice about web development is at the mozillaZine "Web Development/Standards Evangelism" forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.
Note that new members first post requires post approval to be seen by public. So be patient if it does not show up right away. This is due to the spam attempts that mozillaZine gets each day.