dynamically generated buttons with javascript

Question

I am working on a TV application with JavaScript, Html and CSS.

I want to generate buttons where the label(title) is not always the same: sometimes so long or quiet short. The labels should be dynamically generated from xml files. So the problem is to display all the generated buttons with the same width.

Here is how I am creating the buttons with javascript:

    var a = document.createElement("a");    
    var span2 = document.createElement("span");
    span2.setAttribute("class", "span1");
    span2.appendChild(document.createTextNode(text));
    a.appendChild(span2);

How we can do it?

Why not then have a class on all the buttons with a defined width? — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 17, 2014 at 14:23
So basically, all you want is having your buttons the same width? A fixed width, more precisely? — Nicolae Olariu
– Nicolae Olariu, Commented Nov 17, 2014 at 14:23
If you are ok by doing: set a limit like 55 characters if text exceeds 55 characters, append (...) text after trimming 55 characters and make the full text in the title/tooltip. Which makes uniform design with good look... — Antony
– Antony, Commented Nov 17, 2014 at 14:37
the problem is the butoons should be displayed in a beautiful view. In other words, they should be displayed with the same width! I tried to make the width fixed but it doesn't fit to all of them — user3481058
– user3481058, Commented Nov 17, 2014 at 14:38

Matthew · Accepted Answer · 2014-11-17 14:43:31Z

1

Here's an option:

When you get your set of button labels, get the length of each string.
Determine how wide the buttons need to be based on the number of characters in the longest string.
When you build each span2, give it a width attribute equal to that largest size.

However, be aware that if you have some very long labels and some very short, it may look weird having the really short labels on very wide buttons.

answered Nov 17, 2014 at 14:43

Matthew

2172 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bojan Petkovski · Accepted Answer · 2014-11-17 15:04:44Z

I don't know exactly what you are trying to do but here is one example how to make the buttons with same width and having different character length :)

var words = ['Lorem', 'Lorem ipsum', 'Lorem ipsum dolor', 'Lorem ipsum dolor sit', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet consectetur', 'Lorem ipsum dolor sit amet consectetur adipisicing', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga animi'];

for (var i = 0; i < 10; i++) {
  var a = document.createElement("a");
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span1");
  span2.style.width = 150 + "px";
  span2.appendChild(document.createTextNode(words[i]));
  a.appendChild(span2);
  document.body.appendChild(a);
}

.span1 {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  background: lightblue;
  margin: 5px;
  vertical-align: middle;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
}

user3481058 · Accepted Answer · 2014-11-17 15:25:07Z

0

Thanks a lot for your ideas and comments :)

I decided to make some thumbnails and I will query the buttons title :) At least I am sure now that I will get a list of buttons with fixed width.

Thanks a lot for your kind help :)

answered Nov 17, 2014 at 15:25

user3481058

3132 gold badges4 silver badges19 bronze badges

Collectives™ on Stack Overflow

dynamically generated buttons with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related