jQuery #4

Debugging Javascript/Jquery

Divide and conquer.
- Never write long code without testing. Write in inncrements. Test inbetween
Is my grammar correct?
- Close all parenthesis and brackets when you make them
- No errors in the developer tools javascript console
Is the code/area running?
- Place alert() or console.log() strategically. If they show up, that part of the code is running
Are my assumptions correct?
- Use arguments to alert() or console.log() strategically.
- If you are testing (n < 10), do you know what the value of n? -> alert(n);
Resources Beyond (requires more computer science knowledge)
- Chrome javascript debugging

Notes

jQuery Effects (p183)

Making elements on a web page appear and disappear is quite common. jQuery supplies a handful of functions for this purpose. Hide all tags with a class of submenu:

  $('.submenu').hide();

Each effect function can take an optional speed setting and a callback function. To change the speed you can 1) supply one of three string values - 'fast', 'normal', or 'slow' or 2) a number representing the number of milliseconds.

[jq_04_hide.html]

   $('ul > li').hide('slow');
   $('ol > li').hide('fast');
   $('.people').hide(2000);
   $('.origins').hide(5000);

Notes

Basic Showing and Hiding (p184) and Fading Elements In and Out

[jq_04_hide2.html]

Basic showing and hiding

show()
hide()
toggle()

Fading Elements in and out

fadeIn()
fadeOut()
fadeToggle()

Sliding Elements

SlideDown()
slideUp()
slideToggle()

Notes

absolute positioning (p187)

When hiding elements you also change the flow of the elements. If you hide something, anything below it will move up the page. To prevent that, use the absolute positioning with CSS.

[jq_04_positioning.html]

Notes

Animations (p191)

You are not imited to the built-in effects jQuery supplies. Using animate() you can animate most CSS properties that accepts numeric values. (Well, except for colors unless you use a plugin or jqueryUI). [jq_04_animate.html]

    $(this).animate(
       {
       opacity : .5,
       width: '200px',
       height: '200px'
       }, 1000);

animate() function takes several arguments. The first is the object literal containing the CSS properties and values you want to animate.

      {
       opacity : .5,
       width: '200px',
       height: '200px'
       }

The second argument is the duration of the animation in milliseconds. 1000 (miliseconds) is 1 second.

Object literal :
Note that when creating the object literal,

You have to put the CSS value in quotes if it includes a measurement like px, em, or %.
Javascript does not accept hyphens for CSS properties because it thinks it is a 'minus'. Thus, when specifying CSS properties that have hyphens, remove the hyphen and capitalize the first letter of the first word folloiwng the hyphen.

        font-size         ->   fontSize
        border-left-width ->   borderLeftWidth

jQuery (but not javascript) lets you use the hyphen but only if you put the property name in quotes

{
   'font-size' : '24px',
   'border-left-width': '2%'
}

If you want to animate color, look into jqueryUI or you can use the jquery color plugin

[jq_04_animate_color.html]

<!DOCTYPE html>
<html>
<head>
<title> Color Animation</title>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script>
$(document).ready(function(){
  $('div').click(function(){
     $(this).animate({backgroundColor: '#B6DADA'}, 800);
   });
});
</script>
</head>
<body>
<div style="width: 100px; height:100px; background-color: red;">
</div>
</body>
</html>

Notes

Animating Relative to the Current Value (p192)

Instead of specifying a target value for the CSS property, you can speficy a value relative to the current value using += or -=.

[jq_04_animate_relative.html]

<!DOCTYPE html>
<html>
<head>
<title>Relative Animation</title>

<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script>
$(document).ready(function(){

  $('div').click(function(){
      $(this).animate(
       {
         left: '+=50px'
       }, 1000);
   });

});
</script>
</head>
<body>
<div style="position: absolute; left: 10px; width: 100px; height:100px; background-color: red;">
</div>
</body>
</html>

Notes

Easing (p192)

The jQuery effects functions and the animation() function accept another argument that controls the speed during the animation called easing. Easing describes how the animation changes over time.
There are two easing methods 'linear' and 'swing'. You can add more easing methods through plug-ins or by using jquery ui.

[jq_04_animate_ease.html]

$('div#1').click(function(){
      $(this).animate(
       {
         left: '+=100px'
       }, 1000, 'linear');
   });

  $('div#2').click(function(){
      $(this).animate(
       {
         left: '+=100px'
       }, 1000, 'swing');
  });

Notes

Performing an Action After an Effect Is Completed (p194)

Sometimes it is crticial that you know when the effect completes. For example if you fade in an image, you may not want the caption to show until the fade in is complete.

For this, you use a callback function. A callback function is called when the effect is competed. An anonymous function which serves as the callback function is passed as the second argument for most effects (after the length) and for others like animate() that take more then one argument, the callback function is passed as the last argument.

[jq_04_callback.html]

//caption fades in after fade in for div is complete

$(document).ready(function(){
  $('div').hide();
  $('.caption').hide();

  $('button').click(function(){
      $('div').fadeIn(2000, function(){$('.caption').fadeIn(500);} );
   });

});

The lab assignment from last class uses this callback function as well... [jq_03_scroll.v3.html]

An example of a callback function called from a callback function... [jq_04_callback_v2.html]

$(document).ready(function(){
  $('div').hide();
  $('.caption').hide();

  $('button').click(function(){
      $('div').fadeIn(2000, 
               function(){$('.caption').fadeIn(500, 
                          function(){$('div').fadeOut(3000); 
                                     $('.caption').fadeOut(3000);
                          });
               });
   });

});

If you want to animate one element, a sequential listing of events would do. [jq_04_callback_v3.html]

$(document).ready(function(){
  $('div').hide();

  $('button').click(function(){
      $('div').fadeIn(1000);
      $('div').fadeOut(1000);
   });

});

Finally, if you want to wait a certain time for an effect to take play, use the delay() function. [jq_04_callback_v4.html]

$(document).ready(function(){
  $('div').hide();

  $('button').click(function(){
      $('div').fadeIn(1000).delay(2000).fadeOut(1000);
   });

});

Notes

Learn to Learn

- Grammer/concepts covered. From now on, mostly application of those concepts specific to your needs
- Ch7: Common jQuery Tasks (swapping images, preloading images, rollover images...)
- Ch8: Enhancing Forms
- Ch9: jQuery UI

Notes

Lab

- Read Ch6
- MM: Ch6: Tutorial Animate Dashboard

Make one very simple webpage using any of the following that allows you to draw shapes

- Html canvas tutorial (uses javascript)
- jCanvas jquery plugin to do canvas in jquery style
- For those of you who have experience with processing, there exists a processing library called processing.js

Send instructor URL (not as attachment please)

Notes