CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
whyAto8
whyAto8

Reputation: 1670

html or js - to create large amount of similar html tags in a page

I am working on a page where I need to have some similar trees (kind of) and leaves on them and have lots of them, as in like spanning across page width at page bottom. I was thinking of doing it 2 ways, one could be to just create one set first (tree and leave) and then clone it using jquery OR the other could be to basically write html tags for ALL of them in the page itself. Obviously that would mean having lots of html tags.

HTML for a tree group:

    <div class="tree-group-avg">
            <div class="small-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>
            <div class="avg-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>
            <div class="large-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>            
      </div>

CSS:

.tree-group-avg {margin:0 15px;display:inline-block; }
.tree-group-avg div {position:relative;}
.tree-group-avg .large-tree {background:#83919F; width:2px; height:70px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .avg-tree {background:#83919F; width:2px; height:50px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .small-tree {background:#83919F; width:2px; height:30px; display:inline-block; margin:0 5px -5px 0} 
.left-leaf {width:10px; height:10px; border-radius:0 10px 0 10px; display:inline-block; background:#ACCF37; position:absolute; left:-10px;}
.right-leaf {width:10px; height:10px; border-radius:10px 0 10px 0; display:inline-block; background:#ACCF37; position:absolute; top:15px;}

The thing I have to take care is that height of tree is different, so it would be possible that I need 3 leaves on bigger trees than smaller one's. For that I thought of two ways, either directly use different leaves in html with different css "top" property value OR get this entire thing done through js or jquery, where in it calculate height of tree and modified "top" value of each leaf.

jsfiddle for a set : http://jsfiddle.net/npT47/

Exact image for what is to be acheived: enter image description here

Upvotes: 2

Views: 204

Answers (3)

Kuldeep Vithlani
Kuldeep Vithlani

Reputation: 613

I have edited your fiddle. I have added divs dynamically in your html as I understood using jquery. Just look at this fiddle. jsfiddle.net/npT47/6/

$(document).ready(function(){
    var tree="";
    var treeClass=["small-tree","avg-tree","large-tree"];
    for(var i=0;i<3;i++){
        tree+='<div class="'+treeClass[i]+'">'+
            '<span class="left-leaf"></span>'+
                '<span class="right-leaf"></span></div>';

    }    
    $("#treeDiv").html(tree);
});

Thanks.

Upvotes: 2

Bas Wildeboer
Bas Wildeboer

Reputation: 580

If you want to achieve the exact same as the image you uploaded i would say HTML. The loop that you have to create will need a base HTML for the loop (which can be cloned) that is as wide as half your image (31 trees (because the pattern ends there). So you would end up writing lots of HTML either way.

The only way JS can be better is if you need full width coverage (viewport) and thus need to calculate the amount of repetitions needed.

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

HTML and JS are both different, you cannot create pages by just writing snippets of JS, and you cannot create Dynamic web pages just by using HTML.

You need to meld both.

I have seen your fiddle, great work upto now. But what I found in common was that you are creating a lead after a common interval, lets say 10px each. After 10 px you are creating a new leaf. And height is also common, for each tree the height increases almost 5px. You can use such other features of them in JS, and create the tree!

You can use a for loop of JS and create the tree but just increase the size of the tree after each loop, loop will take care of that for you. You just need to be sure of what you're writing would create a tree. And note that trees that would grow will be of a common size increase and leaves would increase at a common number int.

Upvotes: 2

Related Questions