jQuery Tutorial: Part III: Parameters

In this tutorial we will be updating the cascading menu we created in jQuery Tutorial: Part II: Cascading Menu. We’ll be adding some CSS to make it look a bit nicer, so hopefully I’ll catch some more interest of the designers!

I’ll also be adding some neat effects that make the tutorial look more like Flash, with the use of parameters. This introduction to parameters will be both helpful with our cascading menu, and with most uses of jQuery.

If you haven’t yet, go read jQuery Tutorial: Part I and jQuery Tutorial: Part II: Cascading Menu.

Included in this Tutorial

  • What is a parameter?
  • Multiple Parameters
  • Using parameters to make a flash-like effect
  • Styling our menu

What is a parameter?

A parameter is a value that is put between the parentheses () of a method, in order to manipulate it. For example, if we were to put parameters in the toggle() method, we would do so like this: toggle(parametervalue).

A parameter can be a keyword that is preset to the method, such as ‘slow’. Or it can be a number, which is usually in milliseconds, such as 5000, which would be 5 seconds. When the ‘slow’ keyword is used with the toggle() method [toggle('slow')], it will toggle back and forth slowly. Likewise, when a number value is used, like 5000 [toggle(5000)], it will take 5 seconds to toggle back and forth.

Multiple Parameters

A method can also have multiple parameters, which are to be separated by commas: toggle(parameter1, parameter2).

An example of multiple parameters using the toggle() method would be: toggle(10000, highlight()).

The second parameter used for a toggle() method is a callback, or a function to be called after an element has been toggled. So in this example, we have a made-up function called ‘highlight()’, which would highlight some specified text. If you use it now, the highlight() function won’t work because we haven’t created it, but I plan to go over functions in future jQuery tutorials.

To put it in Pseudo code:

toggle(10000, highlight())
Toggle this element in 10 seconds, or 10000 milliseconds, and then call the highlight() function to do its job.

If you don’t quite have a good grasp on parameters, don’t worry. Hopefully they will make more sense by the end of this tutorial, and after we use them in our cascading menu.

Using parameters to make a flash-like effect

Now we’re going to use our knowledge of parameters to make a more dynamic effect. How are we going to achieve this?

First off, let’s grab the code we left with in the second jQuery tutorial:

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('#site').click(function(){
                        $('#siteHide').toggle();
                   });
                   $('#tutorials').click(function(){
                        $('#tutorialsHide').toggle();
                   });

                   $('#linksout').click(function(){
                        $('#linksoutHide').toggle();
                   });
              });
          </script>
     </head>
     <body>
          <p>
          <a href="#" id="site">Site</a>
               <ul id="siteHide">
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          <a href="#" id="tutorials">Tutorials</a>
               <ul id="tutorialsHide">
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul>
          <a href="#" id="linksout">LinksOut</a>
               <ul id="linksoutHide">
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>
</html>

If you toggle your menu right now, it seems that the list <ul> below it is just appearing off and on. To make it look more like flash, we want to be able to see the motion, as if it were an animation. So, we should slow down our toggle method.

$('#siteHide').toggle('slow');

Do do that, I’ve added the keyword parameter ‘slow’ to our first toggle method in our script. This will make the <ul> list of our cascading menu show and hide more slowly. If you view the changed script in your browser now, you can actually see the animation.

Note: Make sure you have the quotes in the parameters if it is a keyword parameter (‘slow’,’ fast’, etc.). You do not need to do this for number parameters, but keyword parameters require it for the jQuery code to work.

You can do this with the other two toggle() methods used in our script, or vary them up with a number value, such as 10000– toggle(10000). A value like 10000 would be very slow (10 seconds), but you can play around with various values to change the speed of your toggle() method.

Styling our menu

We already have CSS ID values (specified by the # symbol) assigned to various parts of our code, so it’s just as easy to style our menu using these same values.

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="../jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('#site').click(function(){
                        $('#siteHide').toggle('slow');
                   });
                   $('#tutorials').click(function(){
                        $('#tutorialsHide').toggle('slow');
                   });

                   $('#linksout').click(function(){
                        $('#linksoutHide').toggle('slow');
                   });
              });
          </script>

          <style type="text/css">
              p{
                font: 14pt Tahoma, Arial, Verdana, sans-serif bold;
              }

              ul{
                list-style-type: none;
                margin: -20px auto auto -25px;
                font: 11pt Tahoma, Arial, Verdana, sans-serif;
              }

              #site, #siteHide{
                color: purple;
              }

              #tutorials, #tutorialsHide{
                color: blue;
              }

              #linksout, #linksoutHide{
                color: green;
              }
          </style>
     </head>
     <body>
          <p>
          <a href="#" id="site">Site</a>
               <ul id="siteHide">
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          </p>
          <p>
          <a href="#" id="tutorials">Tutorials</a>
               <ul id="tutorialsHide">
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul>
          </p>
          <p>
          <a href="#" id="linksout">LinksOut</a>
               <ul id="linksoutHide">
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>
</html>

Conclusion

This is a very basic use of parameters to go along with our menu, but parameters are an essential part to coding in jQuery, and many other programming languages. That’s all I’m going to do for the cascading menu, but I will soon come out with a new mini series focusing on a different design element so you can keep learning jQuery!

It’s not extremely beautiful, but it gets the point across– Here is our final result:

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

6 Comments

  1. clairessa

    March 11th, 2009 at 09:15 pm

    >:( why does nothing work in safari 4. stupid safari 4. this looks very nice to do.

  2. Kayla

    March 12th, 2009 at 08:35 am

    @clairessa
    I wasn’t aware this didn’t work in Safari! I did a bit of research and it seems its a small bug with some specific jQuery methods…but I do believe their working on it. I apologize, I do most of my work in Firefox and IE. Try it out in Firefox if you’d still like to learn how to do it, I’m sure Safari will fix this on their next update!