random position of divs in javascript

by

Here’s one way to do it. I’m randomly varying the size of the div within a fixed range, then setting the position so the object is always placed within the current window boundaries.

(function makeDiv(){
    // vary size for fun
    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
    });

    // make position sensitive to size and document's width
    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(1000).fadeOut(500, function(){
      $(this).remove();
      makeDiv(); 
    }); 
})();

Edit: For fun, added a random color.

Edit: Added .remove() so we don’t pollute the page with old divs.

Example: http://jsfiddle.net/redler/QcUPk/8/

More Related Contents:

  1. How can I make a div stick to the top of the screen once it’s been scrolled to?
  2. jQuery position DIV fixed at top on scroll
  3. Getting the position of the element in a list when it’s drag/dropped (ui.sortable)
  4. I want to make first option in dropdown to display as a placeholder
  5. How to have html popup appear over main html page?
  6. jQuery document.getElementById() issue
  7. jquery get id of input selected text
  8. How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
  9. jQuery Validate Plugin – How to create a simple custom rule?
  10. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  11. Asynchronously load images with jQuery
  12. how to parse a “dd/mm/yyyy” or “dd-mm-yyyy” or “dd-mmm-yyyy” formatted date string using JavaScript or jQuery [duplicate]
  13. How to replace remapColums with remapColumnsByName in free jqgrid
  14. is it possible to open a popup with javascript and then detect when the user closes it?
  15. JQuery Datatables search within input and select
  16. Property ‘submit’ of object # is not a function
  17. Watch for Dynamically Added Class
  18. functions inside or outside jquery document ready
  19. How to embed Javascript widget that depends on jQuery into an unknown environment
  20. How to get text node after element?
  21. Is there a way to make a text area partially editable? (make only portions of the text editable)
  22. Using jQuery to know when @font-face fonts are loaded?
  23. Using JQuery and Prototype in the same page
  24. jQuery Event Handler created in loop
  25. setInterval not working properly on Chrome
  26. Converting string array to Name/Value object in javascript
  27. How to flatten array in jQuery?
  28. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  29. Capturing result of window.onbeforeunload confirmation dialog
  30. Can you have multiple lines in an element?

Leave a Comment