2009
02.28
Article | HTML HTTPS Form Submission Error | Feb 2009 | M.McKennedy

I was setting up a web form using SSL so customers could enter their credit card information  securely and I received the following error: “Submission Error Thank you for taking the time to submit your information. Unfortunately, we encountered an error during processing. Our servers were unable to determine the origin of the submission and did not receive your information.”  After week’s worth of back-and-forth unsuccessful emails between the web host’s support department and myself I decided that the support technician was not doing anything to resolve the issue so I took it upon myself.

It’s common knowledge in the web-world that if you are going to have a place on a website for customers to enter credit card information, that page best be secure.  I looked into purchasing an SSL (Secure Sockets Layer) certificate but the web host had another option, and this one was free.  According to their support documentation I could redirect the url for any page to use this format https://{USERNAME}.{WEBHOST}.com/{PAGE}.html so I setup an .htaccess file to redirect the reservations page to the secure URL within the reservations directory on the server.  He is what the .htacess file looked like.

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{REQUEST_URI} reservations
RewriteRule ^(.*)$ https://{USERNAME}.{WEBHOST}.com/reservations/$1 [R,L]

Basically this says to redirect any page within the ‘reservations’ directory to use https.

I set everything up and then tested the form to find that I received the following error:

HTTPS Form Submission Error (click for larger view)

HTTPS Form Submission Error (click for larger view)

“Submission Error
Thank you for taking the time to submit your information. Unfortunately, we encountered an error during processing. Our servers were unable to determine the origin of the submission and did not receive your information.”

I decided to contact the Support department for the web host and let the professionals figure this one out.  The first point of contact was on Monday.  The only response I received during the entire week was “unable to replicate the problem.  Please try submitting the form again.”  I tried submitting the form several times, and from many different locations, each and every time I received the same error but the support representative could not generate the error on her end.  Actually this one went through two different support technicians, and neither could come up with anything more than – please try submitting again.  I was nearly at the point of dropping the web host for one that provides real support because I really getting sick of reading “sorry, please try submitting again”.  Instead, I chose to take matters into my own hands (in hindsight I should have gone this route in the first place) and I began troubleshooting the form on my own.

The original form began like this:

<form id=”reservationrequest” name=”reservationrequest” action=”http://www.{WEBHOST}.com/scripts/formemail.bml” method=”post” onsubmit=”return validRRForm(this)”>
<input type=”hidden” name=”my_email” value=”info@{DOMAIN}.com” />
<input type=”hidden” name=”thankyou_url” value=”http://www.{DOMAIN}.com/contact-confirmation.html” />

I thought to myself “unable to determine the origin of the submission” this must be the key to all this.  So I changed the url in the ‘action’ of the form to this:

https://www.{WEBHOST}.com/scripts/formemail.bml

Which changed the form into this:

<form id=”reservationrequest” name=”reservationrequest” action=”https://www.{WEBHOST}.com/scripts/formemail.bml” method=”post” onsubmit=”return validRRForm(this)”>
<input type=”hidden” name=”my_email” value=”info@{DOMAIN}.com” />
<input type=”hidden” name=”thankyou_url” value=”http://www.{DOMAIN}.com/contact-confirmation.html” />

I tested the form and just like that, submission received, no errors at all!

The lesson here is don’t give up!  Hopefully, if you were seeing this same HTML form submission error while trying to use https you did a web search and it brought you to this page (or another with the same resolution) and now their isn’t an issue!  That is exactly why I posted this tutorial on how to correct the “Our servers were unable to determine the origin of the submission and did not receive your information” error to try to save someone the time of going through some support rep. with no desire for troubleshooting/resolution.

I am sticking with the web host because I have not had any issues with their support department in the past.

I don’t claim to be an expert on HTML forms, SSL, or .htaccess files…I only know that the form validates as XHTML Transitional 1.0 and works in the following browsers: Firefox 3.0.6, IE 7, Google Chrome, Opera 9.2, and Safari (For Windows) 3.2.1.

2009
02.25
Article | HTML/JavaScript Tutorial | Feb 2009 | M.McKennedy

So you want to know how to change a background image when a link is hovered over and back to the original onMouseOut but you don’t know much HTML and/or JavaScript?  Perfect… take a look at this simple tutorial on how to use the Document Object Model (DOM), the onMouseOver and onMouseOut event handlers and a bit of JavaScript to make the magic happen.

