Demo Development Core

Events! Attributes! Your firebug console will display information while you are interacting with the form below.

div set 1 : 1

div set 1 : 2

div set 1 : 3

div set 2 : 1

div set 2 : 2

div set 2 : 3

Button 1 (span) Button 2 (span) Button 2 (span)

list item set 1 # 1
list item set 1 # 2
list item set 1 # 3
list item set 1 # 4

list item set 2 # 1
list item set 2 # 2
list item set 2 # 3
list item set 2 # 4

href set 1 # 1 ( href_class_1 )
href set 1 # 2 ( href_class_1 )
href set 1 # 3 ( href_class_1 )

href set 2 # 1 ( href_class_2 )
href set 2 # 2 ( href_class_2 )
href set 2 # 3 ( href_class_2 )

sibling1
sibling2

sibling3
sibling4

Friend 1 - Href Friend 2 - Href Friend 3 - Href

$.ready( function () {
  
  
  //console.log(Geneva == jQuery);
  //console.trace();
  
  // Prototype syntax
  $('input_set1_1')
    .observe('focus', console.log )
      .observe('blur', console.log );

  // Geneva w/ Prototype id selector
  $('input_set1_2')
    .focus( console.log )
      .blur( console.log );

  // Geneva w/ jQuery id selector
  $('#input_set1_3')
    .focus( console.log )
      .blur( console.log );

  // Geneva w/ class selector
  $('.input_element')
    .focus( console.log )
      .blur( console.log )
        .keyup( console.log );

  // Form Submission      
  $('form_events_demo')
    .submit( function () {
      console.log( $(this).serialize() );
    });


  $('input.change_my_color')
    .focus( function () {
      $(this).highlight();  
      
      console.log($(this));
    })
    .blur( function () {
      console.log( $F($(this)) );
    });





  $('select')
    .change( function () {
      $(this).attr('title', 'currently selected value is: ' + $F($(this)));
      console.log('attribute updated');
    });


  $('ul.items li')
    .mouseover( function () {
      $(this).highlight();
    });

  $('span.is_button')  
    .click( function () {
      $(this).shake();
    });


  $('span')
    .click( function () {
      if ( $(this).hasClass('remove_my_title') ) 
        $(this).removeAttr('title');
    });

  
  
  $('.hrefs')
    .click( function () {
      console.log('All your HREFs are belong to us');


      $(this).toggleClass('toggling_class');

      console.log( $(this).attr('class') );

    });


  $('.hrefs').each( function (h) {
    h.shake();
  });


  $('div.by_selector')
    .click( function () {
      $(this)
        .prev('div')
          .css( { 'background' : '#ff22ff' } );
    });
  /*
  $('.is_ajax_button')
    .click( function () {

      var dest  = $(this).id.replace('span_button1_', 'div_set1_');
      var show  = $(this).id.split('_')[2] - 1;

      $('#' + dest).load('xhr2.php', function (xhr) {
        var libs = xhr.evalJSON();
        return libs[show].library + ' : ' + libs[show].url;
      });  
    });
  */  

  $('input[type="button"]')
    .click( function () {
      
      
      var tofocus = this.id.replace('button_set1', 'input_set2');

      $(tofocus).focus();

      //$(this).attr('value', 'clicked!');
      //$(this).attr('value', 'clicked!');
      this.value = 'Clicked!';
    });




  $('button_set1_3')
    .click( function () {
      $('.row2').each( function (r) {

        r.click();      

      });
    });

  $('.row2')
    .click( function () {
      $('.row1').click();
    });
});