Archive for the ‘Scripts’ Category

The Editable Dropdown Menu allows you to create an easy to use, pure CSS dropdown menu which can have sub menus and sub menu items added by the user, as well as having the text they display edited. There is a default CSS file included. You can modify it to apply your own colors, or even adjust it completely since each element has it’s own class specified.

There are also two hook function you can use so you can do stuff like run an AJAX script to update a database when there are items added or changed.

You can also specify your own items, and declare them editable or not, and those will be static.

There is admitedly a lot of room for growth in this script. In fact, that’s why I’m sharing it now. There are so many ways it can grow that it’ll probably branch off in multiple ways and I’ll probably maintain multiple versions of this as well.

Here are the available functions and their uses:

// Creates the a new menu (UL element), which you need to supply in other calls.
// The return value from this you'll add to your document somewhere to display the menu.
// @param class (string) - The class name to give the root of the menu. Default: "dropdown"
// @param addable (boolean) - Whether an "Add New Sub-Menu" appears or not. Default: false
// @return Returns an HTML UL element (the root of the menu).
createMenu(class, addable)

// Adds a submenu to the specified menu.
// @param menu (HTML UL element) - The root menu (created with createMenu). Required.
// @param title (string) - The title for the new submenu. Default: "Click to edit...".
// @param not_editable (boolean) - If the element is not editable (can't change title). Default: false.
// @param not_addable (boolean) - If the element can't have submenu items added. Default: false.
addSubMenu(menu, title, not_editable, not_addable)

// Adds a submenu item to the last submenu.
// @param menu (HTML UL element) - The root menu (created by createMenu). Required.
// @param title (string) - The title of the new submenu item. Default: "Click to edit...".
// @param not_editable (boolean) - If the title can't be edited. Default: false.
addSubItem(menu, title, not_editable)

// Called when something is edited.
// Doesn't do anything by default. This is a hook for you to add actions to the menu.
// You can look at the className of the node to determine if it's a submenu or submenu item.
// You shouldn't manually call this.
// @param node (HTML LI element) - The element that was changed.
// @param text (string) - The text the node was changed to.
// @param changed (boolean) - Whether the text was changed or not.
doSomethingEdited(node, text, changed)

// Called when something was added.
// Doesn't do anything by default. This is a hook for you to add actions to the menu.
// You can look at the className of the node to determine if it's a submenu or submenu item.
// You shouldn't manually call this.
// @param node (HTML LI element) - The element that was changed.
// @param text (string) - The text the node was changed to.
doSomethingAdded(node, text)

There are a few more functions, but you shouldn’t have to use them directly. If you are interested in them, check out the comments in the source file.

The structure of the generated menu is:

<ul class="menuroot">
  <li class="submenu">Sub-Menu
    <ul>
      <li class="subitem">Sub-Menu Item</li>
    </ul>
  </li>
</ul>

To use the menu you call createMenu(). Then, you add that element to the document whereever you want (using appendChild() on the appropriate element). Then, you can manually call addSubMenu() and addSubItem() as wanted, though they are optional.

And that’s pretty much all there is to know. The source is well commented so you can take a look at it if you are interested in the inner workings. You can also comment and ask for questions or help, or suggest branches or extra features.

Enjoy!

Live Example: Editable Dropdown Menu Example

Source Code: Editable Dropdown Menu Source

Here is an effective, easy-to-use, object-oriented custom Slider that I created. The slider allows you to get a value between 0 and 1, allowing you to easily apply it. All you have to do to set it up is put it on your Stage. Everything is self-contained within these two files. Below is an example of how this version looks. You can create your own custom look as well.

Custom Flash Slider (ActionScript 3)

How to Use

Simply open the source and drag the Slider into your Flash stage or library. Then, place the Slider.as file in the directory of your Flash source. You don’t need to have the Slider.fla in the same folder… you actually don’t need it at all when you move the Slider into your Stage.

Drag a Slider onto your Stage if there isn’t already one there. Give the Slider an instance name. Then, to get it’s value in your code, you will just use “instance_name.value”. You can also set the value with it as well.