Now before I jump into this I must say.  I am not an expert in JavaScript nor HTML but I was bored today so I decided that I wanted to create a “onMouseOver” event to trigger the background image of a Div to display add odd image of myself (this is for my personal website of course, and all in good fun) when my name is hovered over with the mouse pointer. I wanted the image to appear as the background while keeping the text of the paragraph “on top” of the image, so it has looks like I am trapped beneath the text, yes, I know…not the most appropriate use of my time but it was enjoyable. As the mouse pointer is moved from the link the image goes back to a white background.

I do understand that there are many different ways to achieve this same effect.  Some “better” than others.  So if you have come here to add snotty comments about crappy HTML, JavaScript or CSS coding then you should just leave now.  (Well, of course you can stay and read on…just don’t leave any negative feedback unless you have something constructive to go with it.  If you know of other ways to achieve the image roll over effect then please feel free to post and post often!

I searched various forums and found plenty of different methods posted by a variety of different skill leveled authors but none that suited my “copy and paste” desires.  There were a host of HTML tutorials on how to change the background color when a link was clicked.  Tons of posts where the subject of the post and/or article was lost in a blur of childish bickering over coding semantics.   I was looking for a quick and easy way so I reworked my search term and entered them over and over into the almighty Google to no avail.  I needed to dig in to find out how it all worked so I changed my search terms to “HTML Document Object Model “.   If I was going to do this I needed to learn about how HTML page elements can be accessed and therefore manipulated.

Eventually I stumbled upon (and in hindsight should have been the first place I looked)  http://www.w3schools.com/ and specifically their section on the HTML Document Object Model – http://www.w3schools.com/htmldom/default.aspI was able to figure it out and it’s really quite simple.  Here is a link to what I did – hover your mouse over the word Michael in the first paragraph to watch the image appear. Move your mouse pointer away from the link to watch the background return to white.

Below are two static images of what happens with the mouse over, click on them for a larger view or just go to McKennedy.org and see it for yourself.

Moving the mouse pointer over the word Michael creates triggers the onMouseOver event. (click for a larger view)

Hover Over This Link To Change The Div's Background Image (click for larger view)

The onMouseOver Event triggers the changing of the divs background image. (click for a larger view)

Hovering Over The Link Causes The onMouseOver Event To Change The Background Image Of The Div

If you want to practice this on your own here are links to the two images:

Michael
Spacer

Here is how I did it.

<html><title></title><body><head>I put following section between the head tags  – like this</head><body></html> tags:

<!– Image Roll –>
<script type=”text/javascript”>
function changeStyle()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/profile/from-above-thumbs-up.jpg)”;
}
function changeStyleBack()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/spacer-2×2-white.jpg)”;
}
</script>
<!– End Image Roll –>

The Div that changes background when the link is hovered over is below:  This belongs somewhere between the <body></body> tags.

<div id=”imageRoll” style=”background-repeat:no-repeat”>

<p style=”font-size: 1.2em”>Some Opening Title – Something BOLD – Eye Grabbing</p>

<p>Here is where I write some text, yes, some text and then I put some more and try to use words that are more than five characters.  My name is <a href=”#” onmouseover=”changeStyle()”; onmouseout=”changeStyleBack()” title=”Michael Gives Two Thumbs Up To His Own Web Site>Michael</a>,

and if this code was live then when you hovered over the word “Michael” you would have seen an image of me appear beneath this text.</p>

</div>

To put the entire thing together:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>onMouseOver Change Div Background Image Example</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<!– Image Roll Over Code –>
<script type=”text/javascript”>
function changeStyle()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/profile/from-above-thumbs-up.jpg)”;
}

function changeStyleBack()
{
document.getElementById(“imageRoll”).style.backgroundImage=”url(images/spacer-2×2-white.jpg)”;
}
</script>
</head>
<body>
<div id=”imageRoll” style=”background-repeat:no-repeat; width:348px; height:261px”>
<p style=”font-size: 1.2em”>Some Opening Title – Something BOLD – Eye Grabbing</p>
<p>Here is where I write some text, yes, some text and then I put some more
and try to use words that are more than five characters. My name is <a href=”#” onmouseover=”changeStyle()” onmouseout=”changeStyleBack()” title=”Michael Gives Two Thumbs Up To His Own Web Site”>Michael</a>,
and if this code was live then when you hovered over the word &quot;Michael&quot; you
would have seen an image of me appear beneath this text.</p>
<p>I set the height in the style of this div because this text wasn’t filling
the space to allow the entire background image to appear when the link is
hovered over.</p>
</div>
</body>
</html>

The code above is valid XHTML Transitional 1.0.  and has been tested in Firefox 3.0.6, IE 7, Google Chrome, Opera 9.2, and Safari (For Windows) 3.2.1.

