-1

I'm building the portfolio of my site. I want to show off a 3x3 grid of my work. I'm trying to write a javascript code that will render gray blocks as placeholders so that the total of squares (including the shots) is ALWAYS 9.

The goal:

enter image description here

My code:

function inventBlank() {

    // define variables
    var shot = document.getElementById('shot'),
        a = document.getElementById('a'),
        div = document.createElement('div');

    // insertAfter function
    function insertAfter(referenceNode, newNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

    // if existing shots is less than 9...
    if (shot < 9) {
        // render gray boxes until 9
        for (var i = 0; i < 10; i++) {
            var div = document.createElement('div');
            div.className = "shot";
            div.insertAfter(a, div);
            // insert new element "div" after "a"
        }
    }
}

inventBlank();
// call anonymous function

I try to use this, but the console says it's an anonymous function!

Here is the jsFiddle

Basically, it's supposed to render gray blocks after the span. It will accomplish this by generating a div with the name of div.

I'm pretty sure the for loop is invalid! :(

7
  • 1
    So basically, you're getting one single element, as ID's are unique and that's all getElementById gets, and it gets a HTML element as an object, not a number, then you do if ( single_element_object > 9 ) and that doesn't work !
    – adeneo
    Jun 9, 2014 at 3:17
  • 1
    You might want to learn a bit more about DOM elements: quirksmode.org/dom/intro.html . Jun 9, 2014 at 3:18
  • if you always want 9 boxes (regardless of whether it is filled with a shot or not), why not just hard code in 9 boxes and dynamically fill them from an array of shots? Jun 9, 2014 at 3:26
  • I forgot to mention I'm using Jekyll. I don't know how that would be done. But thanks for the suggestion!
    – Matthew
    Jun 9, 2014 at 3:28
  • you could dynamically fill the box with either a for loop, or using jquery $.each() Jun 9, 2014 at 3:28

1 Answer 1

1

There is some fix to do , but can be a starting point

http://jsfiddle.net/InferOn/bzVQ6/

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        .wrapper {
            width: 960px;
            margin: 0 auto;
        }

        img, .shot {
            width: 292px;
            height: 219px;
            float: left;
            margin: 10px;
            background: #eee;
        }

        .clearFix{
            clear:both;

        }

    </style>
</head>
<body>
    <div class="wrapper">
        <section class="main" id="main">

        </section>
    </div>

    <script>
        var shot = function (src) {
            this.src = src;
        };

        var shots = [];

        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1567549/weather-dribbble.jpg'));
        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1588565/safari-yosemite-dribbble.jpg'));
        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1573950/browsers.jpg'));
        shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1546946/blackclock-dribbble.jpg'));
        shots.push(new shot(''));
        shots.push(new shot(''));
        shots.push(new shot(''));
        shots.push(new shot(''));
        shots.push(new shot(''));

        function addShot(target, source) {
            var div = document.createElement('div');
            div.setAttribute('class', 'shot');
            var img = document.createElement('img');
            img.setAttribute('src', source.src);
            div.appendChild(img);
            target.appendChild(div);
        }
        function appendClear(target) {

            var div = document.createElement('div');
            div.setAttribute('class', 'clearFix');
            target.appendChild(div);
        }

        var target = document.getElementById('main');


        for (var i = 0; i < shots.length ; i++) {
            if(i >0 && i % 3 == 0){
                appendClear(target);
            }
            addShot(target, shots[i]);
        }


    </script>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.