Web Site
Developers
Web Page Appearance and Javascript - II
Overview
As promised in my last article, here is the JavaScript solution to correct mismatched footer column heights [1.]. One change, you will not find the strenuous complaints pertaining the basic inscrutability of all things JavaScript. I must admit my distaste for this scripting language has not lessened, just that my complaints would be less well grounded were I to sound off too much. Hence, let's accentuate the positive. This time my treatment of column height differences is more generalized. Moreover, I even suggest a more abstract approach at the end, albeit, one I neither tested nor verified. Nonetheless, I am confident that even the latter code could be made to work.
Quick Review
Working Code for the Central Column Set
The original JavaScript code used my site's characteristic of the center column being the most growth prone to simplify the height matching criterion [2.]. However, to lessen the duplication I ask the reader to view in the first section in its article, under the main heading Javascript Code that Worked, subsection Working Code. Please recognize the alert functions are there as to localize potential failures [3.]. Here is a compressed rendition of that section:
<script language="JavaScript" type="text/javascript">
function matchHeight() {
if (typeof document.getElementById \
!= 'undefined' && document.getElementById("central-col-bst") \
!= null || document.body != null) {
...
set needed variables
compare to minimum heights set in css file
if (div_central < 651) {
// do nothing
} else {
...
set variables to new value
use side columns to those values
// new heights shown on site
} else {
message no processing needed
}
}
</script>
Listing 1. Meta Code JavaScript - Matching Central
Column Heights
Inserting Working Code for the Footer Column Set
I inserted the untested code just after the outer if [4.], i.e. where the central column processing has been completed:
<script language="JavaScript" type="text/javascript">
function matchHeight() {
if ( ...) {
...
if (div_central < 651) {
// do nothing
} else {
...
// new heights shown on site
} else {
message no processing needed
}
/* Insert footer code beginning here. */
}
</script>
Listing 2. Insertion Point for JavaScript Code
to Match Footer Column Heights
Meta Code for the Footer Column Set
Here is the logic for the code with one line samples to make the full working code easier to read:
Set unique variable names for footer entities/values
use fully descriptive names to avoid unintended actions, e.g.:
var leftFoot, centFoot, rightFoot, maxFooter, ...
Assign values
leftFoot = document.getElementById("menu-bottom-left").offsetHeight;
Test for a footer div greater than the minimum height.
If none exist, do nothing
Or If even one is larger:
Test first two, assign one taller variable:
tallerFooter = leftFoot;
Test the taller variable against the third div
Assign the taller of the pair the maximum value:
maxFooter = tallerFooter;
Now assign the maximum height found to a variable
that applies to all footers:
maxFooterHeight = maxFooter;
Finally exhibit that value in all footers, e.g.:
document.getElementById('menu-bottom-left').style.height =maxFooterHeight +"px";
Listing 3. Meta Code to Match Footer Column Heights
It's really simple, prepare yourself if you need to do any real work, i.e. variables to assign values. Check to see if matching is required; if so find the largest of the set and use the found value to be exhibited on all columns.
Actual Working Code for the Footer Column Set
The full working code may be a bit more difficult to read, however, using the meta outline above it should be much easier to understand. At the location in the code shown above the new code was inserted. Once revised, this code worked, but the message lines and the white space were removed to keep it compact:
// Begin Footer processing
var leftFoot, centFoot, rightFoot, maxFooter, \
tallerFooter, maxFooterHeight;
leftFoot = document.getElementById("menu-bottom-left").offsetHeight;
centFoot = document.getElementById("menu-bottom-central").offsetHeight;
rightFoot = document.getElementById("menu-bottom-right").offsetHeight;
if (leftFoot > 150 || centFoot > 150 || rightFoot > 150) {
if ((leftFoot - centFoot) < 0) {
tallerFooter = centFoot;
} else if ((leftFoot - centFoot) > 0) {
tallerFooter = leftFoot;
} else if ((leftFoot - centFoot) == 0) {
tallerFooter = leftFoot;
}
if (tallerFooter - rightFoot < 0) {
maxFooter = rightFoot;
} else if (tallerFooter - rightFoot > 0) {
maxFooter = tallerFooter;
} else if (tallerFooter - rightFoot == 0) {
maxFooter = tallerFooter;
}
maxFooterHeight = maxFooter;
document.getElementById('menu-bottom-left').style.height =maxFooterHeight +"px";
document.getElementById('menu-bottom-central').style.height =maxFooterHeight +"px";
document.getElementById('menu-bottom-right').style.height=maxFooterHeight +"px";
} else {
alert("no action needed");
}
Listing 4. Inserted JavaScript Code That
Match Footer Column Heights
I advise you to note the code syntax is not completely consistent [5.] a fact we will return to later when I discuss some of the problems I encountered in getting JavaScript to perform in the manner I desired.
Seeing the Code Match the Footer Columns
Central Column Code is Active
Even on my 20 inch monitor, I lack the depth to show both the central columns being enlarged while showing the mismatch of the footer columns. Therefore, this graphic uses a menu that suffices as is, however, it too shows a message that it uses the central column code:
Figure 1. Menu Short List Matched Heights JavaScript Executes - Screen Shot
The message on the screen says: "Do nothing, sees standard min height. Div Height is 650". If you look at either listing 1 or 2 just after the outer else at the end of the code, there is the comment "message no processing needed" that is the location of an alert that exhibits the former message content. This proved that the matchHeight JavaScript function is running for the central div columns, however, since no column exceeds the minimum height set in the cascading style sheet no further processing is required. Therefore, it is no surprise the code applying to the footers kicks.
Footer Column Code is Active
This screen shot shows the last message prior to the applying the new height to all div column in the footer. It's message is: "Assigning 192 as the min. heights". Notice too this is the better image, showing both side footer columns being shorter by differing amounts from the center footer div column:
Figure 2. Footer JavaScript Processing Unmatched Heights - Screen Shot
Matched Footer Column Heights with JavaScript
Once the last message is cleared in the graphic just above, the footer column heights are matched:
Figure 3. Menu Full Screen Shot (Enlarge) Matched Heights
Thus, we now have JavaScript implemented to match column heights of footers.
Failure of the Original Code Match the Footer Columns
The original JavaScript code, though nicely constructed, failed to function when tested against a menu template that required matching heights of both the central and the footer columns. I cannot reasonably rant, this time, since I made at least two errors. To get to that stage, I devised a test using only a portion of the footer code that showed the central column code was able to function. The first key was the balking on this syntax [6.]:
if (!(leftFoot > 150 || centFoot > 150 || rightFoot > 150)) {
Where the error seemed to be the extract set of parenthesis and the negation [7.] as noted in the exclamation point. My failure was not to have used Error Console in Firefox that might have identified the real problem. I also hastily removed other instances of doubly enclosed condition statements. However, as I noted just after the code in Listing 4., it was not completely consistent. That is, in the first embedded if {} else if { etc. I failed to remove the the double parenthesis, but it worked. My other error was identified by the Error Console, when I remembered to employ it: I had mistakenly used a single equal symbol when two are required to show equivalence:
} else if ((leftFoot - centFoot) == 0) {
// the line above is correct, single "=" is an assignment
It took just those two fixes for the code to function seemingly perfectly.
An Optional JavaScript Code to Match Columns Heights
I almost took this route, but I dropped it before solving all the issues. However, if you wish to perform the same sort of task for an n (number) column page, here is my rough approach. Define your variables (arrays) and assign column heights as found into the array:
var unorder_arr = new Array(n);
unorder_arr[0] = document.getElementById("column_1").offsetHeight;
unorder_arr[1] = document.getElementById("column_2").offsetHeight;
unorder_arr[2] = document.getElementById("column_3").offsetHeight;
...
unorder_arr[n-1] = document.getElementById("column_n").offsetHeight;
var ordered_arr = new Array(n);
function sortNumber(a,b) {
return a - b;
}
ordered_arr = unorder_arr.sort(sortNumber);
Listing 5a. Ordering Column Heights
The inspiration comes off a W3Schools, look at Example 2. This code actually works [8.], since I had my doubts I tested a bit larger array and separated the writes by more than one line break. What is needed it to pull the highest value, which is quite simply accomplished by taking last element, n -1 in the ordered array:
var maxHeight = ordered_arr[n-1];
// Now apply it too all column heights
document.getElementById("column_1").style.height =maxHeight +"px";
document.getElementById("column_2").style.height =maxHeight +"px";
document.getElementById("column_3").style.height =maxHeight +"px";
...
document.getElementById("column_n").style.height =maxHeight +"px";
Listing 5b. Ordering Column Heights
Obviously this was an intellectual exercise, it will probably work well if tweaked properly. However, if the number of columns exceeds three it might be better, as was suggested to me, to read up on html tables. In any case, I was just showing scripting can be a powerful tool, even when it's JavaScript.
Reminder, Not Yet Implemented in Production Code
I intend to finish this series before I am able to rationalize the code. By rationalize I mean to as far as possible separate html tag structure from appearances set by the css file and code into separate, external location. That separation will result in a cleaner, easier to refine web site structure. Therefore, implementation of these methods described in this series will be delayed until those tasks are accomplished.
I have, at least one more article focusing on web page appearances that needs to be completed before I take on the task of removing explicit code from the page templates. That article deals with page positioning. I have noticed on wide screens the pages are distorted, particularly when using the full screen on wide screen monitors. I plan to focus on the front page and show at least one method to effect the task, while throwing in script and css settings to match the column heights where needed.
]The code will probably take place in two phases. JavaScript code would go first, because there is less of it and it does not have the same security issues [9.] as the php (or perl or python) would have. I had mentioned long ago when writing about dynamic pages, the php as shown was repetitive with near duplication. Hence, that code should be reduced to common functions and/or objects to make the code more compact and efficient. Moreover, as mentioned in footnote 9 those scripts contain sensitive data, which should not be visible particularly knowledgeable visitors.
When I reach the goals described above, I plan to remove the test pages from the site permanently. However, until then, if you wish to see this code in operation run the the link. Prepare yourself to clear a copious set of messages as you step through the height matching [10.] to see the action. [Warning, use only the menu in the left hand column of the main page. The Navigator bar in the center footer just goes to current production code.]
Summary
I think I delivered, showing a way I know to work to adjust column heights for both areas where there are potential mismatches in heights between column sets. That is, the code is there to match both the central and footer columns. Moreover, I generalized the code where the presumption of the potentially longer column was removed. Finally I showed code where it was not even necessary to know the actual identity of the longer column. Just the matches should function when the maximum height is applied to all columns in a set.
Despite JavaScript's meeting my goals, for my site the css file settings are the most rational solution for the footer columns. Moreover, wherever possible I strongly suggest using any factor that makes your site's code simpler.
Corrections, suggested extension or comments write: H. Cohen.
© Herschel Cohen, All Rights Reserved
Return B/ST Home or Problems Page
____________________________________________________________________
1. Where I used css instead. Return
2. That is, if that column were no more than the minimum
assigned by the cascading style sheet no action was
necessary employed to simplify the code. Return
3. All the alert()s were commented out of working code.
Return
4. I had planned to use a separate function for the footer
initially, however, though easily done in other scripting
languages I was certain JavaScript would balk. Return
5. A fact I did not notice until I pasted the code into the
listing. Return
6. Which is simple negation of the condition. Return
7. I examined the documentation and the exclamation point
symbol should have worked. Return
8. Go here to revise and test the code, Remember to allow
JavaScript to run in your browser. Also remember you need
to enclose the code in tags that label it as JavaScript
code. Return
9. JavaScript is fully visible in the "View Source" tool in
your browser, hence, you should be cognizant of security
issues in your js code. On the other hand, while scripting
such as php disappears, if you are using databases your
passwords are hard coded into the scripting file.
Return
10. Nearly all the alert messages are active in the testing
code. Return
____________________________________________________________________