I thought about pre-loading the image using JavaScript or CSS but then I realized that the image itself is only 18.9 KB therefore there should not be much time spent waiting for the background image to load.

So there it is…and it’s pretty simple too.  A short and sweet way to solve the big JavaScript onMouseOver onMouseOut Background-Image changing mystery.  Copy, Paste and modify the above code to fit your needs.

2009
02.24
Website Design | February 2009 | M.McKennedy
The Old Moonlight Lady Website

The 'Old' Moonlight Lady Website

Back in 2007 I was hired to design a custom website for The Moonlight Lady which offers New England vacation cruises based out of Lake Champlain in Burlington, Vermont.  The original site had a unique, rustic look (as does the boat the Moonlight Lady) and used tabs, and hidden divs to keep users from leaving a page.   As a matter of fact nearly every page had it’s only Contact Us section – the idea was to give users a simple way to get more information about the cruises offered which helps covert these users into leads.  There was a bit of the web 2.0 look and feel to the site.

Several months after the Moonlight Lady website went live I was informed that there was a new project manager working for the Moonlight Lady and that she wanted to take their services to a bigger company – one who specialized in hotel and tourism websites.  They were looking to simplify the website.  I wished them the best of luck.

Vermont Discovery Cruises - The New Site

Vermont Discovery Cruises - The 'New' Site

A year later and the Moonlight Lady is back!  I was contacted back in December of 2008 about the possibility of taking over the existing Vermont Discovery Cruises website.  I looked over the template created by this other company and saw the possibly of greatly improving the site without deconstructing it.  One of the first things I changed was to convert the Flash-based slide shows to something a bit more search-engine-friendly.  I switched them to html/javascript slide shows.  Also, one of the most obvious changes was that the site need to use title tags on all links – this is basic SEO (search engine optimization)!  I was also tasked with adding new tours complete with custom graphics and stock photography, as well as customized Google maps for each cruise route.

New cruise tours have been added and lots of clutter has been removed.  When the client needs something added/changed and/or modified I get things done in a day or two – depending on the priority (as opposed to the rumored three weeks it was taking the other company).  I provide a high level of service that keeps my oldest clients (it’s been over 8 years now since I signed my first client) around and through word of mouth keeps new clients coming in.

The Moonlight Lady was the first client to leave me for my website design services and now they are back!  Vermont Discovery Cruises offers a variety of overnight vacation cruises throughout New England and Canada.  Take a cruise on the Moonlight Lady – as they say Relax, Refresh, Recharge, Connect on board this unique Lake Champlain vacation!

2009
02.22
Article | Snowboarding | Feb 2009 | M.McKennedy
click to view map

click to view map

Vermont back country snowboarding and skiing at it’s finest. I had the pleasure of joining four skiers and one other snowboarder in Underhill, VT on Mt. Mansfield for a sweet day of carving up powder on The Teardrop Trail.

The Teardrop Trail was originally cut in the 1930s, from what I have been told.  Descending from the west side of Mt. Mansfield, the trail offers steep, narrow, twisting, tree-line classic Vermont back hill powder skiing and riding.  Needless to say, this is not the type of ski/snowboarding trail for beginners and do yourself a favor, wear a helmet!

After fueling up on a good breakfast and (a bit too much) coffee I met a group of guys at Mills Riverside Park in Jericho.  We climbed into two cars and headed out to the entrance to Underhill State Park.  We parked on the side of the road right before a gated trail-head.  With snowshoes on, boards strapped to backs, helmets dangling off backpacks, and skies fixed with skins (a thin coating of textured plastic that is appended to the bottom of the ski to add climbing capabilities) we made (what we assumed were our) final gear adjustments and began the ascent.

click for larger view

click for larger view

This was a first for me, well…. back in 1984, when I began riding a board all I did was back hill riding, but I never hiked up a mountain with a board on my back before, nor had I done it in snowshoes – small hills yes, plenty….but Mt. Mansfield is over four thousand feet tall!  To add to all of this; it was my first time on a board in two years, and I had not been exercising regularly.  Within fifteen minutes of hiking we stopped to remove a layer of clothes.

Another thirty minutes later we stopped to rest for a short period.  The pattern went on and on for the entire hike up the snow-packed trail.  At some points we stopped every few minutes to catch our breath as the grade of the trail was incredibly steep at times.  I recall a few moments where I asked myself how I planned on getting back down the mountain if my legs were already burning from exertion.  There was even a point where I contemplated stopping and riding down from there.  Needless to say, it was a tiring hike up but when you are with a group of guys there is plenty of testosterone going around to help push through the doubt.

click for larger view

click for larger view

click for larger view

