jQuery and jQuery UI, part 2

<script> 
  $(document).ready(function(){

  
     $("#throwRed").click(function() {
          $( ".dart1" ).animate({
                 left: "-=50",
                 top: "-=50"}, 
                 500);
         }); /*end throwRed.click */
  

});   /* end #document ready function */
</script>
  
  ... 

  <input type="button" id="throwRed" value="Red" /">

<img  class="dart1" src="pix/dart1.png" style="position: absolute; top:430px; left: 350px;"> 

See the code run
jQuery Animate documentation
More jQuery Animate Examples

If you have an image with either a Class or an ID tag, you can control it via the jQuery "Animate" function. The function can animate most properties of an image. In this example, we are changing the value of both the "left" property (how far the image is from the left side of the browser window) and the "top" property (how far it is from the top). After the properties have been specified, the speed is coded. Here, the animation will take 500 milliseconds (i.e., 1/2 second).

The animation will only run when the button is pressed. So, in this example, there is a button called "throwRed" which will trigger the jQuery action.

$(document).ready(function(){
      $(window).load(function(){
            $( ".theplane" ).animate({
                  left: "-=2500",
                  top: "-=10"
                  },4500);
        });  /* end window.load  */

  });  /* end document.ready  */

  ...

  <img  class="theplane" src="pix/airplane_intro.png" style="position: relative; top:50px; left: 1250px;">

See the code run
jQuery Load documentation
More jQuery Load Examples

You can run any jQuery or jQuery UI function immediately upon the completion of the page loading. You simply enclose your code within the

$(window).load(function(){

 });  /* end window.load  */

function. Here, we place the animate code for the plane. Note the plane is placed off the page to the right in its IMG tag, and that the animation brings it off to the left when it is done.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css">
  <style>
       .ui-menu { width: 150px; }
  </style>

  
  <ul id="ny_menu">
     <li class="ui-state-disabled">Statue of Liberty	</li>
      <li><a href="http://www.esbnyc.com" target="_blank">Empire State Building</a></li> 
      <li>Parks
           <ul>
                <li class="ui-state-disabled">Gramercy Park</li>
                 <li><a href="http://centralparknyc.org" target="_blank">Central Park</a></li>
           </ul>
  </ul>
 
  <script>

        $( "#ny_menu" ).menu();
  </script>

See the code run

jQuery UI Menu documentation
More jQuery UI Menu Examples

Dropdown menus are supported in jQuery UI. They are fairly straight forward since they are classes which are applied to the UL tag. In addition, note the id which is applied to the UL tag, and the jQuery code at the bottom which attaches it to the jQuery UI menu() function. Finally, note that several of the selections have "class="ui-state-disabled" applied to them which makes them unselectable.

 <script>
         $(function() {
                $( ".moveit" ).draggable();
         });
  </script>
.....
<div class="moveit" STYLE="position:absolute; TOP:480px; LEFT:400px;" class="ui-widget-content">
        <img src="pix/dart1.png"> 
  </div>

See the code run

jQuery UI Draggable documentation
More jQuery UI Draggable Examples

Perhaps one of the easiest jQuery UI functions to apply is "draggable".

In this example, we have simply created a class called "moveit" which applies "draggable". Then any image that we want to become draggable has that class applied to it.

If you read through the jQuery UI Documentation , you will find many other functions which are equally easy to use.