x Library and eventListener

[-saturn-]

Hello.

I recently found out about the x.js library and already used it in one project of mine. It's a great tool!

This time I want to do more though by adding a final touch to the "mechanics" of my site.

I have a CSS-based layout with a header, a menubar, another bar used to display quotes, 3 columns and a footer.

I'm using the x library to re-position the footer after everything else has loaded and having found out the individual heights of the main column and the left sidebar.

Everything works fine until I resize the window though, as it remains static.

I figured I should use the xAddEventListener to have the footer go through the correct adjustment every time the browser window changes.

The problem is that as soon as I resize the window, the browser goes into an endless loop and eventually freezes.

Could someome please tell me what I'm doing wrong?
Thank you in advance.

I'm attaching a .txt file with the functions I'm using to achieve all of the above.

[MikeFoster]

Hi -saturn-,

I'm glad you like X

I don't see a problem with your code - tho I might suggest that you add the event listener 'after' the layout is adjusted. Is the page online?

[-saturn-]

Mike, I sent you a PM.

[MikeFoster]

Hi -saturn-,

The variable RightSideBarWidth is undefined.

I'm still not sure about the resize loop problem. We'll look into it further.

Here's another way you might write that function (there are many ):

01 function AdjustFooter()
02 {
03   var ftrMarginTop = 10;
04   var leftSideBar = xGetElementById('leftsidebar');
05   var mainCol = xGetElementById('maincol');
06   var maxH = Math.max(xHeight(mainCol), xHeight(leftSideBar));
07   xHeight(leftSideBar, maxH);
08   xHeight(mainCol, maxH);
09   alert('About to position footer...');//debug//
10   xMoveTo('footer', 0, xPageY(mainCol) + xHeight(mainCol) + ftrMarginTop);
11   xShow('footer');
12 }

Here's a few notes about the code and a few things to keep in mind while debugging:

1) Lines 7 and 8: If the widths are controlled by css then the browser has already calculated correct widths.
2) Lines 7 and 8: After resizing container elements their contents will reflow. This may also affect the vertical scrollbar and so change clientWidth.
3) Line 9: Sometimes a reflow doesn't finish before your next statement is executed (or at least it seems that way ). Watch for that here - use the alert() test it.
4) Line 10: Let 'footer' have position:absolute. Usually you'll let 'maincol' and 'leftsidebar' have position:relative, but sometimes it works ok if they are static.

[-saturn-]

Thanks for your reply, Mike.

Your code is much more compact yet it doesn't work for me. Not on IE 6 at least. It works in Opera 7, but compresses the footer to a minimum size, thus destroying the liquid design the site features.

What could be going so wrong?

[MikeFoster]

Sorry about that, I didn't get to test it. But my code doesn't resize the footer. Your code is fine, just define RightSideBarWidth.

I'll take another look.

[-saturn-]

This is one of the things that can make you go completely crazy!

The same script that used to work when I first posted it here, doesn't work anymore! Not in IE 6, Opera 7 or Netscape 7.

xShow('footer') doesn't bring up the footer anymore and as I said in my previous post, the footer in Opera doesn't spread to 100% of the screen.

Should I use an exorcist on my computer? :desperation galore:

PS: How can a JS function work if it's in an HTML file but stop working as soon as you link to it externally?

[MikeFoster]

When I visit your page I still get "'RightSideBarWidth' is undefined".

If you've changed footer to have 'position:absolute' that explains why its width is not 100%. In my code above you can set its width, as below:

function AdjustFooter()
{
  var ftrMarginTop = 10;
  var leftSideBar = xGetElementById('leftsidebar');
  var mainCol = xGetElementById('maincol');
  var maxH = Math.max(xHeight(mainCol), xHeight(leftSideBar));
  xHeight(leftSideBar, maxH);
  xHeight(mainCol, maxH);
  //alert('About to position footer...');//debug//
  xWidth('footer', xClientWidth());
  xMoveTo('footer', 0, xPageY(mainCol) + xHeight(mainCol) + ftrMarginTop);
  xShow('footer');
}

[-saturn-]

Hi Mike.

First of all thank you for trying to help still and my apology for confusing you. All this time I was trying your suggestions locally, that's why you saw no difference on the site.

I changed everything online as you proposed and it works. I'm very puzzled right now though.

I also tested it locally and it works fine on all 3 browsers.

Thank you very much, Mike!

I'm going to sleep now (1:50 am here) trying to think how on earth this happened. Wish me sweet dreams! [img]images/smilies/tongue.gif[/img]

[MikeFoster]

Sleep tight