Website Statistics Now With Google Trends

Website Statistics Now With Google Trends The Google Trends service now offers website visitor statistics, aside from search query information. Continue Reading

How Google Works

How Google Works A look at the myths and facts about Google, and what you should know about Google's inner workings. Continue Reading

DropDown Menu Back and Forward Navigation

A JavaScript implementation of navigating through a dropdown menu back and forth by clicking the appropriate links.

On Tuesday, January 8th 2008 at 01:19 AM

By Andrew Pociu (View Profile)

(Rated 0 with 0 votes)

There's almost no website without forms, and in using forms you may sometimes encounter the need to have a back and forth functionality for navigating through a dropdown list without having to interact with the dropdown directly.

For that you can use the JavaScript shown below, to which you pass two parameters: the ID of the object that you want to navigate through and the direction in which you want to go, 0 being backward and 1 being forward. The code will first decide which browser document model to use, followed by a series of if statements determining where we are in the list and where we should move next. If we're at the end of the list and we move forward, we start from the beginning (by setting the selectedIndex value to 0), but if we're at the first option in the list and we move backwards to the very last item (by setting the selectedIndex value to optLen - 1 which is the index of the last item.)

<html>
<head>
<title>DropDown Menu Navigator</title>
<script type="text/javascript">
function BackAndForth(objName,goDirection)
{
    var selVal = (document.getElementById ? document.getElementById(objName) : document.all[objName]);
    if(selVal == null)
        return false;
    var optLen = selVal.options.length;
    var numSel = selVal.selectedIndex;
    if(optLen > 0)
    {
        if(goDirection == 1)
        {
            if (optLen - numSel == 1)
            {
                selVal.selectedIndex = 0;
            }
            else
            {
                selVal.selectedIndex = numSel + 1;  
            }
        }
        else
        {
            if (numSel == 0)
            {
                selVal.selectedIndex = optLen - 1;
            }
            else
            {
                selVal.selectedIndex = numSel - 1;  
            }
        }
    }
}
</script>
</head>
<body>
<div style="text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<a href="javascript:void(0);" onclick="BackAndForth('Boroughs', 0);">&laquo; Previous</a> 
<select id="Boroughs">
    <option value="Manhattan">Manhattan</option>
    <option value="Queens">Queens</option>
    <option value="Brooklyn">Brooklyn</option>
    <option value="Bronx">Bronx</option>
    <option value="Staten Island">Staten Island</option>
</select>  
<a href="javascript:void(0);" onclick="BackAndForth('Boroughs', 1);">Next &raquo;</>
</div>
</body>
</html>