
At long last, I have completed the changes to the comment system. This should make is easier for people to add comments, and hopefully, more people will do so.
The system has a bit of AJAX. I really did this because I didn't like how after each comment posting, the page was repositioned to the top. If you added a comment to the last article on the page, after submitting the page would again be at the top. The AJAX method submits the form and fetches the entire comment table for the article after the post. That eliminated the need to reload the page and eliminated the repositioning.
Since I was on an AJAX kick, I figured the sign in and sign up should also be reload free. For both, I made a centering "pop-up DIV". I'm not a fan of pop-up windows, even if it's for a good cause. This DIV tag holds a table with the login or sign up form. Initially, I saw this table didn't stand out enough against the regular page. I've been using PNGs with alpha layers to "dim" tables for sometime. So I decided to apply it to the body of the page while the pop-up DIV was active. It had the added benefit of rendering the links of the background page unusable, so it's acts as a pseudo-modal.
The dim function went quite smoothly for Firefox and Opera. However, Internet Explorer was an other story. Both Firefox and Opera have the
The work around isn't perfect. In IE, you have to add
An other work around was required in IE. When a comment span is expanded, the focus is set to the comment block. However, this doesn't work in IE. This may be due to a bug in IE 6 dealing with setting focus I read about. Since the focus isn't a show stopped, there is a simple work around. Try it and let it fail. This line will do that::
In transferring the database from the old comment table to the new comment table, I tried something new: INSERT INTO ... SELECT. A single SQL line allowed me to translate the entries in one table directly into the new table. It looked like this
What is going on here is the columns from the table 'Comments' and 'Login' are selected in the order in which they will be entered into the new table. And that's all—it just works. Sure beats writing a custom PHP script to for translating tables :)
The system has a bit of AJAX. I really did this because I didn't like how after each comment posting, the page was repositioned to the top. If you added a comment to the last article on the page, after submitting the page would again be at the top. The AJAX method submits the form and fetches the entire comment table for the article after the post. That eliminated the need to reload the page and eliminated the repositioning.
Since I was on an AJAX kick, I figured the sign in and sign up should also be reload free. For both, I made a centering "pop-up DIV". I'm not a fan of pop-up windows, even if it's for a good cause. This DIV tag holds a table with the login or sign up form. Initially, I saw this table didn't stand out enough against the regular page. I've been using PNGs with alpha layers to "dim" tables for sometime. So I decided to apply it to the body of the page while the pop-up DIV was active. It had the added benefit of rendering the links of the background page unusable, so it's acts as a pseudo-modal.
The dim function went quite smoothly for Firefox and Opera. However, Internet Explorer was an other story. Both Firefox and Opera have the
document.body.offsetHeight
which returns the total heights of the rendered page. In IE, this method returns the heights of just the visible window—it does not include what is beneath the scroll bar. In fact, IE has no function (as far as I could tell) that will return the total length of a rendered page. This is a problem because the dim function works by placing a DIV tag overtop the entire page. It can not be smaller then the rendered page (obviously) and if it is made larger, the scroll bars are extended to reflect the page's new sizeThe work around isn't perfect. In IE, you have to add
document.documentElement.scrollTop
to document.body.offsetHeight
. This will get a height for the DIV tag that will cover the visible window starting from the top. However, anything below the visible window is not covered.An other work around was required in IE. When a comment span is expanded, the focus is set to the comment block. However, this doesn't work in IE. This may be due to a bug in IE 6 dealing with setting focus I read about. Since the focus isn't a show stopped, there is a simple work around. Try it and let it fail. This line will do that::
try{ document.getElementById( 'Comments' ).focus(); } catch( e ) {}
INSERT INTO CommentsNew SELECT 0 as ID , Page, Author, TimeWritten, '0.0.0.0' as IP, DisplayName, Country, Website, Comment FROM Comments, Login WHERE Comments.Author = Login.ID