Home/ Questions/Q 8057947
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T09:11:51+00:00

In my animation which is raining dots with random colors, I want to be

  • 0

In my animation which is “raining” dots with random colors, I want to be able to change the colors by pressing ENTER. For keypress i’m using the following code:

    $(document).keypress(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            // change variables for the colors
        }
    });

As I see it, it shouldn’t be anything wrong with the code, but nothing happens when pressing ENTER. I would be glad if someone could help me out here!

You can find the code here: http://jsfiddle.net/GsBcz/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why binding an event on each animation call ? Also [event.which] is jQuery’s crossbrowser way to detect mouse and key events.

    This should help,

    Fiddle

    HTML:

    <html>
<head>
        <title>Raining dots</title> 
        <link href='http://fonts.googleapis.com/css?family=Give+You+Glory' rel='stylesheet' type='text/css'> 
        <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
           <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
        <script type="text/javascript" src="js/external.js" ></script>
</head>
        <body id="bg">
        </body>
</html>​

    JAVASCRIPT:

    var Capsule = {
    init: function() {

        this.c1 = 256, this.c2 = 220, this.c3 = 225;
        Capsule.callDots();
    },

    callDots: function() {

        window.setInterval(function() {
            Capsule.animateDots(Capsule.c1, Capsule.c2, Capsule.c3);
        }, 10);
    },

    animateDots: function() { 

        var theWidth = $(window).width(),
            theHeight = $(window).height(),
            randomEntry = Math.ceil(Math.random() * theWidth),
            preRandomDotSize = Math.ceil(Math.random() * 40),
            randomDotSize = preRandomDotSize + 50;

        var dotName = 'dot-' + randomEntry,
            color1 = Math.ceil(Math.random() * Capsule.c1),
            color2 = Math.ceil(Math.random() * Capsule.c2),
            color3 = Math.ceil(Math.random() * Capsule.c3),
            colors = 'rgb(' + color1 + ',' + color2 + ',' + color3 + ')';

        $('<div />', {
            text: '.',
            id: dotName,
        }).appendTo('body').addClass('theDots').css('left', randomEntry).css('font-size', randomDotSize).css('color', colors).animate({
            "top": "+=" + theHeight
        }, 5000, function() {});
    }
};
$(document).ready(function() {
    Capsule.init();
}).keypress(function(event) {
    if (event.which == '13') {
        Capsule.c1 += 2, Capsule.c2 += 4, Capsule.c3 += 6;
    }
});​

    CSS:

    body {
    font: 14px / 1.5em 'Gloria Hallelujah', cursive;
}

.theDots{
        position:absolute;
        top:-50px;
        left:0px;
        z-index:10;
        position:block;
}​
    • 0