One of the ways I am attempting to improve my skills as a designer is to give long-term attention to projects. I typically design something, enjoy the thrills of launching it, then let it sit until I'm ready to start from scratch again. In the case of Fusionfox and other websites I have created recently, I'm attempting to make incremental updates and improvements. This article will serve as a log of site updates.

October 10, 2006

• Internet Explorer Support— Martin and Pedro graciously assisted me in finding the bugs that were breaking this site in IE (versions 5.5, 6 and 7). Hopefully we have them all flushed out by now.
• XHTML Validation— Though I coded this site in XHTML as well as I know how, there always come invalid uses that come up after the fact. I'm working feverishly to get those all flushed out so that the "Valid XHTML" link at the bottom of each page yields positive results.

One last fun fact to note: I have been copied! I consider it quite an accomplishment to be seen as good enough to be mimicked. Mark kindly told me about this one: teresebower.com. Good times.

I look to make additional enhancements in the coming months instead of just letting this site fester. Thanks for reading.

October 11, 2006

A visitor of this site reminded me of something that I have wanted to do, but I didn't know how to proceed. I added scroll wheel functionality to my portfolio. This feature is only available in Windows (that's Adobe's decision, not mine). Be sure to click somewhere in the portfolio to bring it in to focus, then scroll up and down to move the thumbnails. Check it out (portfolio changed March '08).

Here's the ActionScript that runs the scrolling portion of the portfolio (both the mouse wheel and the dragger functionality):

//Set the dragger's horizontal position
dragger._x = 214;

//Start dragging when pressed
dragger.onPress = function() {
     _root.hoverinstruct._visible = 0;
     startDrag(this,false,214,40,214,390);
};

//Stop the dragging when released
dragger.onRelease = dragger.onReleaseOutside=function () {
     stopDrag();
};

thumbar.setMask(theMask);
thumbar.onEnterFrame = function() {
     scrollAmount = 7.25;
     moveThisMuch = -(dragger._y - 40)*scrollAmount;
     this._y -= (this._y-moveThisMuch)/5;
};

//Scroll Wheel Code (for Windows)
var mouseListener:Object = new Object();
     mouseListener.onMouseWheel = function(delta) {
          _root.hoverinstruct._visible = 0;

          if(dragger._y > 39 && dragger._y < 391){
               thumbar._y -= (delta*1.5);
               dragger._y -= (delta*1.5);
                    if(dragger._y <= 39){
                         dragger._y = 40;
                    }
                    if(dragger._y >= 391){
                         dragger._y = 390;
                    }
          }
     }
Mouse.addListener(mouseListener);

It's not as bad as it looks, I promise. :) This was good code to learn. It has come in very handy.

November 14, 2006

Allow me to introduce you to one of the first Ajax-based web interfaces I've made publicly available. It's the big, phat, one-and-only, Contact Page. Note what happens when you don't fill in a field and click Send or Submit, and note what happens when you correctly fill in all the fields. It's like magic mixed with a lot of programming. Since I'm always trying to find simple examples for things on the Web, I'll provide the code I used to validate the notification form (the one at the bottom of the Contact page). Here it is:

//+++++++ Notify Checker Code +++++++++++

function submitNotified(){
   var notifiedEmail = document.getElementById("comment-email-notify").value;
   //Error Checking
   if(notifiedEmail.length <= 0){
      var notifiedError = document.getElementById("notifiedError");
      notifiedError.className = "error2";
      var notifiedID = document.getElementById("comment-email-notify");
      notifiedID.className = "bad";
   } else {
      var notifiedID = document.getElementById("comment-email-notify");
         notifiedID.className = "good";
         var notifiedError = document.getElementById("notifiedError");
         notifiedError.className = "invisible";

      //Get rid of any error warnings...
      var notifiedError = document.getElementById("notifiedError");
      notifiedError.className = "invisible";

      //Processing... indicator text
      var processingspan = document.getElementById("theprocessing");
      processingspan.className = "processing";

      //Send the data to the PHP processor
      var url = "notified.php";
      request.open("POST",url,true);
      request.onreadystatechange = showConfirmation;
      request.setRequestHeader("Content-Type","application/
x-www-form-urlencoded");
      request.send("notifiedEmail="+escape(notifiedEmail));
   }
}

function showConfirmation(){
   if(request.readyState == 4){
      if(request.status == 200){

      //Locate form on page
      var successspan = document.getElementById("thesuccess");
      var notifiedForm = document.getElementById("notifiedForm");
      var beta = document.getElementById("beta-home-middle-inner");

      //Create some confirmation text
      successspan.className = "success";

      //Replace the form with the confirmation
      beta.removeChild(notifiedForm); //Remove the form
   } else {
      var message = request.getResponseHeader("Status");
      if((message.length == null) || (message.length <= 0)){
         alert("Error! Request status is "+ request.status);
      } else {
         alert(message);
         }
      }
   }
}

You'll also need some simple PHP to send the information to an e-mail account:

<?php

   $email = $_REQUEST['notifiedEmail'];

      $message = "
      E-mail: $email

      $themessage
      ";

      $receiver = "mail@example.com";
      $subject = "New Fusionfox Notification Subscription";

   //E-mail Sending Code
   mail($receiver, $subject, $message, "From: $email");

?>