How to Create a New HTML5 File that Uses CSS3 in Komodo Edit
CSS3 For Dummies Cheat Sheet
10 Sites with Great Example CSS Layouts

How to Access Multiple Libraries from the Google API

You can access a number of third party libraries using the Google API at. All of these libraries use a common domain, http://ajax.googleapis.com, which makes it much easier to set up applications so that users allow a minimum of site access to their system. In this case, the user need only allow one domain instead of several. Of course, it’s nice to see how this process works in practice, so this example shows how to mix jQuery, jQuery UI, and MooTools using the Google API approach. You obtain the benefits of all three libraries, using a single domain.

In this case, the example uses jQuery to perform tasks such as selecting page objects, creating special effects, and monitoring events. jQuery UI performs any required user interface output. MooTools provides access to math functionality not found in jQuery or jQuery UI. In this case, you work with a random number generator that is easier to use than the JavaScript counterpart.

One of the items that is missing on the documentation page for the Google API is the location of the jQuery UI themes. You need to include a theme link in order to create the correct appearance for the jQuery UI features. The default theme isn’t hosted on the Google API. Fortunately, the themes from ThemeRoller are hosted, but not documented. Here are the URLs you need to use the ThemeRoller themes:

This example begins with a blank HTML5 page (one that begins with a <!DOCTYPE html> directive). In order to gain access to the required APIs, you need to add some links. Three links point to jQuery, jQuery UI, and MooTools. The fourth link is to the jQuery UI style sheet. The example uses the sunny style, but you can change that to any style you want. Here is the code you need to add for the links (note, each URL should appear on one line).

<script
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script
   src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
   src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js">
</script>
<link
   rel="stylesheet"
   href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.css" />

The HTML part of the example is pretty straightforward. It consists of a header, a paragraph, a button, and a few <div> elements as shown here.

<h1>Using Multiple Libraries Together</h1>
<p>Generate a Random Number Between 1 and 100</p>
<div class="Output" >
   <div id="SampleNumber" class="Normal">
      0
   </div>
</div>
<div>
   <input type="button"
          id="NewNumber"
          value="Get a Random Number" />
</div>

The SampleNumber <div> contains the number that is generated by the random number generator. This value is placed in a container <div>, Output, to create a nicely formatted box in the output. The button provides the means for changing the random number using JavaScript code provided by a combination of jQuery, jQuery UI, and MooTools.

The example also requires some style information to create a nicely formatted output box and the starting point for the example. The following style is all you need.

<style>
   .Normal
   {
      background-color: #7fffff;
      color: black;
      border: groove;
      border-width: 5px;
      padding: 3px;
      height: 20px;
      width: 100px;
   }
</style>

At this point, you’re ready to add some code. The script for this example shows how to use the various libraries together. You’d probably create a more complicated page for production purposes.

<script language="JavaScript">
   $(function()
     {
         // Use a jQuery UI button.
         $("#NewNumber").button();
         
         $("#NewNumber").click(
            function()
            {
               // Use MooTools to generate a random
               // number.
               var RandNum = Number.random(1, 100);
               
               // Display the result on screen using
               // jQuery.
               $("#SampleNumber").html(RandNum);
               
               // Create a animation using jQuery UI.
               if (RandNum >= 1 && RandNum <= 20)
               {
                  $("#SampleNumber").animate(
                     {
                        backgroundColor: "Blue",
                        color: "White",
                        borderColor: "Red"
                     }, 1500);
               }
               else if (RandNum >= 21 && RandNum <= 40)
               {
                  $("#SampleNumber").animate(
                     {
                        backgroundColor: "Red",
                        color: "White",
                        borderColor: "Blue"
                     }, 1500);
               }
               else if (RandNum >= 41 && RandNum <= 60)
               {
                  $("#SampleNumber").animate(
                     {
                        backgroundColor: "Green",
                        color: "White",
                        borderColor: "Yellow"
                     }, 1500);
               }
               else if (RandNum >= 61 && RandNum <= 80)
               {
                  $("#SampleNumber").animate(
                     {
                        backgroundColor: "Yellow",
                        color: "Black",
                        borderColor: "Green"
                     }, 1500);
               }
               else
               {
                  $("#SampleNumber").animate(
                     {
                        backgroundColor: "#B0E0E6",
                        color: "Navy",
                        borderColor: "Maroon"
                     }, 1500);
               }
            }
         )
     })
</script>

The example begins by changing the HTML button into a jQuery UI Button widget that you could manipulate in various ways. The two tasks that the example performs are to format the button to work with the jQuery UI style and to provide a means of capturing click() events.

The first task the script must perform is to create a random number. You could perform this task using JavaScript, but the MooTools technique shown in the example is a lot easier. The call to Number.random() places a value between 1 and 100 in RandNum. Now that you have a random number, the code places it into the SampleNumber <div> by calling the html() method with the value of RandNum.

At this point, you could say that the example is complete. However, the example goes a step further. It determines the numeric range of RandNum and uses the jQuery UI animate() effect to modify of the color of the output on screen.

blog comments powered by Disqus
CSS3 For Dummies Sample Code Files
Using the Div Tag to Create Tables
Advertisement

Inside Dummies.com