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 16
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post

    Equal column heights script for HTML5

    hi.

    i have been reading the html5 book by remy & bruce, and would like to convert my 3-column homepage to a semantically enriched html5 version.

    since css lets us style any elements, i thought this would be no problemo.

    but i am having trouble with the most basic of layout problems .. getting the 3 column lengths equal.

    with xhtml and divs, i just used the "matching colums" javascript that is freely available on the web.

    http://www.killersites.com/blog/2006...g-div-heigths/

    simple, easy, presto.

    but no-go in html5 where we use the section and aside elements instead of divs.

    so ye experts, how can i create an equal column lengths in html5 using section and aside elements?

    i am decent with css, but have only rudimentary javascript skills. it seems the matching columns script only works for divs, no?

    http://radified.com/index.rad
    Last edited by PonchoX; 05-07-2011 at 10:06 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    If you've read that script at least once ( rather than just blindly copying it? ), you'd have got a solution.
    The only thing you'd need to change in that javascript file is
    Code:
    divs=document.getElementsByTagName('div');
    Instead of that, try
    Code:
    divs=document.getElementsByTagName('section');
    (of course, you may alter the variable "divs" to "sections", if required.)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    hi abduraooft.

    thanks for the help.

    i changed div to section as you suggested, but for some reason, it doesnt seem to be working.

    i still need to work on converting the css to work with the new html5 elements, but no need to do that if i cant get the column lenths equal.

    maybe i am making some obvious mistake.

    my basic structure is a center secton element that contains a bunch of individual article elements, with two aside elements, 1 on each side.

    the variable name shouldnt have a bearing on the specific elements, right?'

    the thing is .. i want to apply the height of the center section element to the aside elements, and i cant tell if the script knows this or can figure it out. perhaps i should take this to the javascript forum.

    oh, and by the way, i DID read the script. it's just that my javascrpt skills, as mentioned, suk.
    Last edited by PonchoX; 05-09-2011 at 03:17 PM.

  • #4
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    okay, since this seems to have become a javascript question, i posted a similar question here:

    http://www.codingforums.com/showthre...67#post1087667

    .. which references this thread.

    but if anybody has any other ideas, i am all ears.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello PonchoX,
    Instead of relying on the script to call a div or section you can use a class on each element you want affected. Look at this example -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script> 
    		<script>
                function equalHeight(group) {
                   tallest = 0;
                   group.each(function() {
                      thisHeight = $(this).height();
                      if(thisHeight > tallest) {
                         tallest = thisHeight;
                      }
                   });
                   group.height(tallest);
                }
                $(document).ready(function() {
                   equalHeight($(".column"));
                });
            </script>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    		/* HTML5 tags */
    		header, section, footer,
    		aside, nav, article, figure {display: block;}
    #container {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    aside {
    	width: 100px;
    	background: #c96;
    }
    	#left {float: left;}
    	#right {float: right;}
    section {
    	margin: 0 120px;
    	background: #f90;
    }
    	aside, section {padding: 20px 10px;}
    </style>
    </head>
    <body>
            <div id="container">
            	<aside class="column" id="left"><p>some text here</p></aside>
                <aside class="column" id="right"></aside>
                <section class="column">
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </section>
            <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    PonchoX (05-07-2011)

  • #6
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    hello mr. ex.

    always glad to see your responses.

    i would think you'd be getting back to your other job soon, now that spring is here and summer is close.

    okay, i'm back from the coffee shop and ready to code, amp'ed on caffeine.

    i demo'ed your code here, and yes it works:

    i must ask .. did you just whip up this javascript .. just now?

    now to try to apply your script to my page. i will report back with results, but i'm excited.

    i should say however, that the old "matching_columns" script DOES in fact use a CLASS to work its magic. It uses the "column" class, which I have applied and double-checked.

    And I only use one section element.

    this is jquery, right? i have never used jquery.
    Last edited by PonchoX; 05-09-2011 at 03:16 PM.

  • #7
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    oh my god.

    it works!

    i am so freaking stoked!

    you are a wizard.

    heck, i didnt even have to modify the 'column' class i was already using.

    i have literally spent HOURS seaching google for "html5 equal column heights script" .. and similar searches.

    and got nowhere. my dang eyes are red and sore.

    many thanks, my alaskan friend.

    one thing you may find intersting is that in html5, this is sufficient:

    Code:
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
    .. as html5 ASSUMES javascript. (i am reading the book.)

    also, with meta, THIS is the preferred syntax:

    Code:
    <meta charset=utf-8>
    and the html tag should include the lang attribute (for screen readers):

    Code:
    <html lang=en>
    should i have that jquery-1.6.min script on my own server? what say ye?
    Last edited by PonchoX; 05-07-2011 at 10:53 PM.

  • Users who have thanked PonchoX for this post:

    Excavator (05-08-2011)

  • #8
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    update:

    i tried to copy the code into a file named "equal_columns_html5.js" and call it right where the current code sits now, but it doesnt work that way.

    why not?

    what is needed to put this code in its own separate file?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by PonchoX View Post
    hello mr. ex.

    always glad to see your responses.

    i would think you'd be getting back to your other job soon, now that spring is here and summer is close.

    okay, i'm back from the coffee shop and ready to code, amp'ed on caffeine.

    i demo'ed your code here, and yes it works:

    http://radified.com/excavator.html

    i must ask .. did you just whip up this javascript .. just now?

    now to try to apply your script to my page. i will report back with results, but i'm excited.

    i should say however, that the old "matching_columns" script DOES in fact use a CLASS to work its magic. It uses the "column" class, which I have applied and double-checked.

    And I only use one section element.

    this is jquery, right? i have never used jquery.
    Thank you for the nice welcome - I am back to work now. Spring is almost here... still frosty in the mornings but warm during the day.

    I did not write that, I've used it a couple times and just copied it from a site I wrote a while back.

    My bad for not really looking at your original code very closely at all. I just assumed it did not use a class when it did. Oops
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by PonchoX View Post
    oh my god.

    it works!

    i am so freaking stoked!

    you are a wizard.

    heck, i didnt even have to modify the 'column' class i was already using.

    i have literally spent HOURS seaching google for "html5 equal column heights script" .. and similar searches.

    and got nowhere. my dang eyes are red and sore.

    many thanks, my alaskan friend.

    one thing you may find intersting is that in html5, this is sufficient:

    Code:
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
    .. as html5 ASSUMES javascript. (i am reading the book.)

    also, with meta, THIS is the preferred syntax:

    Code:
    <meta charset=utf-8>
    and the html tag should include the lang attribute (for screen readers):

    Code:
    <html lang=en>
    should i have that jquery-1.6.min script on my own server? what say ye?
    That's very interesting that HTML5 assumes javascript. I'll have to look into that further.

    I keep the most current jQuery minified on my server and rename it without version numbers so I don't have to goto each page and update the bit that actually loads it. There is a "current version" hotlink available too, so you don't have to keep it on your own server but I don't seem to be able to find it right now...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by PonchoX View Post
    update:

    i tried to copy the code into a file named "equal_columns_html5.js" and call it right where the current code sits now, but it doesnt work that way.

    why not?

    what is needed to put this code in its own separate file?
    Hard to say but have you tried changing the order things get loaded? The jQuery file itself must be loaded first and the plugin after.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    yeah, that's the order in which i had it.

    not a big problem, tho.

    i can live with it and play around some more. shouldnt be hard to figure it out.

    i am pretty much done converting my home-page to html5.

    the only problem i still have remaining ..

    .. is that the dang background image (gif) is showing thru in parts of the center section:

    I have tried every trick i know, including:

    Code:
    section#mainContent {	
    	background-color: black;
    }
    and
    Code:
    nav#mainNav {
    	background-color: black;	
    }
    and
    Code:
    article {
    	margin-top: 0;
    	margin-bottom: 0;
    }
    So close.

    Can you see any obvious reason why the background gif assigned to the BODY tag is peeking thru at parts?

    Seems like everything above and below the article tag inside the section tag is showing thru (.. showing the image assigned to the body tag, which is meant only for the areas outside the sidebars).
    Last edited by PonchoX; 05-09-2011 at 03:14 PM.

  • #13
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    nevermind. i found it.

    forgot to include the 'section' element in the "display: block" grouping for all new html5 elements (article, aside, header, footer, nav) at the top of my css file.

    only a little showing thru now .. at the very top of the section element, and my sidebars dont come all the way down. a little gap at the end.

    ideas?

    also .. do you happen to know if images now go in a "figure" element? i havent gotten to that part of the book yet. =)

    i float my images to the right in the main center section.
    Last edited by PonchoX; 05-08-2011 at 03:28 AM.

  • #14
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    it validates as html5!

    cool.

    I had to get rid of my "name" attributes on my anchor tags for links with-in the page. what do you think of that? It said they were obsolete. Now I just use the > id=...
    Last edited by PonchoX; 05-08-2011 at 05:05 AM.

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    what do you think of that? It said they were obsolete. Now I just use the > id=...
    You don't need to have a dedicated anchor elements for this. You may set an id on any element and use #id_value in the anchor to target the element. See http://www.w3.org/TR/html401/struct/links.html#h-12.2.3
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    PonchoX (05-09-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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