New Code View

I've been working for the past day on integrating jQuery and user defined javascript functions, and finally figured out what I was trying to finish. Coming here to show off the results, I realized that I'm quite tired of scripts/HTML/CSS looking terrible. So I've finally gotten around to adding a special view for code, using the open-source Syntax Highlighter. Great code, and very useful as you can see below.

So on to what I was showing off. In the members section of the CESAC website, I'm building up a set of tools that will allow future webmasters to edit the site without touching code. The current section I'm working on is the members database. One tool in that section is an Add New page. On that page, one item is an HTML textarea, for the member's description. Since the description field in the SQL database is limited to 1000 characters, I don't want people putting more than 1000 characters into the textbox. I also wanted to give them a live updating monitor of how many characters they have typed.

I gave the textarea a class of 'new_description', and the monitor 'new_description_monitor'. Below is my initial script.

$(document).ready(function(){

  if      ($(".new_description").val().length < 1)    { $(".new_description_monitor").css("color","black"); }

  else if ($(".new_description").val().length < 1001) { $(".new_description_monitor").css("color","green"); }

  else                                  { $(".new_description_monitor").css("color","red"); }

  $(".new_description_monitor").text( $(".new_description").val().length + "/1000" );

  $(text).keypress(function(event) {

    window.setTimeout(function(){

      if      ($(".new_description").val().length < 1)    { $(".new_description_monitor").css("color","black"); }

      else if ($(".new_description").val().length < 1001) { $(".new_description_monitor").css("color","green"); }

      else                                  { $(".new_description_monitor").css("color","red"); }

      $(".new_description_monitor").text( $(".new_description").val().length + "/1000" );

    }, 0);

  });
  
});

It works perfectly. It annoyed me though, because I'm using the same code twice, once on pageload, and once each type a key is typed. I wanted to be able to type out the function once, then just reference it twice. So I dove into it, went through about 10 iterations, stopped by the jQuery forums for some help, and finally arrived at what you see below.

$(document).ready(function() {

  $("textarea").each(function(){ update_monitor('.' + $(this).attr('class')); });

  $("textarea").keypress(function(event) {

    var text = '.' + $(this).attr('class');

    window.setTimeout(function() { update_monitor(text);},0);

  });

});

function update_monitor(text)
{
  var value = $(text).val().length;

  var colour = (value < 1 ? 'black' : (value < 1001 ? 'green' : 'red'));

  $(text + '_monitor').text(value + '/1000').css('color', colour);
}

The function is declared and separated entirely from the main code. Additionally, this script will handle infinite textarea/monitors on a single page, as long as the monitor has a classname that is the classname of the linked textarea plus '_monitor'.
 

HTML Textbox Form - Character Limit

Last semester CESAC moved our registration system for the Career Fair to an online version run by Purdue Conferences. There were issues.

One big one was that the company description box said it was limited to 400 words. In reality, it was limited to 300 characters. Which is way too small. So we're working with Conferences to try and fix that.

Meanwhile I'm working on automating the member database for the Council so that the next webmaster has less code to touch. I've got the List page done, the quickedits working, and I'm almost finished building the New Member page. One feature of the page will be a text box for inputting a description for the member.

I decided, one thing that would be useful would be a live updating ticker on the side of the box, giving the user an up to date character number, so they know how much more can be added. Up to date to the point of every keystroke.

How to do this though, is the question. I googled to see if anyone else had built one, and couldn't find anything. So I just started working on my own from scratch. The first thing was how to grab the value of characters. The second would be how to update the page. And the third would be how to trigger those events on each keystroke.

First part was easy enough, it's just .val().length, added to the text box. The second part was also easy, I used .text, which replaces just the inside text of an element without having the replace the entire thing. The third was tricky though.

I considered using .keydown, but that triggers on any key, not just value keys, and if you press and hold down a key, it only triggers once, not each time the letter/number is added to the box. .keypress though, ended up being exactly what I was looking for. The final code was remarkably simple for what it does.

$(document).ready(function(){

    $(".new_description").keypress(function(event) {

        window.setTimeout(function(){ $(".new_textlength").text( $(".new_description").val().length + "/1000" ); }, 1);

    });

});

Note there is a setTimeout in there as well. I tried it without that, but the number updated before registering the changed value of characters, so it would be one off. The setTimeout fixed the problem.
 

jQuery Efficiency

Over the summer I started working on a data table project, and in the end got it working entirely. But the code was bulky. Over the past 6 months I've learned a lot more about jQuery though, and so have been going back to old code and trying to rewrite it.

This particular code controls the hiding and showing of rows depending on what checkboxes a user clicks. About a month go I changed part of the code and reduced it's original 35KB down to 7KB. Now though I've gotten the rest updated, and it's 1.5KB. It's also much more flexible, because it can handle changes in the data without needing changes itself.

So just to show off, I present here the original, and the newest version.

New

Original

$(document).ready(function() {

  var course;

  $(":checkbox").click(function(event){

    course = "." + $(this).attr("id");

    if ( $(this).prop("checked") ) {

      $(course).css("display", "block");

      $(':checkbox:not(:checked)').each(function(){ $('div.'+ $(this).attr("id")).hide(); });

    }

    else {
      $(course).css("display", "none");

    }

  });

  $(':checkbox:not(:checked)').each(function(){ $('div.'+ $(this).attr("id")).hide(); });

});

$(document).ready(function()

{

  if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
  if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
  if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
  if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

  if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
  if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
  if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
  if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
  if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
  if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
  if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
  if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
  if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
  if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

  if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
  if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
  if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
  if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
  if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
  if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
  if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

  $("#sem_spring2009").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".aspring2009").css("display", "block");

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".aspring2009").css("display", "none");

    }

  });

  $("#sem_fall2010").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".bfall2010").css("display", "block");

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".bfall2010").css("display", "none");

    }

  });

  $("#sem_spring2011").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".cspring2011").css("display", "block");

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".cspring2011").css("display", "none");

    }

  });

  $("#sem_fall2011").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".dfall2011").css("display", "block");

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".dfall2011").css("display", "none");

    }

  });

/*************************************************************************************************/

/************************************* The class checkboxes **************************************/

/*************************************************************************************************/

  $("#class_CE331").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE331").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE331").css("display", "none");

    }

  });

  $("#class_MA266").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".MA266").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".MA266").css("display", "none");

    }

  });

  $("#class_CE203").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE203").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE203").css("display", "none");

    }

  });

  $("#class_CE340").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE340").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE340").css("display", "none");

    }

  });

  $("#class_CGT164").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CGT164").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CGT164").css("display", "none");

    }

  });

  $("#class_CE343").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE343").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE343").css("display", "none");

    }

  });

  $("#class_CE361").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE361").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE361").css("display", "none");

    }

  });

  $("#class_CE398").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE398").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE398").css("display", "none");

    }

  });

  $("#class_CE399").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE399").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE399").css("display", "none");

    }

  });

  $("#class_CE383").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".CE383").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#type_spreadsheet").prop("checked")) )  {$(".spreadsheet").css("display", "none");}
      if ( !($("#type_worddoc").prop("checked")) )      {$(".worddoc").css("display", "none");}
      if ( !($("#type_presentation").prop("checked")) ) {$(".presentation").css("display", "none");}
      if ( !($("#type_photoshop").prop("checked")) )    {$(".photoshop").css("display", "none");}
      if ( !($("#type_image").prop("checked")) )        {$(".image").css("display", "none");}
      if ( !($("#type_adobedoc").prop("checked")) )     {$(".adobedoc").css("display", "none");}
      if ( !($("#type_autocad").prop("checked")) )      {$(".autocad").css("display", "none");}

    }

    else {

      $(".CE383").css("display", "none");

    }

  });

/*************************************************************************************************/

/************************************ The file type checkboxes ***********************************/

/*************************************************************************************************/

  $("#type_spreadsheet").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".spreadsheet").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

    }

    else {

      $(".spreadsheet").css("display", "none");

    }

  });

  $("#type_worddoc").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".worddoc").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

    }

    else {

      $(".worddoc").css("display", "none");

    }

  });

  $("#type_presentation").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".presentation").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

    }

    else {

      $(".presentation").css("display", "none");

    }

  });

  $("#type_photoshop").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".photoshop").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

    }

    else {

      $(".photoshop").css("display", "none");

    }

  });

  $("#type_image").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".image").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}
    }

    else {

      $(".image").css("display", "none");

    }

  });

  $("#type_adobedoc").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".adobedoc").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

    }

    else {

      $(".adobedoc").css("display", "none");

    }

  });

  $("#type_autocad").click(function(event){

    if ( $(this).prop("checked") ) {

      $(".autocad").css("display", "block");

      if ( !($("#sem_spring2009").prop("checked")) ) {$(".aspring2009").css("display", "none");}
      if ( !($("#sem_fall2010").prop("checked")) )   {$(".bfall2010").css("display", "none");}
      if ( !($("#sem_spring2011").prop("checked")) ) {$(".cspring2011").css("display", "none");}
      if ( !($("#sem_fall2011").prop("checked")) )   {$(".dfall2011").css("display", "none");}

      if ( !($("#class_CE331").prop("checked")) )  {$(".CE331").css("display", "none");}
      if ( !($("#class_MA266").prop("checked")) )  {$(".MA266").css("display", "none");}
      if ( !($("#class_CE203").prop("checked")) )  {$(".CE203").css("display", "none");}
      if ( !($("#class_CE340").prop("checked")) )  {$(".CE340").css("display", "none");}
      if ( !($("#class_CGT164").prop("checked")) ) {$(".CGT164").css("display", "none");}
      if ( !($("#class_CE343").prop("checked")) )  {$(".CE343").css("display", "none");}
      if ( !($("#class_CE361").prop("checked")) )  {$(".CE361").css("display", "none");}
      if ( !($("#class_CE398").prop("checked")) )  {$(".CE398").css("display", "none");}
      if ( !($("#class_CE399").prop("checked")) )  {$(".CE399").css("display", "none");}
      if ( !($("#class_CE383").prop("checked")) )  {$(".CE383").css("display", "none");}

    }

    else {

      $(".autocad").css("display", "none");

    }

  });

});

The way that this was achieved is in two ways. The first is by making everything not dependent on clicking certain checkboxes. Instead of saying, when the user clicks checkbox A, hide row A, I say when the user clicks any checkbox, check the name of that checkbox, and hide that row. Then only one statement is needed instead of one for every checkbox.

Additionally, there is a line that hides all rows who's checkboxes aren't checked. This is useful if the user refreshes the page. But originally it was an if/then statement for every single checkbox, and now is a single line. I had to get help for that one, but the results are beautiful.

Thoughts? Comments? Could it be even BETTER? Let me know in the comments.
 

Hiding A Dropdown Menu By Clicking Anywhere, jQuery

As I think I've mentioned before, my current project is an online company booklet, for the CESAC career fair. I've been working on drop down menus for it today, specifically the javascript code powering them.

In the past, I've created drop down menus with CSS only, because I hate relying on javascript. However, for touch screens, drop down menus must show on click, not on hover. For that, CSS won't do the trick.

Making a drop down menu with javascript is quite easy. You give the button and the menu similar classes, then create an if/else statement, where on click, the code checks to see if the menu is visible. If it is, it hides the menu. If it's already hidden, it shows the menu. The problem is, clicking elsewhere on the page does nothing. The only way to rehide the menu is to click on the button again.

To fix this, I put in a separate statement, saying, $(document).click, which checked to see if the menu was visible, and if so, hides it. The problem is, it runs after the button click statement. So if the menu is visible and you click on a random part of the page, it hides it. If it's visible, and you click on the button (which is still part of the document), both statements hide it, still okay. If it's hidden though, and you click the button, the button statement shows it, then the full document statement hides it. Since it starts out hidden, you can never see it.

After an hour of research and trying things, I figured out how to fix it. The key is in order of operations. You want the full document check to happen first. That way if you click on the button, the button statement will happen AFTER the full document statement, and remain in control.

The javascript we need is window.setTimeout(function(){ }, 1);

You place that around the action that shows the variable, in the button statement. For me, it ended up being window.setTimeout(function(){ $(child_id).show(); }, 1); This delays showing the menu until after the document click statement checks to see if it's visible, and so doesn't hide it if not needed. And works.
 

New Data Files Table

For those of you who have been following this blog for a long time, you might remember that over the summer I mentioned several times that I'm building a new website. I didn't want to share it until it was entirely done, but I'm just too excited about one new page to keep it entirely under wraps. A few of you have seen it already, (and given good advice), and it's now finished, visually and code wise.

The page I'm speaking of is a data table. Very similar code wise to the one I did over the summer, I've added some things that I'd learned since then as well as improved the efficiency of the javascript coding. The main difference though is the visual style. That part is what took me a good 2 months to settle down with, because I'm NOT an artist.

Inspired by the new Hotmail actually, I'm going for a white and light blue theme. One thing I was worried about initially was having that gradient go the full length of the options panel, but I really like it now that it's there. It distinguishes itself from the table itself while still maintaining visual continuity.

Now you might notice there aren't many files yes, and that's true. Only about a third of thing things that'll be there are there, and all the options in the options panel will be represented. It's just a matter of inserting the data into the SQL database though, I haven't gotten around to it. Besides adding more data, the table is finished.

Let me be clear, the site it self is not done, just this single page. You can feel free to look around the rest of it, but it's only about 60% complete. Next page on the list is the class schedule page. I want to stay with the white and light blue theme that I've got going on in the class files page, instead of just the block colors I have right now. So without further adieu, check it out.

Data Table

Any thoughts? Hate it, love it? Leave me a comment.
 

Schedule Creator Revisited

I finished the visual aspects of my schedule creator tool earlier this summer. I never got around to actually making it work though, since that would require PHP. Instead I went and learned PHP and then created my dynamic data table.

Since that is finished, I'm turning my sites back to the schedule creator. I pulled up my color bed test page, dusted it off, and added a submit button.

The end goal is to have the user click the submit link, which will lead to a "results" PHP file, which will appear as a plain HTML file to the user. The user will save the file as their schedule file to be placed directly into their schedule folder of their ICS webspace template. The PHP file will be reusable, it'll just re-write itself for everyone, but never actually change itself.

Breaking this down, there are three problems which have to be overcome. One, create an array in which every color cell is accounted for, with their background colors. Two, send that array to the PHP document. Three, write out the table using that array.

Part one is now done, it took me about an hour, because I had to figure a couple things out. I ended up keeping the ID constant for all color blocks, and then gave each an individual class. This is backwards of normal web development, but it's easier to get a class using jQuery than it is to get an ID. One other problem is that you can't start an ID or a class with a number. So each one got a class of "block#". Then I parsed that string to get just the number, and placed it in the array each time a color block was clicked.

Part two is what I'm looking at now, and that will be the most difficult part I think. Once I have the array in PHP, displaying it will be simple.
 

Futility

Today I spent 4 hours re-writing my input validation script. 4 hours, all of which had zero effect on what the user sees. Why do it then? Because the process flows more logically, and the entire script is only 2/3s as long as it was before. Which is good! What's even better is that it's more flexible now, it'll be easier to change.

I changed the way that the checkmarks appear, from images to background images. This gives me the ability to change the question mark to a slightly blue one when hovered over. Which is a nice change.

But that doesn't change the fact that I spent 4 hours to make zero changes to what is finally seen. It gives me a feeling of futility.
 

Small but Useful Improvements

With my Datatable project finished, I've been looking around for things to do. I decided to go back to my main site and just, look it over to see if I could find anywhere that could use .. improvement.

One things I found the left side navigation panel. When I first set it up as a dynamic expanding tree, I was just barely started to learn jQuery. I was also still struggling with some aspects of html, such as more advanced positioning methods. To get it to work, I made some compromises.

For example, the arrows that I use to indicate if a submenu is closed or not were created using an empty container with the background set as that image. But if a container is empty, it just doesn't appear. The easiest way to fix that is to put a space character in. It's invisible and the background image is then displayed. But if you drag select across the screen, you can see it. And, you need enough in a row to set the correct width for the container. This is what I had before: (  is the space character.)

<font class="inactive">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>

I can fix this though, by changing the font tag to a general purpose div tag. By setting the div to display:block, I set it to display even if there is no content inside it. No spaces. The reason I didn't do this originally is that left to itself, anything that is displayed block pushes everything after it down a line. And the image of the arrow needs to be directly left of the text for that option. Enter float:left. If you set something to float, then the item that appears directly after it will not be below, but instead appear to the left or right. So using those two, I was able to change the above to:

<div class="inactive"></div>

Less code, plus the benefit of looking better to the user. Amazing what 4 months of learning can do.
 

Data Table Finished

Well, finally finished with the data table entirely. For now at least. It's been added to the projects section of my website, complete with description and even links to test pages for different aspects.

Project Hub

Next week I'm going to be looking into user accounts and how that works, and I might eventually use the data table as a base to build onto with user accounts letting users not only add themselves, but also go back in and edit themselves as well. Well see how that goes next week.

I've also gotten my backups up to date, the last I'd made before the site went offline last weekend was from early May, so it's good to know that I'm protected if it happens again.
 

Form Validation Update

I have my form validation working entirely in a mock up page. The problem is, when I move it into the real submission page, it just, doesn't work. It's like it can't see the javascript at all, whether I put it in a distinct file or put it in the page itself. I'm trying to figure out what on the page could be interfering.

It's 11:31 am now, I've got until 5 pm to finish. Updates to follow.

Update (12:13 pm): I found out the problem that was killing my validation script, which is good news. There is bad news as well though. FancyBoxes, the script I'm using the make my radio buttons look pretty, uses the prototype javascript library. It's similar to jQuery, and I just linked to it as well. The problem is even inducing just the library kills me script. I suppose I could dig into prototype and learn it. Or I could just go find a jQuery script that will do the same thing without being breaking my own code.

Update (2:51 pm): I did end up giving up on Fancy Boxes. I think it was worth it, because I'm really happy with the way my error validation turned out. One thing that caused quite a few problems was the type of html I was using. I was using strict, and so when the checkbox came into view, it increased the vertical height of the box it was in. I changed the doc type to html traditional, and removed that problem. That caused me 2 hours of re-writing. At the same time, I opened in IE, and had to redo quite a bit of css just for it, to make it all look the same. But it's done now, and works everywhere.

Link
 

Radio Buttons, HTML

So radio buttons are interesting. I'd been trying to come up with a validation would let me check to see if at least one option was selected. The problem is that when the page loads and not options are selected, the value is that set of radio buttons ISN'T null or zero or blank. It's the value of the first option. So all the times I was trying say that is the value is null, give an error message, I was wasting my time. The value is NEVER null. It's just the first one until the user makes a selection.

This threw me for a long while until I wrote a script to tell me in real time what the value was. Once I found out the problem, progress was swift. I placed a placeholder option before the main options, and set it's value to blank. I then set it to display:none, making it invisible. Now on page load, the value IS blank, and so my if statement works.

You can see the test page here.

And I now have everything I need to validate the input for the data table. And 2 hours left of work.
 

Input Validation

Earlier this week I created a webpage allowing users to add themselves to my database. A friend of mine was looking at it and found a problem. Instead of telling me though, he decided to show me, by adding 100 blank people to the database.

Input validation! It is necessary. It is also really f***ing difficult to do. I've been researching this for 2 hours and playing around with things, and nothing works at all. I first tried to create a script that would capitalize the first letters of the name inputs, but that failed entirely. Then I tried a more simple goal, checking to see if an input was blank or not. And that's not possible either. Or at least it's not working.

I'm about one more try away from being done, I'll post an update when I reach that.

EDIT (5:06 PM): Alright, I have gotten the name to capitalize correctly. Now to work on the prevention of submission of there are other errors.
 

Weekly Project - Complete

I set out my goal for this week on Monday. The goal was to take everything I've learned about jQuery, PHP, and SQL over the past month and a half, and use it all to make an interactive data table.

I have accomplished my goal! Check it out.



I actually had 90% of it finished yesterday, and so today was planning on adding a bonus student portal, where students could add themselves to the database. This week is Stars though, at Purdue. That means that the campus is flooded with incoming freshman, all of which seem to need help with setting up their accounts. I got called to another lab to help, and as a result didn't really have much free time. I did manage to do a little tweaking though, and I added 3 select all boxes, one for each attribute.

This weekend, the student portal!

Another Update

Yesterday night I went ahead and finished the column changing buttons, and got everything working as it would appear to the end user. It was all static though, every name put in by hand.

I came to work today and determined to finish converting to PHP. And I did. That went very quickly actually, because each version of the table became a simple while loop.

The biggest problem though, happened when I needed to get the number of students from the database to my javascript file. This was necessary because the list of students is inside a container div, which has no default height set. If it had a static height, then the list might overflow, of the page might be longer than needed. If it had no height, then when less students are displayed, the header would follow the bottom of the list up, and could overlap with the search panel.

So the height of the container is set each time the page loads as the height necessary to show all students. This is accomplished by using each student's unique ID from the database. I access the max ID, and that is the number of students. Each student is 42 px in height, and the column titles are the same. So the number of students plus 1, times 42, is the total height.

The problem was getting the number of students to the javascript file. I tried using the PHP to set an invisible div's class to that number, and then use attr class in jQuery. But while it would grab the number, say 14, it wouldn't be a number. It would be a character 14.

After about a half hour, I finally moved that section of the jQuery code into the html main doc, and just uses PHP to create the line, num_students = 14;. It is now working, and the last thing I have to do is fix the multiple orders of display.
 

Data Table Update

I spent several hours today working on the visual design and layout of the data table, and am pretty happy with the result. The foot still needs some work, it's sort of just a big blob at the moment, but everything else looks great.

The search panel still works, and either tonight or tomorrow I'll be adding the organize by column effects. It will be the same as I did in the webpage to add data to a table, last week's project, so I just have to use the same method.

Finally then I'll do the PHP, probably on Friday, to finish up the weekly project. Certainly a more ambitious one than last weeks, but understandably given my higher understanding of the languages.
 

Progress On The Table

It's Tuesday night, and I've spent the past few hours working on my project for the week, the interactive data table. I spent today working out the jQuery code for the search panel, which will show and hide rows depending on which check boxes are selected, without having to reload the page.

I've got that done, and there are 3 different columns in the table that correspond to search options. The tricky part was when clicking a box to unhide a category, getting it to only hide people in that category who were also unhidden with the other 2 categories. It's working now, but the code is sort of clunky, so tomorrow I'll try and figure out a way to cut it down.

Also tomorrow I'll work on the CSS and design of the page. I threw what is currently working together very quickly because I wanted to get to the jQuery, and it shows. It's all of 2 colors, ugly borders ... very unfinished. Which is okay, because it IS unfinished, and tomorrow I'll try to finish the visual aspects.

