SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    x Library and eventListener

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

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike, I sent you a PM.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ):
    Code:
    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.

  5. #5
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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');
    }

  9. #9
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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]

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sleep tight


Bookmarks

Posting Permissions

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