Svetoslav Marinov’s Blog

Sometimes you don't need users to select some of the options in the HTML drop down menu.

For example you have a dropdown menu with these options.

==========================
Please select a province/state for US/Canada

Canada
--------------
Prov1
...
Prov10

United States
--------------
State1
...
State50
==========================

What we need is a province/state but what if the user selects the separators '----' ? or the country name ?

To solve this challenge we use negative values for values that should not be selected. Then using jQuery we disable them.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#acc_info select option").each(function (index, obj) {
// Disable items that have a value less then 0 OR an empty string
// We want those elementes to be disabled only.
if (jQuery(obj).val() == '' || jQuery(obj).val() <= 0) {
jQuery(obj).attr("disabled", "disabled");
}
});
});
</script>

Related:

• http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/
• http://techeyes.blogspot.com/2007/11/making-html-select-readonly.html

By a timed effect here I mean do some animation and then redirect the user to a page.
Requirements: jQuery (and Javascript)
Download the file: timed_effect_jquery

Here is how to accomplish that:

Implementation

/*
This function performs some effects on a target_obj and after 2.5 sec redirects to a location defined by ahref_obj
Usage: in shopping carts e.g. when someone adds a product then some animation is perfomed to make the user aware that something is happening.
License: LGPL
Author: Svetoslav Marinov
Site: http://slavi.biz
*/
function my_timed_effect(target_obj, ahref_obj) {
jQuery(target_obj).attr('style', 'font-weight:bold;').fadeOut("slow").fadeIn("slow").show('slow');
setTimeout('document.location="' + ahref_obj.href + '"', 2000);
}

Usage:

<a href="/cart/add/1" onclick="my_timed_effect(jQuery('#my_status_container_id'), this); return false;">Add a product</a> <br />
<a href="http://google.com" onclick="my_timed_effect(jQuery('#my_status_container_id'), this); return false;">Add a product</a> (go to http://google.com after the animation)

This example will perform the animation and then redirect where the link points.

How would you do the same effect ?
Are there any other option(s) ?