Skip to content

Instantly share code, notes, and snippets.

@charleslouis
Created April 18, 2013 23:31
Show Gist options
  • Save charleslouis/5417014 to your computer and use it in GitHub Desktop.
Save charleslouis/5417014 to your computer and use it in GitHub Desktop.
Javascript - append div in a container with random classes and positions
(function RandomClassesDivs(){
// declare classes we want to apply
var bubbleColors = ['bubble_color_1', 'bubble_color_2', 'bubble_color_3', 'bubble_color_4', 'bubble_color_5', 'bubble_color_6'];
var bubbleSizes = ['bubble_1', 'bubble_2', 'bubble_3', 'bubble_4', 'bubble_5'];
//find the highest key of the classes arrays
var nbrSizes = (bubbleSizes.length) - 1,
nbrColors = (bubbleColors.length) - 1;
// define a random Size/Color
randomSize = Math.round(Math.random() * nbrSizes);
whichSize = bubbleSizes[randomSize];
randomColor = Math.round(Math.random() * nbrColors);
whichColor = bubbleColors[randomColor];
//create div
$newdiv = $('<i/>');
//combine base class and random Classes
bubbleClasses = 'bubble '+ whichColor + " " + whichSize;
//apply classes
$newdiv.addClass(bubbleClasses);
// defines a random ratio to be applied to the container dimension
var divsize = ((Math.random()*100) + 50).toFixed();
// random position considering container height and width
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
//define position
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100, function(){
makeDiv();
});
// .appendTo( 'body' ).fadeIn(100).delay(1000).fadeOut(500, function(){
// $(this).remove();
// makeDiv();
// });
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment