ElcomCMS: Place arrow on panalbar menu item with sub items

The default ElcomCMS panalbar menu does not have functionality to place an indicator on menu items that have sub items. This is very important for usability.

You can implement this by inserting the following code in your PostCustomJavaScript.js file.


// Place arrows on each panalbar menu item that has sub-items
$(document).ready(function() {
    $('.slide').each(function(){
        if($(this).css('display') == "none"){
            $(this).prev().children('span').addClass('menuArrowRight');      
        }else{
            $(this).prev().children('span').addClass('menuArrowDown');
        }
    })  
})

You will also need to add something like the following to your site CSS file.
Obviously this will depend on how your menu is styled and where the indicator images are located :

.menuArrowRight{
    background: url("/images/UserUploadedImages/arrow_blue_side.gif") no-repeat scroll 160px center;
}
.menuArrowDown{
    background: url("/images/UserUploadedImages/arrow_blue_down.gif") no-repeat scroll 160px center;
}

Elcom CMS: Changing Related Articles Heading Text with jQuery

jQuery is included as a javascript library within the Elcom CMS.
It is very easy to learn and use, and extremely powerful, allowing you to customise existing functionality and add your own custom functionality.

As a small example, you can change the default Related Articles heading text simply by including the following jQuery script in your PostCustomJavaScript.js file:

// Change default heading text of Related Articles display.
// Here we are changing the default "Related Articles" to "Related Items"
$(function(){
    $('.relatedItems h2').html('Related Items').css('display','inline');
});