www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need help builing a code

  1. #1
    Join Date
    Jul 2013
    Posts
    2

    Need help builing a code

    Hi Guys,

    I'm currently working on a website with a lot of pages and one of the annoying part is to add <section> tag in front of every single header.

    I was wondering if it's possible to populate all the section tags using JavaScript but since it all depends on what heading number it is, the <section> tag may change

    For instance :

    Code:
    <section>
    <h1>Heading1</h1>
    
    <section>
    <h2>Heading2</h2>
    
    </section>
    <section>
    <h2>Heading2</h2>
    
    <section>
    <h3>Heading3</h3>
    
    </section>
    </section>
    <section>
    <h2>Heading2</h2>
    </section>
    </section>
    As you can see it's not always the same, and only section is used, no article or anything

    I have no idea where to begin with...

    Any ideas?

  2. #2
    Join Date
    Jul 2013
    Posts
    66
    This is definitely something where I'd advise not to use Javascript as there is absolutely no benefit. If it's too annoying to add the tags by hand, do it automated in your editor, but not on the client's computer everytime he opens the page. Javascript can be used to automate similar tasks, but shouldn't be used to do what you forgot to do earlier.
    Last edited by Airblader; 07-22-2013 at 12:53 PM.

  3. #3
    Join Date
    Jul 2013
    Posts
    2
    Quote Originally Posted by Airblader View Post
    This is definitely something where I'd advise not to use Javascript as there is absolutely no benefit. If it's too annoying to add the tags by hand, do it automated in your editor, but not on the client's computer everytime he opens the page. Javascript can be used to automate similar tasks, but shouldn't be used to do what you forgot to do earlier.
    Sorry I should have been clearer. I want to build some kind of application with a text area that I paste my code in; and when a press a button it populates the tags for me.

    I already have a JavaScript tool that automatically populates a lot of things, but not section tags.

    Thanks

  4. #4
    Join Date
    Jul 2013
    Posts
    66
    Please avoid crossposting in multiple forums. I'll answer in the other one from now on.

  5. #5
    Join Date
    Mar 2009
    Posts
    512
    That's a very interesting puzzle. I don't guarantee that this will work for you, but here's a shot:

    Code:
    <!DOCTYPE HTML>
    <html><head><title>Test</title>
    
    <script>
    function col2arr(col){
        var i, len, ret = [];
        len = col.length;
        for(i = 0; i < len;i++){
    	ret.push(col[i]);
        }
        return ret;
     }
    
    function insertArt(el, tag){
        var i, len, set, flag, art;
        set = col2arr(el.childNodes);
        len = set.length;
        flag = false;
        for(i = 0; i < len; i++){
    	if(set[i].tagName == tag){
    	    flag = true;
    	    art = document.createElement('section');
                el.insertBefore(art, set[i]);
    	}
    	if(!flag){
    	    continue;
    	}
    	el.removeChild(set[i]);
    	art.appendChild(set[i]);
        }
    }
    
    window.onload = function(){
    
        var i, len, j, jLen, blocks, header = ['H2','H3','H4'];
        //create the "seed"
        len = header.length;
        insertArt(document.body,'H1');
        for(i = 0; i < len; i++){
    	blocks = document.getElementsByTagName('section');
    	blocks = col2arr(blocks);
    	jLen = blocks.length;
    	for(j = 0; j < jLen; j++){
    	    insertArt(blocks[j], header[i]);
    	}
        }
        alert(document.body.innerHTML);
    }
    </script>
    </head>
    <body>
    <h1>Heading1</h1>
    <h2>Heading2</h2>
    <h2>Heading2</h2>
    <h3>Heading3</h3>
    <h2>Heading2</h2>
    </body></html>
    It uses the same HTML code you provided sans the SECTION tags.

    Good Luck!
    Last edited by Tcobb; 07-23-2013 at 12:30 PM. Reason: incomplete

  6. #6
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    This "do it yourself" text was created to modify a text form of music notation, but you should be able to adapt it to work with html. The framework splits lines of text into an array of strings where your for loop can do anything you want before recreating and selecting the text area.

    At any rate replace
    Code:
    <h
    with
    Code:
    </section>\n<section>\n<h
    in a for loop and it should do everything you need except an "end section" will need to be moved.

    Do it yourself.txt

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles