Separating HTML elements into columns with proper spacing (JQuery and CSS)

Question

I am trying to make a Windows 8 like interface for my webpage. I have created articles that act as tiles and have a random generator that makes the tile small or large. I am trying to make these look like they are in columns depending on the width of the screen. When I change the screen width the tiles do not seem to be properly spaced which is driving me nuts. I am new to css and jquery so I am still learning and always open to learning new ways to do things. I would really appreciate some help on this column and spacing issue.

NOTE: My tiles usually have pictures and after I changed the code just to show up as color tiles. Now they are not always showing but I will fix that issue.

For example: each column should have a width of one double box or two single box's. And depending on the screen width...if bigger the more columns will display and the smaller the less amount of columns it will display.

Here is my current code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
    <script src="Script/jquery.lorem.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var colors = ["#2672ec", "#00a300", "#97009f", "#094db5", "#da532c", "#af1a3f", "#613cbc", "#008ad2"];
            var doubleBoxFlag = [true, false, false, false, false, false];
            var pictures = ["Images/1.jpg", "Images/2.jpg", "Images/3.jpg", "Images/4.jpg", "Images/5.jpg", "Images/6.jpg", "Images/7.jpg", "Images/8.jpg", "Images/9.jpg", "Images/10.jpg", "Images/11.jpg"];
            var defaultClass = '.box';



            for (var i = 0; i < Math.floor((Math.random() * 64) + 34) ; i++)
            {
                var rand = Math.floor(Math.random() * pictures.length);
                var boxRand = Math.floor(Math.random() * doubleBoxFlag.length);
                var currentClass = defaultClass + i;
                var currentClassJ = 'box' + i;
                //For picture tiles:
                //$("#Interface").append("<article class=" + currentClassJ + " " + "style='background-image: url(" + pictures[rand] + ")" + "'><span>" + i + "</span>");

                //For Color Tiles:
                $("#Interface").append("<article class=" + currentClassJ + " " + "style='background-color:" + colors[rand] + "'><span>" + i + "</span>");

                if (doubleBoxFlag[boxRand]) {
                    $(currentClass).css("width", "374px");
                    $(currentClass).css("padding-right", "20px");
                }
                else
                    $(currentClass).css("width", "187px");

                $(currentClass).css("height", "187px");
                $("article").css("float", "left");
                $("article").css("margin", "11px");
                $("span").css("display", "block");
                $("span").css("padding-top", "167px");
                $("span").css("padding-left", "12px");


            }
            //if (screen.width <= 480)
            //    $("#Interface").css("width", "470px");
            //if (screen.width >= 1000 && screen.width <= 1799)
            //    $("#Interface").css("width", "470px");
            //if (screen.width >= 1800)
            //    $("#Interface").css("width", "470px");
            // This line below should be adding the random word to each of the articles
            $('span').lorem({ type: 'words', amount: '1', ptags: false });


        });

    </script>
</head>
<body background = "Images/bg.png">
    <div id="Interface"></div>
</body>
</html>

@cvsguimaraes Yes, it does. That is exactly how mine looks except I have words because I have the js file. — user977154
– user977154, Commented Feb 7, 2014 at 0:51
Ok now, based on this output, tell me exactly what's the problem? — cvsguimaraes
– cvsguimaraes, Commented Feb 7, 2014 at 0:52
When adjusting the screen resolution I need the perform a few different things. When at less than 480px I need there to be one single column and one column width is the size of two single tiles or one double tile. Between 480 and 100 i need two columns with a 56px colum spacer and then 1800 - 1800 four coulmns with 56px spacers — user977154
– user977154, Commented Feb 7, 2014 at 0:58

cvsguimaraes · Accepted Answer · 2014-02-17 15:04:37Z

1

Now that I understand your problem, I propose to you start using css media queries. Basicaly for three reasons:

It's one way to solve your problem (duh)
This scripty resising and calculations will run slower when it comes to the real world.
It's much more clear and painless.

Make a css file with all rules that you want at determined screen size, then do this again for as many screen sizes you want to match. Remeber you can use all css tricks available to one determined screen size to achieve the look & feel that you want, because rules aplied under a media query will not mess with your css in other screen sizes.

After all, organize all the stylesheets in a single files and wrap them inside a proper media query.

Give it a try, you'll love it.

And yes, it's supported in at least the three earlier versions of IE, I guess.

edited Feb 17, 2014 at 15:04

answered Feb 7, 2014 at 1:21

cvsguimaraes

13.3k10 gold badges52 silver badges76 bronze badges

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

Collectives™ on Stack Overflow

Separating HTML elements into columns with proper spacing (JQuery and CSS)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related