0

Objective: Display many squares or any object (words, images, etc.) simultaneously fading in and out.

The example below shows only one square at a time flashing in and out. http://jsfiddle.net/redler/QcUPk/8/

(function makeDiv(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width':divsize+'px',
        'height':divsize+'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
       $(this).remove();
       makeDiv(); 
    }); 
})();

So if there was an array $data displaying names from a database, how would this be accomplished showing for examples James, John, Mary, and Peter. So for every entry a user enters in a form the name shows flashing in and out of the squares at different times all at once.

Stephen Tafler
  • 107
  • 1
  • 3
  • 11
  • Simple, just choose a random index from the Array of names and append it to the $newdiv. – Ctrl Alt Design Mar 29 '14 at 04:23
  • 1
    How many do you want? http://jsfiddle.net/QcUPk/2349/ – Chris Mar 29 '14 at 04:25
  • That would solve the problem of showing random names in one square at a time, but not solve the problem of showing random names in many squares at a time without repeating the same name. – Stephen Tafler Mar 29 '14 at 04:31
  • oh, so you would just repeat the function. I was originally thinking this route. This would still cause overlapping and possible repeating the random same names. – Stephen Tafler Mar 29 '14 at 04:38
  • There would have to be another function ran that says not to repeat the same name, but wouldn't this contradict with choosing a random index from the array? – Stephen Tafler Mar 29 '14 at 04:56
  • Also, if the fade in values are changed to say 2000 a slower speed(so user can read the name) then it appears as only one square is appearing on the screen. I think repeating the function is not the solution. – Stephen Tafler Mar 29 '14 at 05:10
  • The jsfiddle was a proof of concept only. If you want it to actually work, I'd suggest you define in pseudocode/via timeline exactly what you want to happen. Then I might be able to suggest something. – Chris Mar 29 '14 at 15:19
  • I will type in pseudocode and post here. – Stephen Tafler Mar 30 '14 at 13:15

0 Answers0