Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Need help building 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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    putting the <section> tag just before any <hX> tag should be easy enough.

    The tricky part is figuring out where to put the </section> tag.

    Example:
    Code:
    <section>
        <h1>heading 1</h1>
        this is content associated with heading 1
        this is content associated with heading 1
        <section>
            <h2>heading2</h2>
            content 2 with heading 2
            content 2 with heading 2
        </section>
        this is content associated with heading 1
        this is content associated with heading 1
        this is content associated with heading 1
    </section>
    How is the JS code supposed to be able to figure out the the </section> in red belongs there and not one line above or one or two lines below??? I think you are asking for too much intelligence in your artificial intelligence.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    It's not that hard actually. The closing tag has to be put simply everytime the next tag's number (where by number I mean the 'X' in '<hX>') is smaller than or equal to the previous tag's number.
    The number of closing tags to put is simply the difference of the two numbers plus 1.

    This, of course, assumes that every section shall be as big as possible while maintaining valid syntax, which is an assumption not stated in the first post and which is why Old Pedant thinks it's tricky. With this assumption that I just inferred from the (small) example it's fairly easy, though.

    Please try to not crosspost in multiple forums.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I disagree, Airblader.

    What makes the example I gave above any more "correct" than this answer:
    Code:
    <section>
        <h1>heading 1</h1>
        this is content associated with heading 1
        this is content associated with heading 1
        <section>
            <h2>heading2</h2>
            content 2 with heading 2
            content 2 with heading 2
            this is content associated with heading 1
            this is content associated with heading 1
        </section>
        this is content associated with heading 1
    </section>
    ???

    Sure, you can see from the TEXT of the content what I intended here. But that's bogus. What if the text has no obvious relationship to the section headings?

    Note that there is *NO ENDING* given or implied to a section by the <hX> tags, since the entier <hX> tag is only the *beginning* of a section.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Maybe this makes it clearer.
    Code:
    <h1>'Twas brillig</h1>
    And the slithy toves
    Did gyre and gymbal
    <h2>In the wabe</h2>
    All mimsy were
    The borogoves,
    And the mome raths
    Outgrabe.
    How would you have JavaScript put the <section>...</section> in there???

    Would it be this:
    Code:
    <section>
        <h1>'Twas brillig</h1>
        And the slithy toves
        Did gyre and gymbal
        <section>
            <h2>In the wabe</h2>
            All mimsy were
        </section>
        The borogoves,
        And the mome raths
        Outgrabe.
    </section>
    Or this:
    Code:
    <section>
        <h1>'Twas brillig</h1>
        And the slithy toves
        Did gyre and gymbal
        <section>
            <h2>In the wabe</h2>
            All mimsy were
            The borogoves,
            And the mome raths
        </section>
        Outgrabe.
    </section>
    Or or or ???

    I sure as heck don't see it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Like I said, I think the assumption is to make a section as large as possible. Look at his example, his sections end exactly when a new section of smaller or equal level are about to start.
    Of course it might just be an unlucky example and in that case your concerns are absolutely right. It's up to the OP to say what his intention is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Well, you still have the problem of where that last </section> goes. There might be tons of content on the page that is unconnected to the <section>s. But I agree; we really don't know exactly what he intended.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Just for fun, here's a proof of concept -- it's really quick, dirty and ugly; probably buggy. But it does reproduce the original example

    http://jsfiddle.net/7CBq8/

    I minified the script to not make it too easy for the OP.

  • #9
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi Guys, thanks for all the replies.

    the hardest part will be to know what heading was before the current one.

    And yes, if it makes it easier, the section tags will the as big as possible

    You'll never get something like

    Code:
    <section>
        <h1>'Twas brillig</h1>
        And the slithy toves
        Did gyre and gymbal
        <section>
            <h2>In the wabe</h2>
            All mimsy were
            The borogoves,
            And the mome raths
        </section>
        Outgrabe.
    </section>
    I'm trying to understand Airblader's code right now, hopefully it can help me start.

    As I said if I could only know all the headings and their position, it will hel a lot.

    For instance:

    Code:
    <h2>Current Heading</h2>
    
    If "Previous Heading" = "<h1>" then add "<section>"
    
    
    If "Previous Heading" = "<h2>" then add "</section><section>"
    
    
    If "Previous Heading" = "<h3>" then add "</section></section><section>"
    
    
    If "Previous Heading" = "<h4>" then add "</section></section></section><section>"
    
    And so on...
    Thanks again,

    RickGervs

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    In Airblader's example, to see it working more clearly, change the code in the top left pane of the fiddle to this:
    Code:
    <textarea id='inputArea'>
    <h1>Heading1</h1>
    This is part of level 1   
    <h2>Heading2</h2>
    First level 2 content    
    <h2>Heading2</h2>
    Second level 2 content    
    <h3>Heading3</h3>
    Level 3 under second level 2
    <h2>Heading2</h2>
    Third level 2 content
    </textarea>
    <pre id='outputArea'></pre>
    And then hit RUN. Now the output in the right bottom pane is clearer as to content and intent. And yes, it seems to work just fine.

    He is grabbing the source from that textarea, but you could grab it from document.body.innerHTML or put it all in some <div> and grab it from the <div>'s innerHTML.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    RickGervs (07-23-2013)

  • #11
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    My code wasn't written to be understood. Please don't use it to learn from it, it's minified , terribly bad code. I'd be glad to outline the way it works later.

  • Users who have thanked Airblader for this post:

    RickGervs (07-23-2013)

  • #12
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Wow Airblader's code works perfectly thank you very much!

    I'm also wondering if it would be possible to do something else using this code.

    I also need to add ids in all the headers just like this:

    Code:
    <h2 id="h2.1">Heading2</h2> 
    <h2 id="h2.2">Heading2</h2>
    <h3 id="h2.2-h3.1">Heading3</h3>
    <h4 id="h2.2-h3.1-h4.1">Heading4</h4>
    <h2 id="h2.3">Heading2</h2> 
    <h3 id="h2.3-h3.1">Heading2</h3>
    <h3 id="h2.3-h3.2">Heading3</h3>
    <h3 id="h2.3-h3.3">Heading3</h3>
    <h2 id="h2.4">Heading2</h2>
    Thank you very much again!

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ummm...actually, you probably don't need to add those id's.

    You should be able to do it with relative lookups.

    Put the whole schmear inside a <div id="holder"> and then you can "look up" any of the headers easily. For example, to look up the one you have coded there as
    <h3 id="h2.3-h3.2">Heading3</h3>

    just do this:
    Code:
    var h23_h32 = document.getElementById("holder")
                  .getElementsByTagName("h1")[0] /* assumed...you didn't show an h1 */
                  .getElementsByTagName("h2")[2] /* h23 -- indexes start at 0, not 1 */
                  .getElementsByTagName("h3")[1]; /* h32 */
    Or find <h4 id="h2.2-h3.1-h4.1">Heading4</h4>
    by doing
    Code:
    var h22_h31_h41 = document.getElementById("holder")
                  .getElementsByTagName("h1")[0] /* assumed...you didn't show an h1 */
                  .getElementsByTagName("h2")[1] 
                  .getElementsByTagName("h3")[0]
                  .getElementsByTagName("h4")[0];
    But if you really needed to, you could assign the id's in the same manner, basically.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Old Pedant, we don't have nested h tags, do we?

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Oh, sheesh...I'm an idiot.

    Okay, I guess we could do it based on the nested <section>s, then? But more work.

    Might as well add the IDs.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    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
    •