Quick Menu
Helpful Links
Available Styles
Latest News
Version 1.1.0 released
We have fixed problem with Multi-select-box in relatively positioned divs and in Tables.
Its now works pretty well in all browsers.
Safari supports multiselect
The latest safari browser now renders PSPL multiselect boxes accurately. Thumbs up for safari users n developers.
Version 1.0.2 released
We have fixed the gray text bug. You can now change the text style of th text in box using the css file.
We have successfully tested a PHP generator class for PSPL Multi Select Box.
This class enable you to generate PSPL Multi Select Boxes without havting to write javascript functions and options again and again. The call format is very simple and you can define different objects for different styles.
Any object can create unlimited PSPL Multi Select Boxes of same style.
We have fixed problem with Multi-select-box in relatively positioned divs and in Tables.
Its now works pretty well in all browsers.
Safari supports multiselect
The latest safari browser now renders PSPL multiselect boxes accurately. Thumbs up for safari users n developers.
Version 1.0.2 released
We have fixed the gray text bug. You can now change the text style of th text in box using the css file.
We have successfully tested a PHP generator class for PSPL Multi Select Box.
This class enable you to generate PSPL Multi Select Boxes without havting to write javascript functions and options again and again. The call format is very simple and you can define different objects for different styles.
Any object can create unlimited PSPL Multi Select Boxes of same style.
Documentation for PSPL multi select box
Page No. 1
PSPL multi select box is very simple to install and configure. There are only 5 steps to follow to get the stylish PSPL multi select box installed on your webpages
Index
Installation- Step 1. Import the Javascript and CSS files in your HTML
- Step 2. Add a normal Select multiple box in your page
- Step 3. Add a span around the select multiple box
- Step4. Call Init() function after the span
- Changing the arrow image
- Changing the styles of text box
- Changing the styles of cells of the dropdown
Installation
Step 1 : Import the Javascript and CSS files in your HTML
First import the javascript file( pspl_multiselect.js ) and css file( pspl_multiselect.css).
In head section of your html add following
<link href="pspl_multiselect.css" rel="stylesheet" type="text/css">
<script language="javascript" src="pspl_multiselect.js" type="text/javascript">
</script>
Step 2 :Add a normal Select multiple box in your page
First add normal select multiple box in your webpage.e.g.
<SELECT multiple id=”companies” name=”companies[]” size=”3” >
Here you must have noticed that we have assigned an id to our select multiple box.
Also notice the name of the select multiple box, the name is the id with []. So if name of your select multiple box is “boxName[]” then name of the id must be boxName.
This id should not be used in for any other element in that page.
Please note that the [] in name of the select multiple box is very important as it indicates that the field can have multiple values.
The keyword multiple is very important as well.
- Assign an name and id to each select box
- [] is necessary in the name.
- multiple is a necessary attribute
Step 3 : Add a span around the select multiple box
<span id=”companies_box ” class=”selBox”>
<SELECT multiple id=”companies” name=”companies[]” size=”3” >
<option>options1 </option>
<option>options2 </option>
<option>options3 </option>
</SELECT>
</span>
Again you must have noticed that the span has id as well and id of span should be made by adding _box to the id of the select multiple box.
Points to remember
- The span id must be made by adding _box to the id of select multiple box.
- The span should not contain anything other than the select multiple box. Why? Because this will hide the other things you added to the span while it renders the PSPL Multi Select Box.
Step 4 : Call the Javascript function Init() after the span
After the span add a call to Init() function to initialize the PSPL multi select box.
<body>
<span id=”companies_box ” class=”selBox”>
<SELECT multiple id=”companies” name=”companies[]” size=”3” >
<option>options1 </option>
<option>options2 </option>
<option>options3 </option>
</SELECT>
</span>
<script language="javascript" type="text/javascript">
Init( 'companies', "arrow_on6.gif", "arrow_off6.gif","arrow6", "optionTextBox6", "optionDiv6", "cell6", "cellHover6", "cellSelected6" );
</script>
</body>
please write call to Init() for each of your PSPL Multi select box after its span .
You need not change the parameters after the first three.
- The First parameter to Init() function is the id of your select multiple box
- Second parameter is the path of the arrow image of the PSPL multi select box to be displayed on mouse over.
- Third parameter is the path of arrow image to be displayed normally(when mouse is not on it ).
Next parameters need not be changed unless you are trying to use different styles of PSPL multi select boxes on same page. For that you can refer to “creating more than one styles for your PSPL multi select box” page.
- Fourth parameter is the class name for the arrow images which defines its styles.
- Fifth parameter is the class name of the textbox rendered besides the arrow image.
- Sixth parameter is the class name of the div or span in which the textbox and arrow image is contained.
- Seventh parameter is the class name of the cell of dropdown menu.
- Eighth parameter is the class name of the cell when mouse rolls over it.
- Ninth parameter is the class name of selected cells of the drop down menu of PSPL multi select box.
Customizing the PSPL multi select box
- You can directly change the arrow image by overwriting the current arrow images with new one. The size of arrow images should be 20px and if you want to use bigger sizes you must change the size of the container span accordingly, this is easy for novice users, but this is not a recommended method.
- You can also create two new images in same folder, where the current arrow images are stored, then while you call the Init function, you can just specify the new names instead of the default names. Suppose for one PSPL multi select box you want a arrow image named new_arrow_on.gif and new_arrow_off.gif, then in you call Init() as
<script language="javascript">
Init( 'companies', " new_arrow_on.gif ", " new_arrow_off.gif ","arrow6", "optionTextBox6", "optionDiv6", "cell6", "cellHover6", "cellSelected6" );
</script>
Changing the styles of text box :
- If you are a novice user and wish to use the single style for all PSPL multi select boxes on all pages of your website, then you can change the styles of the textbox besides the arrow image of PSPL multi select box by changing the styles of class optionTextBox in the pspl_multiselect.css you included in your page.
- If you are an advanced user, just define a css class with a different name in the css file and use that class name in the Init() function call. Please note that there are some styles in this class which should remain intact these styles are marked /*don't change this */ in the css file. So while defining new class you must copy those styles/properties in your new class exactly as they are in the default class.
Changing the styles of cells of the dropdown.
- This too can be done in two ways as the text box, edit the current styles if you want to have same style throughout your pages, or if you want different styles of PSPL multi select box in your pages then define extra classes and pass them as parameters to Init() of the respective PSPL multi select box.