CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user977154
user977154

Reputation: 1095

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

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>

Upvotes: 0

Views: 131

Answers (1)

cvsguimaraes
cvsguimaraes

Reputation: 13230

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

  1. It's one way to solve your problem (duh)
  2. This scripty resising and calculations will run slower when it comes to the real world.
  3. 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.

Upvotes: 1

Related Questions