topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-jquery-learning-code-03-carol-original.js / js



  // Step 1
  // document.ready(function() {
  //   $('#switcher-large').bind('click', function() {
  //     $('body').addClass('large');
  //   });
  // });
  
  // Step 2
  // document.ready(function() {
  //   $('#switcher-default').bind('click', function() {
  //     $('body').removeClass('narrow');
  //     $('body').removeClass('large');
  //   });
  //   $('#switcher-narrow').bind('click', function() {
  //     $('body').addClass('narrow');
  //     $('body').removeClass('large');
  //   });
  //   $('#switcher-large').bind('click', function() {
  //     $('body').removeClass('narrow');
  //     $('body').addClass('large');
  //   });
  // });
  
  // Step 3
  // document.ready(function() {
  //   $('#switcher-default').bind('click', function() {
  //     $('body').removeClass('narrow');
  //     $('body').removeClass('large');
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  //   $('#switcher-narrow').bind('click', function() {
  //     $('body').addClass('narrow');
  //     $('body').removeClass('large');
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  //   $('#switcher-large').bind('click', function() {
  //     $('body').removeClass('narrow');
  //     $('body').addClass('large');
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  // });
  
  // Step 4
  // document.ready(function() {
  //   $('#switcher-default').bind('click', function() {
  //     $('body').removeClass('narrow').removeClass('large');
  //   });
  //   $('#switcher-narrow').bind('click', function() {
  //     $('body').addClass('narrow').removeClass('large');
  //   });
  //   $('#switcher-large').bind('click', function() {
  //     $('body').removeClass('narrow').addClass('large');
  //   });
  // 
  //   $('#switcher .button').bind('click', function() {
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  // });
  
  // Step 5
  // document.ready(function() {
  //   $('#switcher-default').bind('click', function() {
  //     $('body').removeClass();
  //   });
  //   $('#switcher-narrow').bind('click', function() {
  //     $('body').removeClass().addClass('narrow');
  //   });
  //   $('#switcher-large').bind('click', function() {
  //     $('body').removeClass().addClass('large');
  //   });
  // 
  //   $('#switcher .button').bind('click', function() {
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  // });
  
  // Step 6
  // document.ready(function() {
  //   $('#switcher .button').bind('click', function() {
  //     $('body').removeClass();
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  // 
  //   $('#switcher-narrow').bind('click', function() {
  //     $('body').addClass('narrow');
  //   });
  //   $('#switcher-large').bind('click', function() {
  //     $('body').addClass('large');
  //   });
  // });
  
  // Step 7
  // document.ready(function() {
  //   $('#switcher .button').bind('click', function() {
  //     $('body').removeClass();
  //     if (this.id == 'switcher-narrow') {
  //       $('body').addClass('narrow');
  //     }
  //     else if (this.id == 'switcher-large') {
  //       $('body').addClass('large');
  //     }
  //     
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  // });
  
  // Step 8
  // document.ready(function() {
  //   $('#switcher .button').click(function() {
  //     $('body').removeClass();
  //     if (this.id == 'switcher-narrow') {
  //       $('body').addClass('narrow');
  //     }
  //     else if (this.id == 'switcher-large') {
  //       $('body').addClass('large');
  //     }
  //     
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //   });
  // });
  
  // Step 9
  // document.ready(function() {
  //   $('#switcher h3').toggle(function() {
  //     $('#switcher .button').addClass('hidden');
  //   }, function() {
  //     $('#switcher .button').removeClass('hidden');
  //   });
  // });
  
  // Step 10
  // document.ready(function() {
  //   $('#switcher h3').click(function() {
  //     $('#switcher .button').toggleClass('hidden');
  //   });
  // });
  
  // Step 11
  // document.ready(function() {
  //   $('#switcher .button').hover(function() {
  //     this.addClass('hover');
  //   }, function() {
  //     this.removeClass('hover');
  //   });
  // });
  
  // Step 12
  // document.ready(function() {
  //   $('#switcher').click(function() {
  //     $('#switcher .button').toggleClass('hidden');
  //   });
  // });
  
  // Step 13
  // document.ready(function() {
  //   $('#switcher').click(function(event) {
  //     if (event.target == this) {
  //       $('#switcher .button').toggleClass('hidden');
  //     }
  //   });
  // });
  
  // Step 14
  // document.ready(function() {
  //   $('#switcher').click(function() {
  //     $('#switcher .button').toggleClass('hidden');
  //   });
  // });
  // 
  // document.ready(function() {
  //   $('#switcher .button').click(function(event) {
  //     $('body').removeClass();
  //     if (this.id == 'switcher-narrow') {
  //       $('body').addClass('narrow');
  //     }
  //     else if (this.id == 'switcher-large') {
  //       $('body').addClass('large');
  //     }
  //     
  //     $('#switcher .button').removeClass('selected');
  //     this.addClass('selected');
  //     event.stopPropagation();
  //   });
  // });
  
  // Step 15
  // document.ready(function() {
  //   $('#switcher').click(function(event) {
  //     if (!$(event.target).is('.button')) {
  //       $('#switcher .button').toggleClass('hidden');
  //     }
  //   });
  // });
  // 
  // document.ready(function() {
  //   $('#switcher').click(function(event) {
  //     if ($(event.target).is('.button')) {
  //       $('body').removeClass();
  //       if (event.target.id == 'switcher-narrow') {
  //         $('body').addClass('narrow');
  //       }
  //       else if (event.target.id == 'switcher-large') {
  //         $('body').addClass('large');
  //       }
  //     
  //       $('#switcher .button').removeClass('selected');
  //       $(event.target).addClass('selected');
  //     }
  //   });
  // });
  
  // Step 16
  // document.ready(function() {
  //   $('#switcher').click(function(event) {
  //     if (!$(event.target).is('.button')) {
  //       $('#switcher .button').toggleClass('hidden');
  //     }
  //   });
  //   
  //   $('#switcher-narrow, #switcher-large').click(function() {
  //     $('#switcher').unbind('click');
  //   });
  // });
  
  // Step 17
  // document.ready(function() {
  //   $('#switcher').bind('click.collapse', function(event) {
  //     if (!$(event.target).is('.button')) {
  //       $('#switcher .button').toggleClass('hidden');
  //     }
  //   });
  //   
  //   $('#switcher-narrow, #switcher-large').click(function() {
  //     $('#switcher').unbind('click.collapse');
  //   });
  // });
  
  // Step 18
  // document.ready(function() {
  //   var toggleStyleSwitcher = function(event) {
  //     if (!$(event.target).is('.button')) {
  //       $('#switcher .button').toggleClass('hidden');
  //     }
  //   };
  //   
  //   $('#switcher').bind('click.collapse', toggleStyleSwitcher);
  //   
  //   $('#switcher-narrow, #switcher-large').click(function() {
  //     $('#switcher').unbind('click.collapse');
  //   });
  // });
  
  // Step 19
  // document.ready(function() {
  //   var toggleStyleSwitcher = function(event) {
  //     if (!$(event.target).is('.button')) {
  //       $('#switcher .button').toggleClass('hidden');
  //     }
  //   };
  //   
  //   $('#switcher').bind('click.collapse', toggleStyleSwitcher);
  //   
  //   $('#switcher-narrow, #switcher-large').click(function() {
  //     $('#switcher').unbind('click.collapse');
  //   });
  //   $('#switcher-default').click(function() {
  //     $('#switcher').bind('click.collapse', toggleStyleSwitcher);
  //   });
  // });
  
  // Step 20
  // document.ready(function() {
  //   var toggleStyleSwitcher = function(event) {
  //     if (!$(event.target).is('.button')) {
  //       $('#switcher .button').toggleClass('hidden');
  //     }
  //   };
  //   
  //   $('#switcher').click(toggleStyleSwitcher);
  //   
  //   $('#switcher-narrow, #switcher-large').click(function() {
  //     $('#switcher').unbind('click', toggleStyleSwitcher);
  //   });
  //   $('#switcher-default').click(function() {
  //     $('#switcher').click(toggleStyleSwitcher);
  //   });
  // });
  
  // Step 21
  // document.ready(function() {
  //   $('#switcher').trigger('click');
  // });
  
  // Step 22
  // document.ready(function() {
  //   $('#switcher').click();
  // });
  
  // Step 22
  // document.ready(function() {
  //   document.keyup(function(event) {
  //     switch (String.fromCharCode(event.keyCode)) {
  //       case 'D':
  //         $('#switcher-default').click();
  //         break;
  //       case 'N':
  //         $('#switcher-narrow').click();
  //         break;
  //       case 'L':
  //         $('#switcher-large').click();
  //         break;
  //     }
  //   });
  // });
  
  // Finished product
  
  document.ready(function() {
    // Enable hover effect on the style switcher buttons.
    $('#switcher .button').hover(function() {
      this.addClass('hover');
    }, function() {
      this.removeClass('hover');
    });
  
    // Allow the style switcher to expand and collapse.
    var toggleStyleSwitcher = function(event) {
      if (!$(event.target).is('.button')) {
        $('#switcher .button').toggleClass('hidden');
      }
    };
    $('#switcher').click(toggleStyleSwitcher);
  
    // Simulate a click so we start in a collaped state.
    $('#switcher').click();
    
    // The setBodyClass() function changes the page style.
    // The style switcher state is also updated.
    var setBodyClass = function(className) {
      $('body').removeClass();
      $('body').addClass(className);
      $('#switcher .button').removeClass('selected');
      $('#switcher-' + className).addClass('selected');
      
      if (className == 'default') {
        $('#switcher').click(toggleStyleSwitcher);
      }
      else {
        $('#switcher').unbind('click', toggleStyleSwitcher);
        $('#switcher .button').removeClass('hidden');
      }
    };
  
    // Invoke setBodyClass() when a button is clicked.
    $('#switcher').click(function(event) {
      if ($(event.target).is('.button')) {
        if (event.target.id == 'switcher-default') {
          setBodyClass('default');
        }
        if (event.target.id == 'switcher-narrow') {
          setBodyClass('narrow');
        }
        else if (event.target.id == 'switcher-large') {
          setBodyClass('large');
        }
      }
    });
  
    // Invoke setBodyClass() when a key is pressed.
    document.keyup(function(event) {
      switch (String.fromCharCode(event.keyCode)) {
        case 'D':
          setBodyClass('default');
          break;
        case 'N':
          setBodyClass('narrow');
          break;
        case 'L':
          setBodyClass('large');
          break;
      }
    });
  });
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 21/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.