set a size to div boxes using javascript

Question

i'm trying to set width to my div boxes, but it doesn't work here is my code:

  var aMenu = [
       {
           width: x=650,
           title: "Home",
           contentid: "dvHome",           
           items: [{ image: '../Images/1-1.PNG' },
                   { image: '../Images/1-2.PNG' },
                   { image: '../Images/1-3.PNG' },
                   { image: '../Images/1-4.PNG' },
                   { image: '../Images/1-5.PNG' }]
       },
      {
          title: "",
          contentid: "dvArrow1",
          items: [{ image: '../Icons/arrowLeft.png' },
                  { image: '../Icons/arrowRight.png' }]
      },

       {
           width: x = 550,
           title: "Download",
           contentid: "dvDownload",        
           items: [{ image: '../Images/2-1.PNG' },
                   { image: '../Images/2-2.PNG' },
                   { image: '../Images/2-3.PNG' },
                   { image: '../Images/2-4.PNG' }]
       },
        {
            title: "",
            contentid: "dvArrow2",
            items: [{ image: '../Icons/arrowLeft.png' },
                   { image: '../Icons/arrowRight.png' }]
        },
      {
          width: x=450,
          title: "Support",
          contentid: "dvSupport" ,
          items: [{ image: '../Images/3-1.PNG' },
                 { image: '../Images/3-2.PNG' },
                 { image: '../Images/3-3.PNG' },
                 { image: '../Images/3-4.PNG' }]
      }
    ]

    for (i = 0; i < aMenu.length; i++) {
        $("#" + aMenu[i].contentid).append("<div  "+ aMenu[i].width +"><a href='#'><h3>" + aMenu[i].title + "</h3></a></div>");
        for (var j = 0; j < aMenu[i].items.length; j++) {

            $("#" + aMenu[i].contentid).append("<a href='#'><img src=" + aMenu[i].items[j].image + " /> </a> ");
        } 


}

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

I think you have to set inline styles (which is not a good practise)

$("#" + aMenu[i].contentid).append("<div style=width:" + aMenu[i].width + "px;><a href='#'><h3>" + aMenu[i].title + "</h3></a></div>");

You should consider reading this question and the answer about inline css style:

What's so bad about in-line CSS?

edited May 23 '17 at 11:52

Community

1
1

answered Oct 21 '15 at 08:46

orbatschow

1,497
2
13
26

Then why not add classes like class="w500" or class="w550"? – Jochen Schultz Oct 21 '15 at 08:48
Can you provide an https://jsfiddle.net/ where you provide the not working example ? @JochenSchultz i provided a link to a S.O. question which deals about this topic – orbatschow Oct 21 '15 at 08:55
You need to define the classes... .w500 { width:500px; } – Jochen Schultz Oct 21 '15 at 08:57

set a size to div boxes using javascript

1 Answers1