1

I have a page that displays different words retrieved from users input. The more a word is frequently submitted the bigger its font-size is.

What I have is something like this (imagine different font-size): 

 love 

 war

 food  

 sport

 ...

Each word is in a p tag inside a div here is my code:

<div class="posts_index">
    {{#each posts}}
        <p>{{word}}</p>
    {{/each}}
</div>

How can I have the words to be displayed randomly, scatter across the page, rather than just following the HTML order from up to down ?

What I want is to have something like this:

 love 

                    war

      food  

              sport

  ...
Vladislav Rastrusny
  • 29,378
  • 23
  • 95
  • 156
Antoine
  • 559
  • 8
  • 21
  • You would need to set a specific position for each word/ element by JS...so what have you tried? At the moment all you have done is stated a requirement, I think you are after some form of Word Cloud. Try googling that. – Paulie_D Jun 05 '15 at 12:05
  • Position the words absolutely, at a random(ish) `left` and `top`. – George Jun 05 '15 at 12:06
  • Possible duplicate - http://stackoverflow.com/questions/342687/algorithm-to-implement-a-word-cloud-like-wordle – Paulie_D Jun 05 '15 at 12:08
  • 1
    can I randomly assign a word position with css or js? if yes can you show me a code sample ? – Antoine Jun 05 '15 at 12:09
  • 1
    I do not want to use Java. I am using javascript, html and css. Would there be a simple way to randomly assign a position with css.js ? – Antoine Jun 05 '15 at 12:12
  • 1
    Please update your question to include an example of what you are trying. Its nice to see how your getting the html there but what you really need is an attempt at creating a random position. Also are the words not to touch ? Have you looked at any jQuery plug ins ? like http://mistic100.github.io/jQCloud/ – mcgrailm Jun 05 '15 at 15:53

1 Answers1

3

You need to absolutely position the items at random postitions:

$(function () {
  $(".posts_index p").each(function (i, elt) {
    $(elt).css({
      left: Math.random() * 150,
      top: Math.random() * 150
    });
  });
});
.posts_index {
  height: 180px;
}

.posts_index p {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="posts_index">
    <p>love</p>
    <p>war</p>
    <p>food</p>
    <p>sport</p>
</div>
RichieHindle
  • 272,464
  • 47
  • 358
  • 399