SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: x Library and eventListener
-
Nov 4, 2003, 03:59 #1
- 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.
-
Nov 4, 2003, 09:30 #2
- 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?Cross-Browser.com, Home of the X Library
-
Nov 4, 2003, 11:39 #3
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Mike, I sent you a PM.
-
Nov 4, 2003, 14:24 #4
- 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 }
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.Cross-Browser.com, Home of the X Library
-
Nov 4, 2003, 16:04 #5
- 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?
-
Nov 4, 2003, 17:18 #6
- 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.Cross-Browser.com, Home of the X Library
-
Nov 5, 2003, 15:01 #7
- 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?
-
Nov 5, 2003, 17:18 #8
- 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'); }
Cross-Browser.com, Home of the X Library
-
Nov 5, 2003, 17:48 #9
- 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]
-
Nov 5, 2003, 21:43 #10
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sleep tight
Cross-Browser.com, Home of the X Library
Bookmarks