How to draw a line horizontally according to screen width

Question

I have a jquery code that can draw horizonatal lines.But my problem is no of lines are pre defined.Here is my code

function loadbar()
{

    var screensize = 30;
    var myarr = Array(screensize).join(("400").concat(","));


    var values = ["800","800"];


    for (var i in values ) {

        var val = values [i];
        var width = 2;
        var gap = 2;

        $('#container').append(
            $('<div />').addClass('bar').css({
                width: width
            ,   height: val
            ,   left: (width + gap) * i + gap
            })
        );
    }
}

values having no of lines.Say 800 is the height and and i have 2 lines.But I need more lines.If my screen width is 1024 I need to draw 1024 lines.For that I have simple defined a screensize variable and myarr is generating no of times.

but when I use myarr instead of values in for loop it will not display anything.can you guys show me where is the issue?

Thanks

Have you checked the value of `myarr`? It will look something like: `400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,` — ahren, Nov 18 '13 at 12:23
Maybe this answer would help you http://stackoverflow.com/a/3437825/2149092 — Mohammad AbuShady, Nov 18 '13 at 12:33

score 0 · Answer 1 · answered Nov 18 '13 at 13:36

I think that the problem with your code, is the fact that you are assigning a string to myarr, please try the code below and check if it works for your purposes

 function loadbar()
    {

        var screensize = $(window).width();
        var myarr = Array(screensize).join($(window).height() + ",").split(",")

        for (var i in myarr) {
            var val = parseInt(i)
            var width = 2;
            var gap = 2;

            $('#container').append(
            $('<div />').addClass('bar').css({
                width: width,
                height: val,
                left: (width + gap) * i + gap
            }));
        }
    }

How to draw a line horizontally according to screen width

1 Answers1