If you’d like to get more detailed information about this slider, and even learn how to make your own version of this custom slider, check out this Flash tutorial with the same name: Custom Flash Slider (ActionScript3) Tutorial.

This simple script that allows you to create divs which are generated with Javascript (meaning they don’t exist if Javascript is disabled) and can be revealed upon clicking on another item which you specify by it’s id. This script can be useful for created things such as the quick search boxes you see on a lot of forums nowadays.

Hidden Divs Example | Hidden Divs Source

You have two options when implementing this code:

1. Placing the specific code in the Javascript source file.
2. Placing the specific code in the HTML file.

If you do the first, you need to place the <script> element which has a source (src) attribute set to include the Javascript source below the element(s) which you want to use as the parent(s), like so:

<script src="js/HiddenDivs.js" type="text/javascript"></script>

Then you will just place your addDiv function calls at the bottom of the HiddenDivs source file. If you use this method, I recommend placing the <script> element just above the closing body tag.

If you’d like to use the second method, you would place the <script> element, as shown above, anywhere you’d like (I recommend in the <head> element). Then, you would place another <script> element somewhere after the parent element(s), and place your addDiv function calls there.

The HiddenDivs object only has one function, addDiv(). It takes three parameters: link_id, div_id, div_body.

addDiv(link_id, div_id, div_body)

The HiddenDivs has a variable already defined, hiddenDiv which is what you will use to call addDiv with. Here is an example line:

hiddenDiv.addDiv('parent','testdiv','<a href="http://www.arwebdesign.net">Azure Ronin Web Design</a>')

The link_id is the id of the parent element. This can be any element, as long as it can contain a <div> element (which is most block elements, such as <div>, <li>, <body>, etc.). The parent element will get an ‘onclick’ attribute set for it which will toggle the hidden div.

The div_id is the id given to the <div> which the Javascript creates. This is useful so you can modify the <div> that you create with CSS.

Finally, and perhaps most importantly, the div_body parameter is a string which is where you basically define the <div> element. You just place everything in this string that would be inside of the <div> element.

And that’s it. You can add as many hidden divs as you want, just use hiddenDiv.addDiv().

The Enhanced Checkbox & Radio Image Replacement (ECRIR) system allows you to replace check boxes and radio buttons with your own custom images. This script is an improvement of Chris Erwin’s original Checkbox & Radio Image Replacement system, but fixes and modifies a few key points. The major fixes are:

• Added support for Safari. (Tested on Safari 1.0.3)
• Added image-enabled detection support so it will fail when images are disabled. The original become nearly completely unusable if Javascript and CSS were enabled, but images were disabled.
• Added support for disabled check boxes and radio buttons.
• Made fully-accessible. If Javascript, CSS, and images are not all enabled, it will revert back to the default rendering, so you never have to worry about it becoming usuable.

View demo page. The demo is simple, but shows off the features of the ECRIR.

Using the System

Using the system is quite simple. Simply include the script and accompanying CSS file in the usual method:

<link href="/ecrir/css/ecrir.css" type="text/css" rel="stylesheet" />
<script src="/ecrir/js/ecrir.js" type="text/javascript"></script>

Then, any radio button or check box inputs you want to be replaced, simply set their class to ‘ecrir’.

Also, each of your check boxes and radio buttons must have a label associated with them, with the label’s ‘for’ attribute set to the id of the radio button or check box. It doesn’t matter whether the label wraps the input or not. Here are example inputs:

<label for="checkbox4">Checkbox 4 - Disabled</label>
<input type="checkbox" name="tester_box" id="checkbox4" class="ecrir" disabled="disabled" />

<label><input type="checkbox" name="tester_box" id="checkbox5" class="ecrir" />Checkbox 5</label>

And that’s it. If you want to use your own images, just replace the images that were provided, or just change them in the CSS file. If you to use an image that has different dimensions, you may have to adjust the values in the CSS file to look correct.

