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!

Here's the jquery, don't you mean :D – John Powell Aug 05 '14 at 23:11 — John Powell, Aug 05 '14 at 23:11

Zombiesplat · Accepted Answer · 2014-08-07T00:27:36.547

2

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.

edited Aug 07 '14 at 00:27

answered Aug 05 '14 at 23:41

Zombiesplat

943
8
19

YES ALAN!!! This is exactly what I'm looking for, apart from like you say, the fading out. Also, I noticed when trying the fiddle, two messages overlapped. Is there any way of avoiding that? Thank you so much! – cja Aug 06 '14 at 21:02
I was thinking about that part of the solution. What I came up with was to divide the screen up into a smaller section, let's say 100x100 grid, then when you grab a random pair, you check to see if that pair has already been taken, keep looping until you find an unclaimed pair. – Zombiesplat Aug 06 '14 at 21:07
Oh, and the grid would represent a width:20 and height:200 in the fiddle's case .. so 3,6 would equate to pixel locations 60 and 1200 – Zombiesplat Aug 06 '14 at 21:09
Good thinking Alan! So how would I divide the screen? I'm pretty new to it all, so to see your code work here to exactly what I need, I'm very grateful. – cja Aug 06 '14 at 23:37
Hi Alan. What you had in your fiddle was fantastic, but unfortunately when I implement it into my site, it's not working. I have an orange rectangle at the top left of my screen with the appended messages also listing vertically, however they're not linked to the box. They box just stays in the top left hand corner. To clarify what I've done: I've replaced all of my Javascript with yours and added your CSS to my . I try to look back at your fiddle but I get an Error saying it's not there any more. Sorry to trouble you again, but do you have any advice? Thank you. – cja Aug 07 '14 at 00:04
@cja I updated the answer. And as far as it not behaving on your site, this is likely a css problem, make sure that the parent div of where ever the #messagebox ul is has a position relative css. – Zombiesplat Aug 07 '14 at 00:29
Alan - everything works bar the timer. All the messages are remaining static once appended. Can you see any potential issues? Sorry for pestering, it's just everything is so close to working, and you've been a fantastic help! – cja Aug 07 '14 at 01:26
what version of jQuery are you using? I made a jsfiddle here [http://jsfiddle.net/zombiesplat/at697dg9/](http://jsfiddle.net/zombiesplat/at697dg9/) – Zombiesplat Aug 07 '14 at 03:02
never mind, it looks like it works with all versions of jQuery. I'm not too sure what's causing the problem. inside the setTimeout, put an alert to make sure it's even firing, if it is, do a console.log(el) to make sure it has the proper element. – Zombiesplat Aug 07 '14 at 03:08

Guru3908048 · Answer 2 · 2014-08-05T23:35:56.430

1

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("");
    }


});

edited Aug 05 '14 at 23:35

answered Aug 05 '14 at 23:19

Guru3908048

36
4

Great code Guru! I'm looking for that, but with a scattered style. Prety much what Alan's fiddle is. Also with a fade out of the messages. Thanks for the great help! – cja Aug 06 '14 at 21:04

Scattered unordered list

2 Answers2