CODEWITHSUNDEEP
htmlcss
Jonathan.
Jonathan.

Reputation: 55594

HTML templates for repeating elements

I have the following code:

    <div class="spinner">
        <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div>
        <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div>
        <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div>
        <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div>
        <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div>
        <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div>
        <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div>
    </div>

This along with some CSS, makes an animated spinner.

However it's quite messy, especially if I want to use it multiple times. I can use Javascript to create it but that's also a bit messy, I mean shouldn't the structure be kept to HTML? Is there a way to do something like:

<template name="spinner">
    <div class="spinner">
        <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div>
        <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div>
        <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div>
        <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div>
        <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div>
        <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div>
        <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div>
    </div>
</template>
<body>
    <template target="spinner" />
    <!-- Some other stuff -->
    <template target="spinner" />
</body>

(without using javascript)

Upvotes: 3

Views: 2749

Answers (3)

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276386

No, there is no way to do this without JavaScript. HTML5 has a shiny new <template> tag, but it requires JavaScript to use.

HTML represents the logical structure of your page. It does not support this sort of thing.

You don't have to use JavaScript, you can use SSI (server side include), a server side language etc.

One option would be to build your HTML once using some form of JavaScript templating, and then serve this HTML to the users. That way no JavaScript code will run on the client-side (it will generate an HTML) and you'll be able to work with <template> tags in the way you suggest.

This would change your build process from html to html+template => html where the conversion is done by some templating engine/programming language. You still end up serving html.

Upvotes: 2

user1467267
user1467267

Reputation:

You can only tidy up your CSS;

CSS

.spinner div {
    /* markup for all divs in here, like width, height etc. */
}

.spinner div:nth-child(1) { -webkit-animation-delay:0.24s; border-color: #777; }
.spinner div:nth-child(2) { -webkit-animation-delay:0.20s; border-color: #888; }
.spinner div:nth-child(3) { -webkit-animation-delay:0.16s; border-color: #999; }
.spinner div:nth-child(4) { -webkit-animation-delay:0.12s; border-color: #AAA; }
.spinner div:nth-child(5) { -webkit-animation-delay:0.08s; border-color: #BBB; }
.spinner div:nth-child(6) { -webkit-animation-delay:0.04s; border-color: #CCC; }
.spinner div:nth-child(7) { -webkit-animation-delay:0.00s; border-color: #DDD; }

HTML

<div class="spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

The HTML can repeated anywhere. You can't repeat the inner div-tags by CSS. You'll have to do a small JavaScript innerHTML loop to achieve that. But as you want to avoid that, I'll show this as the only (known to me) example.

Upvotes: 2

Francisco Zarabozo
Francisco Zarabozo

Reputation: 3748

Unless you generate the HTML with a server side script, no, HTML is static by itself. If you want to alter the DOM, then you need to use Javascript.

What you can do is leave your template in a hidden div with a certain id, and use Javascript to get it with getElementById and then clon that div and place it wherever and as much times you want.

If you write a function on Javascript for that, then you can place simple tags between your HTML:

<script type="text/javascript">place_div()</script>

HTH

Francisco

Upvotes: 1

Related Questions