View Full Version : Trying to create a Multi-Column script

07-08-2005, 05:23 PM
I'm trying to create a multicolumn display completely in javascript. It semi-works but it's still clunky as hell. How do I go about coding a function to automatically "re-draw" the columns on resize? That's my biggest problem, so I'll leave only this question for now.

I've created a resizeColumns function but it doesnt seem to work at all. What am I doing wrong?

This is the page

It seems to crap out in IE w/ the resize function here's a link to the page w/o the resize

07-08-2005, 06:52 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<script language="JavaScript" type="text/javascript">
// by Vic Phillips (08-07-2005) http://www.vicsjavascripts.org.uk

var text1 = "July 5 (Bloomberg) -- Tropical Storm Cindy threatened the U.S. coast of the Gulf of Mexico as the Atlantic Ocean hurricane season got off to its earliest start ever with four tropical storms, lifting prices for oil, natural gas and fuel. :br: Cindy and Dennis, the third and fourth named storms of the season that began June 1, were upgraded this morning from tropical depressions, and Dennis may become a hurricane by the end of the week. Dora, the fourth storm of the eastern Pacific hurricane season, may bring floods and mudslides to the west coast of Mexico. :br: The National Oceanic and Atmospheric Administration said in May that it expected 12 to 15 named storms, including as many as nine hurricanes, in the June-through-November hurricane season. Today is the earliest date on record for four storms to form in the Atlantic, the Miami-based National Hurricane Center said. :br: ``It\'s a little early for that kind of stuff,'' center spokesman Frank LePore said in a telephone interview. :br: The trend for named storms began in 1995 and reached a peak last year when Charley, Frances, Ivan and Jeanne caused more than $20 billion in U.S. property damage. :br: Damage to offshore oil and gas rigs and platforms from Ivan took months to repair, cutting Gulf of Mexico natural gas production by more than 172 billion cubic feet and oil output by 43.8 million barrels. :br: Cindy :br: Cindy was upgraded to a tropical storm from a tropical depression after maximum sustained winds strengthened to near 45 mph (72 kph). A tropical storm warning was issued for the Gulf coast from Intracoastal City, Louisiana, to Destin, Florida, an area that includes New Orleans. :br: A tropical storm warning means winds of 39 mph to 73 mph are expected within 24 hours, while a watch mean winds of that speed are possible in an area during the next day. Tropical depressions have maximum sustained winds of 38 mph, and hurricane-force winds exceed 73 mph. :br: Cindy was located about 165 miles south southwest of the mouth of the Mississippi River at 11 a.m. New York time, and heading north at about 14 mph, the center said. It\'s expected to turn toward the north northeast in the next 24 hours and may hit near the Louisiana coast late today or early tomorrow. :br: Maximum sustained winds of as high as 50 mph extend as far as 105 miles from the center of the storm. Winds may strengthen to as much as 52 mph before the storm makes landfall, although the storm may not reach hurricane strength, LePore said. :br: Energy Traders :br: Energy traders were monitoring Cindy because oil refineries are located in Louisiana and oil and gas rigs off its coast are sometimes damaged or evacuated when storms strike. Chevron Corp.\'s biggest oil refinery is at Pascagoula. :br: Chevron, Royal Dutch/Shell Group, Transocean Inc., and other energy producers evacuated workers from Gulf operations as Cindy approached, and the Louisiana Offshore Oil Port, the biggest U.S. oil import terminal, stopped unloading tankers. The port, located about 20 miles off the Louisiana coast, handles about 1 million barrels of crude oil imports a day. :br: Cindy is expected to bring as much as six inches of rain, with 10 inches possible in some areas and storm surges of three to five feet above normal, and may spawn tornadoes in parts of Alabama, Florida, Louisiana and Mississippi.";

var zxcPitch=20;
var zxcColumHeight=500;

function zxcWWHS(){
if (document.all){
if (zxcWH==0){
else if (document.getElementById){
return [zxcWW,zxcWH,zxcWS];


function FitText(){
zxcSplit=text1.split(' ');
while (zxcColL.offsetHeight<zxcColumHeight&&zxcCnt<zxcSplit.length){
zxcColL.innerHTML+=zxcSplit[zxcCnt++]+' ';
while (zxcColC.offsetHeight<zxcColumHeight&&zxcCnt<zxcSplit.length){
zxcColC.innerHTML+=zxcSplit[zxcCnt++]+' ';
while (zxcColR.offsetHeight<zxcColumHeight&&zxcCnt<zxcSplit.length){
zxcColR.innerHTML+=zxcSplit[zxcCnt++]+' ';

</script><style type="text/css">
#ColC {
width: expression((zxcWWHS()[0]/3-zxcPitch)+'px');
left: expression(((zxcWWHS()[0]/2)-(zxcWWHS()[0]/3-zxcPitch)/2)+'px');
border:solid black 1px;

#ColL {
width: expression((zxcWWHS()[0]/3-zxcPitch)+'px');
left: expression(((zxcWWHS()[0]/2)-(zxcWWHS()[0]/3-zxcPitch)/2-(zxcWWHS()[0]/3))+'px');
border:solid black 1px;

#ColR {
width: expression((zxcWWHS()[0]/3-zxcPitch)+'px');
left: expression(((zxcWWHS()[0]/2)-(zxcWWHS()[0]/3-zxcPitch)/2+(zxcWWHS()[0]/3))+'px');
border:solid black 1px;


<body onload="FitText();" onresize="FitText();" >
<div id="ColL" ></div>
<div id="ColC" ></div>
<div id="ColR" ></div>


07-08-2005, 08:13 PM
Thanks ... it's not exactly what i needed but I see what you're doing, and it helps out a lot