Post #329

Flexible floats 2

26th March 2004, late evening | Comments (6)

Okay, revision time. Earlier today I posted an article describing how I'd built my new reading page. Five minutes after I put that live, Mark Wubben pointed out a couple of ways the script could have been improved, and he was right.

So, here’s the revised Javascript code, and I think you’ll agree it's a hell of a lot simpler than the first effort:

1. // Event Listener
2. // by Scott Andrew - http://scottandrew.com/
3. function addEvent(obj, evType, fn)
4. {
5. if (obj.addEventListener)
6. {
7. obj.addEventListener(evType, fn, false);
8. return true;
9. }
10. else if (obj.attachEvent)
11. {
12. var r = obj.attachEvent('on'+evType, fn);
13. return r;
14. }
15. else
16. {
17. return false;
18. }
19. }
20.  
21. // from your man at http://www.kryogenix.org/
22. addEvent(window, "load", resizeBooks);
23. addEvent(window, "resize", resizeBooks);
24.  
25. function resizeBooks(e)
26. {
27. // check this browser can cope with what we want to do
28. if (!document.getElementById) return;
29. var leftDiv = document.getElementById('left');
30. if (!leftDiv) return;
31. if (!leftDiv.offsetWidth) return;
32.  
33. // if div#left is wide enough to accept two or more floated <dl>s
34. if (leftDiv.offsetWidth >= 621)
35. {
36. // loop through <dl>s
37. defLists = leftDiv.getElementsByTagName('dl');
38. for (var i = 0; i < defLists.length; i++)
39. {
40. // set class to nada
41. defLists[i].className = '';
42. }
43. }
44.  
45. // if div#left is not wide enough to accept two or more floated <dl>s
46. else
47. {
48. // loop through <dl>s
49. defLists = leftDiv.getElementsByTagName('dl');
50. for (var i = 0; i < defLists.length; i++)
51. {
52. // set class to liquid
53. defLists[i].className = 'liquid';
54. }
55. }
56. }
57. Download this code: 329a.txt

And here’s the revised CSS (note the addition of the class ‘liquid’, which has replaced all the complicated Javascript pixel-sizing):

1. /* lay everything out for browsers like IE */
2. body#reading dl {
3. border-bottom: 1px solid #ddd;
4. float: left;
5. height: 170px;
6. margin: 0 25px 20px 0;
7. padding: 0 0 0 113px;
8. position: relative;
9. width: 150px;
10. }
11.  
12. /* Must have this level of specificity in order to override rules below it in the hacks */
13. body#reading div#left dl.liquid {
14. display: block;
15. float: none;
16. margin-right: 0;
17. width: auto;
18. }
19.  
20. body#reading dl dd div {
21. background: url('/blog/commonpics/bg_image.gif') no-repeat bottom right;
22. left: 5px;
23. position: absolute;
24. top: 5px;
25. }
26.  
27. /* reset float for Opera */
28. html > body#reading dl {
29. float: none;
30. }
31.  
32. /* reset float for FF */
33. html[xmlns] body#reading dl {
34. float: left;
35. }
36. Download this code: 329b.txt

Thanks to everyone who tested the first version out and told me it fell over in IE. You can see this new script working on the demo page.

Jump up to the start of the post ↑

Site powered by