click for larger view

click for larger view

click for larger view

After hiking for three hours we decided that the trail was narrow enough for our tastes.  It had been about three feed wide for several hundred yards and none of us really knew where the starting point was.  The evergreen trees were thickly clumped with nearly a foot of snow.  The wind chill nibbled at every part of the body, exposed or not.  We knew we were near the top but by this time most of us were saying… “This is far enough.” “We should stop right up there.”  “It looks somewhat sheltered.  This looks like a good place to stop.” “This trail has been a mere few feet wide for a while now, I am ok with stopping here.”  Eventually we did stop and I was exhausted and I mean completely drained of any energy.  Doubt began creeping up on me again.  I began thinking about the possibility of getting hurt.  You know…legs tired, can’t hold yourself up and BAM! into a tree!!  That would not be good!

Anyway…I squashed those thoughts and began focusing on stretching and regaining the energy to get me down that mountain not only in one piece but with style as well.  We fueled up, strapped on helmets, put on extra layers, strapped boards to feet and began the descent on the Teardrop Trail.

Within a few feet I realized that wearing a backpack with snowshoes hanging out of it (I was ill-prepared – the backpack I was wearing was a bit small), required a quick adjustment to my riding style to account for the extra weight.  Within a few turns I had a good feel for how to manage the fresh-powder-lined trail.  I aggressively attacked the trail, forcefully carving my board into the into the side of the mountain, back and forth and side to side to control both speed and direction.  The sides of the trail were a haven for powder-hungry skiers and riders.  A quick b-line off the trail and into the woods exposed untouched tree-runs of knee-deep powder for the adventurous.  Jump back onto the trail to explore the various bumps and jumps, springing into the air effortlessly and for great distances due to the steepness of the trail.  All of this quickly burned up any energy I had and made me realize just how dangerously tired my legs really were.  Luckily, the entire group of us stopped every few minutes to wait for each other which gave my legs short periods of rest.  I could hear the yelps, and cheers of all of us while, each in his unique style, ripped up the Teardrop Trail just as others did 79 years ago.

click for larger view

click for larger view

By the end of the run a mere thirty minutes had passed but every single one of us was smiling as much as one can possibly smile.  My legs were cramped and in pain but still I knew that I had just experienced one of the greatest snowboard runs I have ever been on.  Someone popped the trunk of their car, pulled out some beer and everyone of us held our cans up high as we toasted to some of the best Vermont back hill skiing and riding there is.  We stood for a while talking about how each one of us enjoyed certain sections or types of snow on the trail.  We talked about the pain of the hike up, the pure enjoyment and satisfaction of the ride down and the possibility of doing it all again.  The sweat beneath my clothes began to chill my body once more.  We packed into our cars and headed back to Mills Riverside Park where we exchanged goodbyes and drove off to our respective homes.

Mt. Mansfield’s Teardrop Trail is a hidden gem in a state filled with some of the best skiing in the northeast period!  Smuggler’s Notch, Stowe, Jay Peak, Sugarbush – they all have their own charm and challenges but sometimes you have to get off the trail, away from the ski lifts and into the woods to find out what treasures really lay nestled in the forests of the Green Mountains and other areas of beautiful Vermont.  If you are in Vermont vacationing, and you are looking for a challenge check out the Teardrop trail after a fresh powder-dump and you will never look at skiing and riding the same again.

2009
02.07
New Release | Metric | Feb 2009

The band Metric has finally given us something to look forward to!  April 14, 2009 is the official release date for their 4th full-length recording called Fantasies.

Metric - New Album April 2009

Metric - New Album April 2009

Here is what Metric has to say, “Our new album – FANTASIES – will be in stores across the USA & Canada on April 14, 2009 and in the rest of the world shortly thereafter. Starting March 2, 2009, you’ll be able to pre-order FANTASIES directly from us here in one of several excellent bundles including limited edition vinyl, deluxe hardcover CD and straight up download, along with some exclusive extras. Anyone who pre-orders will immediately get an MP3 of the first single “Help I’m Alive”. Until then, here is a free download of an acoustic version of “Help I’m Alive”. We’re also working on worldwide touring plans, dates will be announced soon.” – from ILoveMetric.com

Rumor has it that Metric will set out on a headlining US tour in the month of June, I do not have the exact dates yet…but as soon as I do…

Track listing for Fantasies:

  1. Help I’m Alive
  2. Sick Muse
  3. Satellite Mind
  4. Twilight Galaxy
  5. Gold Guns Girls
  6. Gimme Sympathy
  7. Collect Call
  8. Front Row
  9. Blindness
  10. Stadium Love