Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 18
Posts: 18   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 12190 times and has 17 replies Next Thread
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2936
Status: Offline
Reply to this Post  Reply with Quote 
Matching CSS div heights video.

I wrote a short article and produced a video on how to use the The Matching Columns Script.

-

One of the fundamental problems people have with CSS page-level layout is matching CSS div heights. Others might call this 'matching column heights' in web pages.

In this article/video (see below,) we are going to solve this problem using a lesser known JavaScript method: the Matching Columns Script.

-

Matching <div> Heights Video

Let me know what you guys think.

Stef
----------------------------------------
Stefan Mischook
Check out the web design video store.
----------------------------------------
[Edit 2 times, last edit by admin at Apr 5, 2006 12:45:30 PM]
[Apr 5, 2006 12:44:40 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

Hi - thanks for the script! I'm using it on a 2 column css layout with right and left floats and it works great. BTW, the code for the left float (nav) is written after the main content area.

So, the page structure is like this:
Top
Main
Left
Footer

VS

Top
Left
Main
Footer

And the script works for this type of layout as well.


I modified the script like this (Bold line):

matchColumns=function(){
if(!document.getElementsByTagName) return;

var divs,contDivs,maxHeight,divHeight,d;

[... all the other script etc ...]


Because I read somwhere that it is better to say "if not" a dom compliant browser then "do nothing" - but probably someone's opinion. I'm just discovering JS DOM scripting.

And removed window.onload=function()

Because I have another script that wanted to use the onload event. So I removed its window.onload in the external js code and used onload in the body tag:

<body onload="externalLinks();matchColumns();">


Also, because I'm using xhtml DOCTYPE, I removed the reference to languange="javascript".

<script type="text/javascript" src="matching_columns.js"></script>

smile
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[Apr 11, 2006 10:59:26 AM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

So I removed its window.onload in the external js code and used onload in the body tag

This may be of interest to you. It's taken from the js code for Lightbox (a script for displaying images).
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}

}
addLoadEvent(initLightbox); // run initLightbox onLoad


Will the code for evening out columns only work on floats? I tried it on a layout using absolute positioning and it didn't seem to do a thing.
----------------------------------------
Quiquid latine dictum sit altum viditur
[Apr 11, 2006 12:03:46 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2936
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

@billyboy,

It work on all block level elements that are assigned the proper class name - the class the script is looking for.
----------------------------------------
Stefan Mischook
Check out the web design video store.
----------------------------------------
[Edit 1 times, last edit by admin at Apr 11, 2006 1:34:28 PM]
[Apr 11, 2006 1:23:44 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.


// Function found at Simon Willison's weblog - http://simon.incutio.com/
//


Good. Thanks.

So, to use this, I keep the window.onload = "whaterver" in the external script, right?
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[Apr 11, 2006 1:28:12 PM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2936
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

@shelfimage,

Couple of minor points:

Consider this line in the script:
if(document.getElementsByTagName) ...

This line of JS code will prevent the script from being executed if the browser does not support DOM methods.

The above JS statement is basically saying: "if this document/webpage/web browser can support/use 'getElementsByTagName' then do this ..."

Remember that 'if' statements evaluate to true or false.

So your addition, though fine, is redundant.

-

You could have called your other script in the body of the Matching Div Heights function, this way keeping your <body> tag free of any Javascript calls.

Inline JavaScript (inline: means JavaScript right on your tags) is so old school dude! wink

Much in the same way you want to keep style/layout separate from structure (IE: the code). You want to keep script/behaviour separate from the structure as well.
-

Each of the 3 pillars of web design must stand on their own:

Structure: HTML/XHTML
Style/formatting: CSS
Behaviour: JavaScript/Dom
----------------------------------------
Stefan Mischook
Check out the web design video store.
----------------------------------------
[Edit 2 times, last edit by admin at Apr 11, 2006 1:38:19 PM]
[Apr 11, 2006 1:33:48 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

Hi John,
From what I understand about js (which isn't much) that bit of code keeps different onload events from interfering with each other which can sometimes happen. You should be able to leave everything as is in any file you want to include that uses a window onload event. You'd have to change initLightbox since that refers to the function in the Lightbox code.

Hi Stef,
I took another shot at inserting your code into my page and I'm not sure what's going on. It works great in Firefox but I get completely blank pages in IE and Opera. Double checked to make sure all columns were labelled with the class column and that there were no errors. I remove the link to the js file and the page displays fine except for the columns not matching, as soon as I put the link back in it disapears.
----------------------------------------
Quiquid latine dictum sit altum viditur
[Apr 11, 2006 3:55:19 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2936
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

Very strange ... I use it all over Killersites.com and works fine in IE.

thinking
----------------------------------------
Stefan Mischook
Check out the web design video store.
[Apr 11, 2006 4:01:16 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

I just ain't having any luck with scripts the past couple days between this, my contact form not working, and the trying to get the Lightbox script to display images how I want in my image gallery crying Think it's time to take that little gem of advice you posted somewhere awhile back about when nothing seems to be going right... kick the crap outta something to vent your frustration... oops no that wasn't it.tongue Time for a break and check out what's happening in the outside world. Then I'll be back to show these stupid scripts who's boss!wink
----------------------------------------
Quiquid latine dictum sit altum viditur
[Apr 11, 2006 4:19:51 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: Matching CSS div heights video.

Inline JavaScript (inline: means JavaScript right on your tags) is so old school dude! wink

yep, I know. I wasn't sure what else to do.

So by this
You could have called your other script in the body of the Matching Div Heights function, this way keeping your <body> tag free of any Javascript calls.

you mean I can inlcude (in bold)

[... previous code ...]

// Runs the script when page loads

window.onload=function(){

if(document.getElementsByTagName){

matchColumns();

}
}

window.onload = otherScript; // I can put this here?



The above JS statement is basically saying: "if this document/webpage/web browser can support/use 'getElementsByTagName' then do this ..."

Point taken.

Thanks again!
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[Apr 11, 2006 6:49:33 PM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 18   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread