...

View Full Version : Resolved Equal column heights script for HTML5



PonchoX
05-07-2011, 04:37 PM
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/matching-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

abduraooft
05-07-2011, 04:58 PM
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

divs=document.getElementsByTagName('div');
Instead of that, try

divs=document.getElementsByTagName('section');

(of course, you may alter the variable "divs" to "sections", if required.)

PonchoX
05-07-2011, 05:32 PM
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.

PonchoX
05-07-2011, 06:47 PM
okay, since this seems to have become a javascript question, i posted a similar question here:

http://www.codingforums.com/showthread.php?p=1087667#post1087667

.. which references this thread.

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

Excavator
05-07-2011, 09:49 PM
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 -
<!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>

PonchoX
05-07-2011, 10:29 PM
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.

PonchoX
05-07-2011, 10:56 PM
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:


<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:


<meta charset=utf-8>

and the html tag should include the lang attribute (for screen readers):


<html lang=en>

should i have that jquery-1.6.min script on my own server? what say ye?

PonchoX
05-08-2011, 12:07 AM
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?

Excavator
05-08-2011, 01:29 AM
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 :eek:

Excavator
05-08-2011, 01:34 AM
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:


<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:


<meta charset=utf-8>

and the html tag should include the lang attribute (for screen readers):


<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...

Excavator
05-08-2011, 01:36 AM
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.

PonchoX
05-08-2011, 02:12 AM
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:


section#mainContent {
background-color: black;
}

and

nav#mainNav {
background-color: black;
}
and

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).

PonchoX
05-08-2011, 02:23 AM
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.

PonchoX
05-08-2011, 02:42 AM
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=...

abduraooft
05-08-2011, 03:35 PM
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

PonchoX
05-09-2011, 01:05 AM
We learn something new everyday. I didnt know that. Never heard of that. And it works, too. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum