We have been asked by Tim Stimpson to update his website to incorporate an online booking/reservation and payment system.
Archive for May, 2009
Tim Stimpson Spanish Apartments
Friday, May 29th, 2009Tieing Joomla Menus Together
Friday, May 29th, 2009In Joomla if you have more than 1 menu defined you may have discovered that the Main Menu item does not remain active whilst in the sub-menu. This is not ideal from a usability perspective, since in my sites I always want to make use of signposts to show a visitor whereabouts in the site they are.
So how do you go about achieving this. Well a simple way I use is to make use of JavaScript to walk the DOM tree to see if the Sub Menu is being displayed and one of it’s items is current, and then if this is the case set the associated item in the Main Menu active by adding a new CSS class definition to it that can then be styled using CSS in the normal way. Of course if the visitor has JS disabled it degrades gracefully.
So how do we got about adding the new CSS class to the page after the page has already been loaded?
Basically the first thing to do is ensure that the sub menu is contained within a element identified by an ID - typically I use a DIV - lets call this and “submenu”. This needs to be done in the index.php for the Joomla template being used.
So once the page is loaded we need to find out if any of the list items in the “submenu” div are set as “current” (as defined by the CSS class definition) and set the corresponding main menu item to be active as well by adding some new CSS class definition to it that we can then control via CSS. This is where knowledge of the DOM comes in.
In the “submenu” div, the LI’s will be a child of the child of the DIV (by nature of the LI is contained in the UL contained in the DIV we defined in index.php. The UL and LI’s are added by the Joomla menu module for us).
So first we need to get the DOM object for the “submenu” DIV, and check to see of the ID is present (since it may not be there on all pages depending on how you’ve set it up in Joomla):
var subMenu = document.getElementById("submenu");
if (!subMenu) { skip = true; }
This Object will contain as objects all its children and their properties.
We then need to step through each of its grandchildren to see if one of them is set “current”. One might not be of course.
Once we find an current LI we then need to search through all the LI’s in the document to find the associated item in the Main Menu. Fortunately In Joomla each menu LI is given a unique ID - shown in the Menu control Panel - (X) in the example below - so we can work out which LI we’re after. So we step through every LI in the document until the correct Item class is found and then add another class name to it, which we means we can then reference it via CSS. Since this LI won’t be active it will only have 1 class assigned to it - the ID of the menu item.
if (!skip) {
for (var i=0; i < subMenu.childNodes.length; i++) {
if (subMenu.childNodes[i].id == ("current")) {
// Set the associated main menu item active
var lists = document.getElementsByTagName("li");
for (var i=0; i < lists.length; i++) {
if (lists[i].className == ("itemX")) {
lists[i].className = "menuactive " + lists[i].className;
}
}
}
}
}
The only thing left to do is wrap this up within a function statement:
function menuStyle() {
....
}
and call it once the page is loaded by including the following in the
element in the HTML (PHP) file:
<body onload="menuStyle();">
The new JS function can be specified in the HEAD of the HTML document or an external JS file.
Hope this helps someone.
Busy on Joomla Developments
Thursday, May 21st, 2009Been a bit quiet recently, mainly because been busy on developing 2 Joomla based sites for a client.
Both the sites require bespoke templates (so none of the off the shelf stuff).
The first for a health care company is nearing completion for stage 1, basically the template is with the client now for sign off and they are busy inputting and editing their content. A key requirement for this site was to make it accessible as close as possible to WCAG Level AA. After submitting the site for validation at the first pass it only failed on 1 thing really, which was fairly straight forward to resolve. This was to do with using the H elements in the correct hierarchical sequence, i.e. H1 should be followed by a H2, by a H3 etc. Joomla doesn’t quite do this out of the box and sometimes misses a level out, i.e. jumping from H1 to H3. So required further customisation to the template to correct this.
The site also needs to be secure, so there is no front end access to manage the content it’s all done via the back end control panel. Course it can be easily spotted that the site is Joomla or CMS driven, and therefore the URL for the control panel is well known. So a super strong password is required. However whilst looking into this found a neat plugin that adds another layer of security to the admin screens - it suffixes the admin URL with a secret key - get the key wrong and you’re presented with a 404 Page Not Found Error. Only when you get the URL with the secret key right are you presented with the Control Panel login. It’s called JSecure and requires Joomla 1.5. I’ll be using this on all my sites now going forward.
The second site, for a small business again posed a problem in that each page alternates between text on the left, picture on the right to picture on the left, text on the right. This was easily solved by simply managing the content correctly and setting the order of each article in the relevant category. It’s so important with the Content Managed systems to get the content sorted and organised first! I strive to get everything on the page as content and keep the template for controlling how the content is presented, rather than adding the difficult parts of the content into the template, which I see done quite a bit - defeats the object really. Again the general template for this is complete and with the client for initial testing.
I still have another Joomla based site waiting in the wings for development now as well!
PS. Whilst trying to dream up ultra hard passwords, I found a website that will generate them for you The BitMill - Random Password Generator. You can set how hard you want it to be, how long, what sort of characters are used etc. etc. No more racking the brains to dream up passwords!
JTI Website Goes Live
Tuesday, May 12th, 2009We are pleased to announce that as of this morning JTI Electrical and Mechanical Services Ltd website is live.
Whilst being a primarily static website key areas of the website are able to be updated easily by JTI themselves without the need to edit any of the HTML, or using a full featured content management system like Joomla. We have done this by making key parts of the site, as agreed with JTI in advance controlled by a single external XML file that JTI can edit outside of the website and upload separately.
This is in effect a half way house between a truly static site and a feature rich content managed site.
Grace Website Updated
Friday, May 8th, 2009Just a quick post to say we have just completed an update on behalf of a Win Marketing to the Grace website (part of Nottingham University).
The update was to incorporate a new micro-site for a forthcoming conference into their existing website.
The new micro-site can be found at http://www.grace.ac.uk/events/vista09/index.php
Horizontal Menus
Wednesday, May 6th, 2009I often seen questions in forums asking how can you create horizontal menus in CSS without using tables.
This is actually quite straight forward and simply requires the use of UL within the HTML and a small amount of CSS (as opposed to all the table code required to achieve the same effect).
So the HTML for a simple menu then will be as follows:
<div id="menulist">
<ul>
<li><a href="item1.html">Item 1</a></li>
<li><a href="item2.html">Item 2</a></li>
<li><a href="item3.html">Item 3</a></li>
</ul>
</div>
Which will give a menu list that looks like the following:
- Item 1
- Item 2
- Item 2
So how do we turn it into a horizontal menu? This is where the CSS comes in!
In our CSS style sheet, we firstly we need to turn the bullets off, and set it to display inline, since by default UL is a block level element; thus:
#menulist ul {
list-style-type: none;
display: inline;
}
Now to get the menu items to display horizontally with a gap between each item:
#menulist ul li {
position: relative;
float: left;
margin-right: 20px;
}
And there we have it!
But what if you want the menu to be displayed on the right hand side of the page?
Well it’s as simple as changing the float: left to float: right. However, when you do this the menu items are reversed, i.e. Item 1 will appear on the right of the menu with Item 3 on the left. So you need to reverse the menu items in your list to counteract this.
This gives a menu list that is semantically correct without the need for tables.
Of course you can add background images, background color, borders, etc. to the list items to make them look as you desire, but the point is you don’t need to use tables to add any fancy graphics/style to the menu - it can all be done in CSS.
One last little trick to remember is to get the ANCHOR link to fill the whole width of the LI don’t specify any padding on the LI itself, put this on the ANCHOR and set the ANCHOR to be a block-element. This will mean hovering over the whole of the LI will activate the menu - rather than just the text.
#menulist ul li a { display: block; }
IE6 Issues
Now this all works fine in everything apart from IE6 or below, so we need to apply a fix for these old browsers, thus:
<!--[if lt IE 7]>
<style>
#menulist ul li a { display: inline-block; }
</style>
<![endif]–>
Be sure to place this code after your other styling, or any style sheets reference, otherwise it will get overridden!
So now we have it working consistently across all browsers.
Where this really wins overs tables is when you have sub-menus. With a table layout you would have to nest tables; and if you go to more than 2 levels of menu can become a real mess. For aural browsers this is a significant issue since the nested tables break up the correct semantic flow of the menu.
Whereas by using lists for your menu items the semantic flow is kept in tact, the code is neater, and if you need to amend it in the future (adding a new menu item for example) it’s a sinch!
Blog Home
-
You are currently browsing the Jadex Solutions blog archives for May, 2009.
Archives
Categories
- CSS Tips n Tricks (2)
- General (1)
- Joomla (1)
- News (5)
- SEO Methods (2)
- Uncategorized (2)
