Show/Hide multiple DIVs with Select using jQuery

Today ill discuss Show/Hide multiple DIVs with Select using jQuery. Bellow a complete example about that

<script type=”text/javascript”>
$(‘#dropdown’).change(function() {
$(‘#div’ + $(this).val()).show();
<select id=”dropdown” name=”dropdown”>
<option value=”0″>Choose</option>
<option value=”area1″>DIV Area 1</option>
<option value=”area2″>DIV Area 2</option>
<option value=”area3″>DIV Area 3</option>
<div id=”divarea1″>DIV Area 1</div>
<div id=”divarea2″>DIV Area 2</div>
<div id=”divarea3″>DIV Area 3</div>


How to add date picker in joomla site…

In your component html file, put the following code at the top of your function:


Then for your date field in your form:

input class="inputbox" type="text" name="startdate" id="startdate" size="25" maxlength="25" value="" &
input type="reset" class="button" value="..." onclick="return showCalendar('startdate','%Y-%m-%d');"

How to determine if the user is viewing the Joomla front page or not?

If you are using Joomla older version like 1.0 then you’ll only need to verify the current component with the following command:

if ($option == 'com_frontpage' || $option == '') {
echo 'This is the front page';

Bellow porsion for Joomla! 1.5 could be easily confirmed by the following command:

if ( JRequest::getVar('view') === 'frontpage' ) {
echo 'This is the front page';

Just in case the above command doesn’t work then the issue could be a little more complicated and need to check if the current active menu item is the default one. I saw this issue in some 1.5 early versions.

$menu =& JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
echo 'This is the front page';

Really Easy Field validation with Prototype

Here’s a form validation script that is very easy to use.

Really Easy Field validation with Prototype


The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

Include the javascript libraries:

You write elements like this:

passing the validation requirements in the class attribute.

You then activate validation by passing the form or form’s id attribute like this:>

new Validation(‘form-id’); // OR new Validation(document.forms[0]);


It has a number of tests built-in but is extensible to include your custom validation checks.

The validator also avoids validating fields that are hidden or children of elements hidden by the CSS property display:none. This way you can give a field the class of ‘required’ but it’s only validated if it is visible on the form. The demo illustrates what I am talking about


Here’s the list of classes available to add to your field elements:

  • required (not blank)
  • validate-number (a valid number)
  • validate-digits (digits only)
  • validate-alpha (letters only)
  • validate-alphanum (only letters and numbers)
  • validate-date (a valid date value)
  • validate-email (a valid email address)
  • validate-url (a valid URL)
  • validate-date-au (a date formatted as; dd/mm/yyyy)
  • validate-currency-dollar (a valid dollar value)
  • validate-selection (first option e.g. ‘Select one…’ is not selected option)
  • validate-one-required (At least one textbox/radio element must be selected in a group – see below*)

*To use the validate-one-required validator you must first add the class name to only one checkbox/radio button in the group (last one is probably best) and then place all the input elements within a parent element, for example a div element. That way the library can find all the checkboxes/radio buttons to check and place the validation advice element at the bottom of the parent element to make it appear after the group of checkboxes/radio buttons.

When the validation object is initialised you can pass the option {stopOnFirst : true} to enable the stop on first validation failure behaiour. The demo above has this set to false which is the default. If set to true only the first validation failure advice will be displayed when the form is submitted instead of all at once.

new Validation(‘form-id’,{stopOnFirst:true});

You can also pass the option {immediate : true} to enable field valiation when leaving each field. That is on the onblur event for all the form elements.

By default the library will add an event listener to the form’s onsubmit event and stop the event if the validation fails. If you pass the option {onSubmit : false} it wont do that. This way you can call the validate function manually within your own javascript.

By default the library will focus on the first field that contains an error. If you pass the option {focusOnError : false} it wont do that.

You can also pass the option {useTitles : true} to make the field validators use the form elements’ title attribute value as the error advice message.

You can set callbacks by using the options {onFormValidate : yourFunction, onElementValidate : yourFunction}.

onFormValidate is called after form validation takes place and takes two arguments: the validation result (true or false) and a reference to the form. OnElementValidate is called after each form element is validated and also takes 2 arguments: the validation result (true or false) and a reference to the form element.

Instead of using the error message in the validator you can create your own validation advice page element. Now when the script is creating the advice element it first looks for an element with an id matching ‘advice-‘ + validation-class-name + ‘-‘ + and if not found then one matching ‘advice-‘ + . If your form element does not have an id attribute then match the name attribute. If it finds an element it will make that one appear. See the ‘Donation’ field in the demo for an example. If you make a custom validation advice element make sure you set the style to display : none .

Also if you reference the effects.js file from Scriptaculous in your page head, it’ll use a fade-in effect for the validation advice.

CSS Hooks

As well as the validation css classes above, the validation library uses CSS classes to indicate validation status:

validation-failed and validation-passed

The validation advice element has a class of validation-advice and an id matching the following pattern

‘advice-‘ + validation-class-name + ‘-‘ +

so if the field ‘ birthdate’ uses the ‘ validate-date’ validation class then the validation advice element will have an id of ‘ advice-validate-date-birthdate’.

CSS Positioning – Some pointers

1. Absolute Absolute positioning is absolute in relation to the parent element. In this case the parent element is the whole document, so the div is positioned absolutley at 0,0 and will apear in the top left corner.

2. Relative This positions the element relative to where it would have been in the document. Useful for moving something down or across a few pixels for example. In the diagram, the black dashed outline shows where the div would have been without positioning.

3. Relative and Absolute An example of absolute and relative positioning. The outer green box is positioned relative to where it would have been, whilst the inner box is positioned absolutely in relation to the parent green box.

4. float This is where the element in question “hovers” left or right, much like aligning an image left or right works in plain HTML.

6. 3 Column layout Here’s where it gets fun. Below is a classic 3 column layout with the left and right DIV floated correspondingly left and right, and the middle DIV without any positioning at all.

Different css for different browser

In an ideal world, you only need one set of CSS style sheets for your website, and those styles will work with every browser currently being used. This, as every web master soon finds out when he/she uses CSS, is a pipe dream. The modern browsers all have uneven levels of implementation of the CSS standards. As though this isn’t bad enough, their implementations are often buggy – and they don’t share the same bugs! And when you have solved that tricky bit, you find that your site has certain visitors (often your best customers) who, for various reasons, are using older browsers that have only rudimentary support for CSS.

What most (if not all) CSS-using web masters want is a way to specify that a certain style sheet is to be used by such and such a browser and not others, as well as to hide other style sheets from older browsers.

One of the easiest things to do is to specify that a certain style sheet be loaded only by IE 5, 6 or 7 (and later versions) and be excluded from those versions of IE.

Microsoft provides a non-standard extension that allows you to detect those versions of IE, and include or exclude code depending on those versions.

To cause (say) a CSS file like “ie6.css” to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:
<style media=”screen” type=”text/css”>
@import “./css/style.css”;
<style media=”screen” type=”text/css”>
@import “./css/print.css”;
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”./css/ie6.css” media=”screen” />
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”./css/ie7.css” media=”screen” />
Here ‘style.css’ and ‘print.css’ is global. It’s a simple example. If you want to know more details please inform me. I think now you should be able to create a site that works fairly similarly under the browsers being used today.