Scattered unordered list

Question

I have an unordered list that I'm hoping to add the effect that when something is appended to it, it appears in a random position on the screen every time. However, since it's text in the list, I can't have each random position overlap. The text that gets appended will have a fadeout timer of 5 seconds, so once the message has faded out, that space will become available.

Is this possible? If so here is the HTML I'm using:

<ul id="messagebox" >

</ul>

<div>

<input type="text" id="typetextbox" maxlength="120"  autocomplete="off" />

<button type="submit" id="submit" onblur="submit"> </button>


</div> 

Here's the Javascript/jquery:

$(document).ready(function(){

  $('#typetextbox').keypress(function (e){
     if(e.keyCode == 13 ) $('#submit').click();
  });

  $('#submit').click(function(){
     var message = $('#typetextbox').val();
     if (message.replace(/ /g, ''))
       $('#messagebox').append(message + "<br/>");
     $("#typetextbox").val("");
  });
});

If not, what can I do to get that effect?

Thanks guys!

Answer 1

http://jsfiddle.net/4a7Tj/2/

In order to get the list item to show up on random places, the CSS for that should be made position:absolute then you set the left and top according to the random values generated

CSS

li{
    height: 20px;
    background: orange;
    width:200px;
    margin:2px;
    padding:5px;
    position: absolute;
}

ul{
    list-style:none;
}

JavaScript

$(document).ready(function(){

  $('#typetextbox').keypress(function (e){
     if(e.keyCode == 13 ) $('#submit').click();
  });

  $('#submit').click(function(){
      var message = $('#typetextbox').val();
      if (message.replace(/ /g, '')){
          var positions = makeNewPosition();
          var el = $('<li>'+message+'</li>');
          el.attr('gridpos', positions[0].toString()+"x"+positions[1].toString())
          el.css('left', positions[1] * window.li_width);
          el.css('top', positions[0] * window.li_height);
          $('#messagebox').append(el);


          setTimeout(function() {
              el.fadeOut();
              var gridpos = el.attr('gridpos');
              delete window.grid[gridpos];
          }, 5000 );


      }
      $("#typetextbox").val("");
  });
});
window.grid = {};
window.li_height = 20;
window.li_width = 200;
function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = Math.floor($(window).height()/window.li_height);
    var w = Math.floor($(window).width()/window.li_width);

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    var gridpos = nh.toString() + "x" + nw.toString();
    if(typeof window.grid[gridpos] == 'undefined'){
        return [nh,nw];
    }else{
        //this could eventually run out of room, so make sure to clear the grid with delete window.grid[gridpos]; when it disappears from the screen.
        return makeNewPosition();
    }

}

the gridpos is based on the window's height and width along with the declared height width of the list items.

Answer 2

The below code will work. Check this URL http://jsfiddle.net/cy632/. Is that expected behaviour?

$('#submit').click(function(){
    var message = $('#typetextbox').val();
    if (message.replace(/ /g, '')){
        var li = $('<li>');
        li.hide();
        li.text(message);
        $('#messagebox').append(li);     
        li.fadeIn('slow'); 
        //li.slideDown();
    $("#typetextbox").val("");
    }


});