If you want to have the ecrir folder somewhere that isn’t at the same level as the file you are including it in (i.e. your HTML file isn’t in the same directory as the ecrir directory), you’ll have to open the Javascript file and change the location specified by ‘detect_image_src’ to be the absolute position of the image (the location of the image including your domain name, like: http://www.example.com/ecrir/images/tiny-detect.png).

If you want to set them to a different class other than ‘ecrir’, simply change the configuration value ‘ecrir_class’ at the top of the Javascript file.

Required Client-side Languages: Javascript

Browser Support: All modern browsers (confirmed working on IE6-7, FF2, Safari 1 & 3, Opera 9)

Enhanced Check Box and Radio Button Image Replacement v1.0.1

Version Updates:

• 1.0.1 - Added optional configuration variables to the top of the Javascript file.
• 1.0 - Initial public release.

The Advanced Forms system is simply a PHP class and a skin class which allow you to quickly generate forms, with included PHP regex validation and processing. Simply overwrite the base PHP class and specify two functions which specify how to build the form and how to process the form, and you are ready to go.

Some perks of the Advanced Form system are:

• Quickly generate a form with simple function calls and allows you to reuse it repeatedly and easily.
• Ability to specify whether the field is required to be filled in, and a regex expression to validate the form again.
• All of the HTML output is in a separate skin class for easier modification.
• Requires only a few lines to handle displaying and processing of the form.

Using the System

First, you need to create your own form. To do this, simply create a new PHP document in which you create a class that extends AdvancedForm:

<?
require_once "AdvancedForm.php";
class MyForm extends AdvancedForm{
}
?>

Then, you just need to extend the functions buildForm() and completeProcessForm(). The buildForm function is where you specify which elements to include in your actual form. The completeProcessForm is called after the build in form processing is completed and is where you will put what the form actually does (such as emailing you the results, inserting into your database, etc.).

The following functions are used in building your form:

add_text_input($name, $label_text, $required, $regex_pattern="", $value="", $length="")
add_hidden_input($name, $value)
add_password_input($name, $label_text, $required, $regex_pattern="", $value="", $length="")
add_select($name, $label_text, $required, $option_values, $option_texts, $selected_index="")
add_checkbox($name, $label_text, $required, $is_checked=false)
start_fieldset($legend_text, $required=false)
end_fieldset()
add_radios($name, $label_texts, $values, $required, $selected_index="")
add_textarea($name, $label_text, $required, $height, $width, $value="")
add_button($name, $value, $type="button", $onclick="")
add_submit($value)

The values each function takes is equivalent to it’s HTML versions. The regex_pattern is a regular PHP regex pattern, which it will check the input again. If required is set to true, it will send the user an error if they didn’t allow it, and will ask them to correct the problem. Further documentation are in the files, which are well documented (in a doxygen-compatible format, in case you want to generate documentation).

So, for our example, we’ll create a simple login form with a username and password. Our username only allows lowercase letters:

public function buildForm() {
    $this->start_fieldset("Login Form");
    $this->add_text_input("username","Username",true,"/[a-z]+/");
    $this->add_password_input("password","Password",true);
    $this->add_submit("Login");
    $this->end_fieldset();
}

I won’t go into processing, because it is just like your would do normally. All of the values are available via POST or GET, depending what you use (POST is default).

To actually use the form on your page, you simply have to create an instance of the form and do a little setup:

// On page /index.php
require_once "MyForm.php";
$login = new MyForm("index.php?processLogin","thankyou.php");

if(isset($_GET['processLogin']))
    echo $login->processForm();
else
    echo $login->displayForm();

The constructor of the AdvancedForm function has several values, but only the first two are required. The first is $action, which is the action that the form will take when you submit the form. The second is $final, which is the page that it redirects to after a successful login. You can have final be the same page that you are currently on as well.

And that’s it. When they go to /index.php the form will be displayed. The will fill out the form, hit login, and it will then go to /index.php?processForm, which will end up with processForm() being called. If everything returns true and it works properly, they’ll be taken to /thankyou.php.

Advanced Form System