Finding HTML elements using Javascript nextSibling and previousSibling

Updated 13/06: See below for update on IE compatibility.

Quite often when writing Javascript functions you will want to get a reference to the element immediately before or after the one you’re working with; for example, when validating a form you may want to toggle the display of a <span> containing an error message that appears immediately before the input being validated.

The built-in Javascript properties nextSibling and previousSibling will return a reference to the element after/before your chosen element respectively, but they have a major drawback when it comes to whitespace in your code – any spaces or line-breaks in the source code will be interpreted as DOM nodes, and your nextSibling/previousSibling call will return a blank text node instead of the object you were expecting.

To get around this, I’ve extended the Object type and added two new methods, named nextObject() and previousObject(). They perform exactly the same function as nextSibling and previousSibling, but will only return the next/previous HTML element, ignoring text nodes altogether:

While I do think that Joomla is probably the best open source CMS out there, it is not without some serious drawbacks. I won't go into them much now (cough multiple access levels... cough), but one area that I think is pretty mediocre is in how they handle using multiple templates, or subtemplates.

When I was looking for a way to have the floating lightbox blog entries that are found on the home page, the challenge that I had was in forcing the popups to not open the main site template in the popup window, which Joomla forces by default, but rather give me a separate window that I could style with different rules. 

In previous versions of the Joomla CMS (1.0.x) you could do this by simply pointing your links to index2.php, which was meant to be used as a print template. From there, you could include a different set of styles in the header and have it do what you wanted. Joomla 1.5  has changed that around a bit. One hack that I wound up using, is that if you pass the url parameter:

?tmpl=component

the page will open up using just the component view, which in this case is com_content (the default content component view). This is basically the same thing as the old print view in Joomla 1.0. This gives you a blank version of your same content template that you can make changes to. 

The caveat here is that if you wanted to make any structural changes, then it would mean that you would have to actually modify the core engine that generates the com_content component, right? The problem there is that if there is an update to the engine, your changes would be wiped out. Luckily, Joomla 1.5 also includes a fantastic addition in content overrides. Basically, all you have to do is create a file called component.php in your custom template folder, and when Joomla calls any page with the tmpl=component switch, it will load this page instead of the index.php page. In the component.php page, you can treat it basically the same as the index.php page, and style it however you want. 

Run

ALTER TABLE `jos_content` ADD `article_image` VARCHAR( 255 ) NOT NULL

in for instance phpMyAdmin.

Edit administrator/components/com_content/models/article.xml add:

<param name="article_image" type="text" default="" label="Image" description="" />

in the first params section for instance below the access entry.

Add

var $article_image = null;

to libraries/joomla/database/table/content.php

Add

$form->set('article_image', $row->article_image);

to editContent() in administrator/components/com_content/controller.php

The result is that you now have a new field called article_image that can be used in various ways to display a separate image that is not a part of the article, similar to what you have per default for categories and sections.

On an unrelated side note, if custom CSS classes are added to /templates/system/css/editor.css they will appear for selection in tinyMCE. You also need to include it in your template’s index.php, like so:

<link href="templates/system/css/editor.css" rel="stylesheet" type="text/css"/>

That however screwed up my CSS, until I simply commented out everything above STYLES FOR JOOMLA! EDITOR. The end of my editor.css now looks like this:

/* 
. . . 
div.caption       { padding: 0 10px 0 10px; } 
div.caption img   { border: 1px solid #CCC; } 
div.caption p     { font-size: .90em; color: #666; text-align: center; } 
*/ 
/* STYLES FOR JOOMLA! EDITOR */ 
hr#system-readmore  { border: red dashed 1px; color: red; } 
hr.system-pagebreak { border: gray dashed 1px; color: gray; } 
.float_left{ float:left; } 
.float_right{ float:right; }

Update: To add fields to the jos_users table in a dirty and quick way as opposed to the proper way:

1.) Add the fields to the jos_users table, for instance firstname.

2.) Add the variables to libraries/joomla/user/user.php and libraries/joomla/database/table/user.php, it has to look like this at the top for instance: var $firstname = null;

3.) Add the input fields to the registration form.

4.) Optionally: In my case I had to override the name field (doesn’t make sense in having a firstname, lastname and name field). In that case I simply added a line to fill the name with firstname and lastname before validation happens (in the register controller, I think the method in question is called register_save()).

Update: I just added a new column to the sections, the point of the new field is to keep track of whether or not we are to show galleries tagged to the section in question when we are in our totally custom blog layout. It was somewhat easier than to the articles, begin with running the following SQL:

ALTER TABLE `jos_sections` ADD `show_galleries` TINYINT( 1 ) NOT NULL

Then add the following HTML to administrator/components/com_sections/admin.sections.html.php add at line 275:

<tr> 
    <td class="key"> 
        <?php echo 'Show Galleries' ?>: 
    </td> 
    <td colspan="2"> 
        <?php echo $lists['show_galleries']; ?> 
    </td> 
</tr>

Add the following PHP to administrator/components/com_sections/admin.sections.php add at line 264:

$lists['show_galleries'] = JHTML::_('select.booleanlist',  'show_galleries', 'class="inputbox"', $row->show_galleries );

Finally, just like with the articles, add this PHP to libraries/joomla/database/table/section.php:

var $show_galleries     = null;

Done!