After that, I'll add in the jQuery for switching row organizations by column headers, which will involve writing out the entire table 5 times, organized each possible way, and then hiding and showing depending on what the currently selected column is. Finally, I'll work on the PHP to make it truely dynamic, with data pulled from a database.
 

Fully Interactive Data Table

The interesting thing about my schedule on Monday and Tuesday is that because I work opening shifts, I get very little sleep before, and so end up taking a nap after. What this does is seemingly split the day in 2 parts, which means I can do quite a bit of work at work, and then wake up in the afternoon and evening and do more, without it seeming to drag on.

I spent a while laying in bed thinking about what I want to do, and I'm going to skip a few things I'd been planning on doing. Instead I'm going to go straight into a more ambitious project, that will give me a better idea of the difficulties involved with my upcoming project. The plan right now for the rest of this week is to create a webpage with a search bar on the side, and a table on the right. It will connect to a database, already filled in. There will be several forms of interactivity.

First, the user will be able to change the items displayed in the table using the search options, similar to Newegg's search feature, but in real time without reloading the page. This will be done with jQuery, hiding and displaying items with certain classes, as checkmark boxes are selected or unselected. There will be several columns, each being an 'attribute' with several options.

Second, the user will be able to change how the list/table is organized, by clicking on column headers. Up/down arrows will indicated ascending/descending, and a second click on the selected column will flip that.

This is hardly a groundbreaking idea, and it's not meant to be. But what it is, is a page that is beyond anything I've ever done before, yet builds on everything I've learned up to this point. No individual piece should be terribly difficult. I think the most complicated thing will be making sure that the PHP makes everything appear correctly, with echo. It's Monday evening now, I'll put in a start to it, but I'm not going to spend much time now, because I've got plans to meet up with friends later. However, I've got a 5 hour shift at work tomorrow with nothing to do but code, so I'll certainly have something to show by the end of it.
 

Editing Classes With JQuery

I've been working with jQuery for a while now, I used it in multiple places around my website. But in each case, I either adapted a pre-made free script, or look at a tutorial and copied it, editing by trial and error to achieve the desired effect. I don't actually Know Javascript, or how jQuery works.

I am attempting to rectify this situation. Turns out there are quite a few free textbooks on the subject, on Javascript in general and on jQuery. The jQuery website itself has quite a bit of interesting reading as well, and I went through a few of their tutorials.

From what I've gotten, the basic idea of JavaScript is, when the use interacts with a webpage, find the element in question, and do something to it. jQuery is just a library of functions, already written out in JavaScript. You link to it, and then can call the pre-made functions, without having to write them all out. One such function that I think will be very useful, hasClass. Using it, you can get a true false reading on whether an element has a certain class, say a link that gets clicked on. Only if the value is true, will you change it. I decided to test this out, along with the follow ups, addClass, and removeClass.

First I created the html document. In the head, I used the script tag to link to jQuery and then to myscript. I also used inline css to remove the outlines from links, and to see a class of c1, as bold. In the body, I created a link, giving it by default the bold class, c1.



Next I had to write the javascript to change it back and forth. I started with a ready function, which I still don't really understand the need for, except that if it's not there, the script must be placed after the link in question, in the html document, rather than in the head.

Inside this, I used a click event. Events are times that the user interacts with our webpage. As to what is click, that is any a at all, so any link in the webpage. I could specify this, but since webpage consists of a single link, it's unnecessary. Inside that click event, I have a couple things. Reactions to the click, basically, cause and effect. First, I prevent the link from doing it's default behavior (taking us to a new page), with the even.preventDefault(). Next, I have an if/else statement, which basically checks if the class is c1 or not. If it is, then I use removeClass, to remove c1, from (this). I could set it to remove something else, but (this) is a quick way to mean the element that is already being examined. Then if the link does NOT have c1, add it.



The effect achieved it that a link starts bold on page load, and when clicked, becomes unbolded. When clicked again, bold is restored ... back and forth. Useless in its own right, but certainly an interesting experiment.