Over the weekend my wife and I decided to go see a movie at the Arclight. I like the Arclight because you can reserve your seats. It's a nice theater with good parking. Now I'm going start a rant and at the same time comment on how the user experience can be improved with a little effort. With that in mind, I was sitting on the couch and went to the Arclight Cinema website on my iPad. Tapped the movie, selected the date and then the time I wanted to purchase tickets and a small popup bubble displayed showing available seats, but there wasn't an option to select seats or purchase tickets.

After looking around the website I was not able to find a way to purchase movie tickets. So I thought, no problem, I'll just give them a call. I tapped the Contact Us link. The link opened a new tab with a contact form, but no phone number. I didn't want to send a message to be seen later, I wanted to buy tickets now. Then I went looking for a phone number on the website and while there was a phone number for parking information, there wasn't a contact phone number to be found for help or purchasing tickets. Hot tip, make it easy for the user to get help or tell the user up front what to expect. Not able to find a contact phone number, I went back to Google which displayed the phone number and made a call to get help. They were busy so there was a wait, which I can understand that since it was Thanksgiving weekend. When I got a person on the phone, they told me that their website doesn't work on an iPad and to use a phone or computer. There really isn't a whole lot of difference other than screen size between the desktop and tablet browser experience. With very little work the desktop website can be made to work on a tablet. Better yet, make the design responsive from the start.

No problem, I have a iPhone in my pocket and I know how to use it. I filled out all the information, got the the credit card page, filled out my credit card information and got my first error. Not just any error, not even a friendly error, but a 500 error. For those that don't know, this means something went wrong on the server.

Continue Reading "Arclight Cinemas' Bad Form..."

A domReady function handles DOMContentLoaded events in your browser. The DOMContentLoaded event allows you to add behavior or change the HTML of a page after the HTML has loaded and before the onload event which happens after the complete page, including images has loaded. This allows you to add menu, tree behavior, AJAX functionality or anything else without having to wait for all items on a page to load. You may have experienced the need for a DOMContentLoaded event on a page that includes drop down menus or a tabbed interface which doesn't work until all images have loaded. Using the DOMContentLoaded event allows you to add the behavior before images and objects have loaded, giving a better user experience. The domReady function is similiar to the jQuery ready method without requiring jQuery.

Back in 2005 I modified code from Dean Edwards that had been modified by Tino Zijdel and added a DOMContentLoaded event. This is what is commonly known today as a domReady event. In 2008 I created a separate domReady module using Object Literal Notation (OLN). With time, code styles and methodology change. Even though the code still worked, it was time to for an update. With about an hour of time, I modified the domReady code to use private functions, delete code for KTLM browsers, and clean up the code.

I changed the code to leave only the domReady global function. All other functions are private to domReady instead of the previous two global varibles. With the OLN object, all methods could be accessed globally, those methods are now private. The code needed to not create itself if the js file had been loaded multiple times and to reveal only the domReady function. Here's where I started.

// Create the domReady event handler once.
if(typeof domReady !== "function") {
    var domReady = (function() {
        // Array of domReady event handlers.
        var events = {}, domReadyID = 1, bDone = false;

        // Function that adds domReady listeners to the array.
        function add(handler) {
        }

        // Function to process the domReady events array.
        function run() {
        }

        function init() {
        }

        init();
        return add;
    })();
}

Continue Reading "domReady version II..."

I read a rant by Jeff Atwood on websites that nag the reader to install their app every time the site is accessed. It doesn't matter if you've selected "No", these sites keep nagging you to download their app. The post is called App-pocalypse Now. It is very good and I suggest reading the post.

I run into this all the time when a website links to a website (usually a news site) that everytime asks me to download their app. It is frustrating. I just want to read the article and be on my way. I don't visit these sites often and don't see the point in downloading an app to view their content every six months or so and a link will always send me to the website not the native app, so what's the purpose of downloading their app? In the post Jeff writes:

Let's start with the basics. How do you know which apps you need? How do you get them installed? How do you keep them updated? How many apps can you reasonably keep track of on a phone? On a tablet? Just the home screen? A few screens? A dozen screens? When you have millions of apps out there, this rapidly becomes less of a "slap a few icons on the page" problem and more of a search problem like the greater web. My son's iPad has more than 10 pages of apps now, we don't even bother with the pretense of scrolling through pages of icons, we just go straight to search every time.

Which got me to thinking. Other than games, just what benefit does an native app give over a website? What value does a native app give that a website can't give the reader? Notifications can just as easily be replaced with an email message. If you download the LinkedIn app you get notifications and email notifications. Maybe an app is better formatted for a device, but websites should be responsive to the screen you're using.

I thought personally, why have I downloaded an app over a website and what apps do I use most. Facebook, though with the exception of notifications, I can't really think of anything that the app does that can't be done in a website. The twitter app has a great feature where it remembers the last tweet you read and returns you to that tweet in the list of tweets. That makes it much easier to read my twitter feed, but why couldn't twitter do that on their web page? Geolocation is supported, though badly I think on mobile devices which might be a reason to download an app such as Yelp. Most apps I've downloaded I don't even use.

My credit union app allows me to take a picture of a check and deposit the check wherever I am which is useful since my wife has several different employers, none of whom direct deposit her paycheck. The native app has an option to eDeposit that the website doesn't have.

I don't know, but I believe the image of the check, for performance reasons, would have to have the program reduce the image's file size before sending it to the server. I did about two minutes of searching on Google and found HTML5 photo upload and tested it on my phone and it was able to reduce the file size of an image on my phone. I know the code is a jQuery plugin and jQuery might not be used on a mobile website, but I'm sure with a little more looking I could find code that will scale an image or rewrite the plugin so that it doesn't require jQuery. This is by no means an exhaustive test as I only tested the web application on my personal phone. This tells me that the eDeposit feature could be added to the website.

From a company's point of view, I would think that it would be less expensive to provide a mobile website solution instead of a native app. Look at the credit union app, with the exception of eDeposit, it is the same. Your app programmer would have to know iOS, object C, Android, Pascal, Firefox OS, and every mobile operating system's language of choice. Most likely this would not be one person, but multiple people. As a company, to what platforms do you provide an app, iOS, Android, Windows, Blackberry, …?

Now I'm beginning to think that the only reason for downloading an app is because the website hasn't been programmed with features in the app or been made responsive. What do you think?

At a previous job I had a project where I needed to retrieve data from YouTube and Vimeo. While YouTube always returns data even with an invalid video id, the Vimeo script element returns a 404 Not Found error on an invalid video ID. The jQuery version of JSONP does not support error handling and I needed to tell the user that an error had occured.

JSONP is a method of getting cross domain data using the browser by injecting a script element that points to a cross domain source and passing in the URL query string the name of a callback function. The script element calls the callback function with the passed data as the function argument. You could make a call like:

http://tanny.ica.com/ICA/TKO/test.nsf/jsondoc.js?unid=B933790B1DC265ED8025725800728CC5&callback=dir.showDoc

Which would return:

dir.showDoc({
    "firstname":"Adam",
    "middleinitial":"",
    "lastname":"Aaron",
    "fullname":Adam Aaron/ROCKALL,
    "shortname":"AAaron",
    "unid":"B933790B1DC265ED8025725800728CC5"
});

Continue Reading "JSONP with Error Checking..."

Welcome to Sky, a design I've been working on and off on since May 2013. I was let go last week because of cost cutting from my job and decided that I needed to get serious about completing the design since I view my web site as my business card. I'm using the original sky graphic from the first version of my web site, artifacts and all as a tribute to my original design.

After looking at Jeffrey Zeldman's efforts on his design where he went to a single column, I thought I'd try that too. In my case though the font size and width increase for large monitors, tablets, and phones. That's if the media queries work correctly. Since the design is single column I decided not to do a specific design for mobile devices, other than increasing the font size. That means that there isn't a meta element for mobile. We'll see how that works out. I also decided to not do a print style sheet for the first time since 2003. I hope the website is readable and easy to use with a unified experience on all devices.

One of the items I struggled with was search, since I believe search is important for a website. I didn't want a large search field in the header. In this case I'm using the focus pseudo class to expand the search field. Otherwise the search field looks like a flat button.

When creating a comment you now have the ability to use strike through and block quotes in addition to bold, italic, and create a URL.

I have a couple of javascript articles in the queue and hope to publish them soon.

On 27 Nov 2012 what should appear in Google Reader but a post called Hyphenation works! by PPK. I'm trying a little experiment here in that I set text-align: justify and turned on hyphenation. It's pretty easy, you tell the browser which language to use with a lang attribute. I'm declaring the language on the html element.

<html lang="en">

Next you add the CSS.

text-align: justify; /* optional */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;

I believe hyphenation makes justified text work on the web. Tell me what you think.

Update: After seeing that Chrome does not support hyphenation, I removed text-align: justify so that text is easier to read in Chrome. At least until Chrome supports hyphenation.

In this day, it is hard to believe that there are still sites that only work with IE. It doesn't really look like they want people to look at their claim information.

When I tried to access the site with IE 8 the site said that it couldn't validate my information. The reason is because my last name contains an apostrophe. The system does not allow apostrophes in a last name. An apostrophe is a valid name character!

In 2007 I wrote a self contained AJAX object that supports asynchronous and synchronous access with PUT and GET methods, text and XML and XSL tranforms. The impetous for making certain methods of the object self optimizing came from an blog post by Peter-Paul Koch on @media Ajax 2007 Day 2. The example used by Dan Webb is the following addEvent function.

function addEvent(obj, evt, fn) {
    if (document.addEventListener) {
        addEvent = function (obj, evt, fn) {
            obj.addEventListener(evt, fn, false);
        }
    } else if (document.attachEvent) {
        addEvent = function (obj, evt, fn) {
            obj.attachEvent('on' + evt, fn);
        }
    }
    addEvent(obj, evt, fn);
}

Rewriting a function at runtime is a wonderful way to avoid object detection and improve performance. From Peter-Paul Koch's blog post:

Basically, what happens is that the first time addEvent is called, the function determines whether the browser supports addEventListener or attachEvent. It then rewrites itself to a new function that uses the detected method to add the event. As a result, we only have to do the object detection once, which is much more elegant than doing it every time.

I realized that an AJAX object was a perfect place to use runtime function optimization. Consider the following createXMLHTTPObject function.

Continue Reading "Self Optimizing AJAX Object..."

A List Apart is taking another survey.

Calling all designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites. It is time once again to pool our information so as to begin sketching a true picture of the way our profession is practiced worldwide.

Take a few minutes and take the survey.

In Robert Nyman's post Conditional Compilation in JavaScript he noted that “Unfortunately, JSMin removes conditional compilation comments, but I believe this is due to not having been updated in a while, and not up to speed with modern web development practices”. So I took that on as a project. I took Franck Marcia's javascript implementation of JS Minifier and modified the javascript code to not take out Microsoft javascript conditional comments.

Continue Reading "JSMin and JavaScript Conditional Comments..."

Update: 2009 Jan 22 - Added link to dirlookup.css.

Around December 2006 I read a tip on Julian Robichaux's site about Google Suggest-type Lookups In Notes code he had written. I downloaded the code and thought that I could make a few improvements. I changed the code to:

• Use Object Literal Notation.
• Added highlighting/auto complete support.
• Changed to code to dynamically create script elements for data instead of using the XML HTTP request object. Using script files gets rid of cross domain scripting security issues.
• Supports multiple input fields instead of one field.
• Supports the ($VIMPeopleAndGroups), ($VIMGroups) and ("Servers") views in addition to the ($VIMPeople) view.

I'm sorry it's taken a year and a half to publish.

Continue Reading "Domino Directory Type Ahead..."

Update: 2014 March 19 - domReady version II has been created that provides a streamlined domReady function.

For those of you that don't know what the DOMContentLoaded event can do for you, here's a brief description.

The DOMContentLoaded event allows you to add behavior or change the HTML of a page after the HTML has loaded and before the onload event which happens after the complete page, including images has loaded. This allows you to add menu, tree behavior, AJAX functionality or anything else without having to wait for all items on a page to load. You may have experienced the need for a DOMContentLoaded event on a page that includes drop down menus or a tabbed interface which doesn't work until all images have loaded. Using the DOMContentLoaded event allows you to add the behavior before images and objects have loaded.

When I originally added the DOMContentLoaded event handler to Dean Edwards' addEvent function, I wanted it to be just another addEvent type. Since then I've changed my mind and created a domReady() function. By separating domReady in its own module, it can used with most frameworks.

Continue Reading "DOMContentLoaded for Browsers, Part V..."

Back in August 2007, Jake Howlett introduced a Web Session class for Domino Agents. I liked it a lot and saw the potential for reducing the amount of time to create web query open, web query save and web agents. I write a lot of web agents and often need to get query string, cookie and even form data. These items were missing from Jake's Web Session class. Also, the Web Session class required the programmer to instantiate the class when you wanted to use it. I thought that if you include the class in your agent you will want to use it. With that in mind, the Initialize function in the script library now instantiates a global web variable. I've added methods to get query string, cookie and form data items. With the advice of a co-worker I also protected the class variables by making them private and adding get methods for each variable. The only variables that I couldn't do this with were the lists that store query, cookie and form data information.

Continue Reading "WebSession Agent Class..."

Update: 2014 March 19 - domReady version II has been created that provides a streamlined domReady function.

Update: 2008 June 13 - DOMContentLoaded for Browsers, Part V has been created that provides a domReady function without the overhead of the Dean Edwards' events code. If you're a prototype user you should check out Prototype JavaScript framework: document.observe which in version 1.6.0 gives you a dom:loaded event. If you don't have 1.6.0 or above of prototype or don't like their solution, check out domready.js in DOMContentLoaded for Browsers, Part V.

Update: 2008 Feb 14 - Added support for Vista 64 per Goran Miskovic's comment.

For those of you that don't know what the DOMContentLoaded event can do for you, here's a brief description.

The DOMContentLoaded event allows you to add behavior or change the HTML of a page after the HTML has loaded and before the onload event which happens after the complete page, including images has loaded. This allows you to add menu, tree behavior, AJAX functionality or anything else without having to wait for all items on a page to load. You may have experienced the need for a DOMContentLoaded event on a page that includes drop down menus or a tabbed interface which doesn't work until all images have loaded. Using the DOMContentLoaded event allows you to add the behavior before images and objects have loaded.

When I originally added the DOMContentLoaded event handler to Dean Edwards' addEvent function, I didn't provide a way to handle calls to it after the DOMContentLoaded event handler ran. If a developer called addEvent(window, "DOMContentLoaded", myFunction) after the DOMConentLoaded event ran, the passed function would never run. This version fixes the problem so that even if you call addEvent for the DOMContentLoaded event and the DOMContentLoaded event handler has already run, it will run your function.

The previous addDOMLoadEvent function would simply add the passed function to an array of functions which would be handled by the DOMContentLoadedInit function on the DOMConentLoaded event.

Continue Reading "DOMContentLoaded for Browsers, Part IV..."

Update: 2014 March 19 - domReady version II has been created that provides a streamlined domReady function.

Update: 2008 June 13 - DOMContentLoaded for Browsers, Part V has been created that provides a domReady function without the overhead of the Dean Edwards' events code. If you're a prototype user you should check out Prototype JavaScript framework: document.observe which in version 1.6.0 gives you a dom:loaded event. If you don't have 1.6.0 or above of prototype or don't like their solution, check out domready.js in DOMContentLoaded for Browsers, Part V.

Update: 2007 Oct 25 - DOMContentLoaded Event for Browsers, Part IV has been created that adds a fix for calling DOMContentLoaded after the DOMContentLoaded event has occurred. Please check it out.

The DOMContentLoaded event allows you to add behavior or change the HTML of a page after the HTML has loaded and before the onload event which happens after the complete page, including images has loaded. This allows you to add menu, tree behavior, AJAX functionality or anything else without having to wait for all items on a page to load. You may have experienced the need for a DOMContentLoaded event on a page that includes drop down menus or a tabbed interface which doesn't work until all images have loaded. Using the DOMContentLoaded event allows you to add the behavior before images and objects have loaded.

Continue Reading "DOMContentLoaded for Browsers, Part III..."

I've noticed that text becomes difficult to read when I apply opacity or a drop shadow using a filter in IE7. Here's an image of a menu without opacity applied in IE7.

Notice that because of clear type, the text is nicely rounded and readable. Here's an image of the same menu with opacity applied in IE7.

You can see that the text is pixilated and less easy to read. It seems that if an opacity filter is applied to an element, the element's text is not displayed using clear type, even if the OS is set to use clear type. Here's an image of a div with a drop shadow applied.

The OS is set to use clear type and has been tuned. Firefox on the left uses the OS settings to display the text, yet with IE7 on the right, the the text is very hard to read. IE6 with all its problems at least doesn't mess up text when a filter is applied to an element. I have an open ticket with Microsoft and the support person sent me an email message that told me the way to fix the problem is to not use the drop shadow filter. I don't believe that's a good solution. Has anyone else had problems with filters in IE7?

Welcome to Ocean, a design I've been working on for about a month. I started out by going to Layout Gala for the structure. I chose a design with two columns on the right and a content column on the left.

Continue Reading "It's Ocean a Redesign..."

Update 18 Aug 2008: Added an openTabOfElement method and now check for the hash of the url and open the tab that contains the hash item. Try opening the Contact tab. This also works for form validation routines when you want to set focus back to a field that contains an error. If the tab is closed you will get an error. To open the tab pass the element to the tabs.openTabOfElement method before setting focus to the form element.

I liked the tabs created in Sliding Doors of CSS, Part II by Douglas Bowman. Please read the article so that you will understand how to modify the CSS of the tabs. The tabs are very nice for site navigation, but I wanted to use it in a tabbed interface within a page so that a user could click on each tab without reloading the page. First I started with the markup for the tabs.

Continue Reading "Tabbed Interface..."

Update: I'm now using xmlDocument instead of the div since the div does not support XSL transforms. You can find the new code with sample usage at the end at xmlreq.js

When I upgraded Firefox (I don't remember which version), the call I was using to XMLHttpRequest stopped working. I would get a "Permission denied to call method XMLDocument.getElementsByTagName" error when accessing the XML document. Yet, it worked in IE. The problem might be that I'm using a synchronous call instead of an asynchronous call. I have to use a syncronous call because the call is made from the onsubmit event handler. I have to wait for an answser so that I can continue checking the form or return a false to stop the submit. Or maybe it's that the javascript file is in a different directory. All I know is that is stopped working.

A few days ago I looked at the problem. I don't remember where I got the code I had modified to use a synchronous call. Here is the code I was using.

Continue Reading "XMLHttpRequest Permission Denied Error..."

Update 18 Apr 2007 - Added Radix parameter to each instance of parseInt() pre John's comment.

Here it is, all 468 lines of code to create a dropdown list time parser combo box for the web. I don't have much time to document, so here's what you need to use it.

Continue Reading "Time Parser/Dropdown Combo..."

My grandma Ethel contracted breast cancer in the 1970's. She decided that she wanted to use natural healing methods to cure the cancer and went to Mexico to get Laitril treatments. When she finally came home it was too late because the cancer had spread throughout her body. I visited her three weeks before she died. She faded in and out of consciousness while I talked with her. The problem is that she could have lived longer if she had surgery instead of going to Mexico.

With that in mind, I'm taking Natalie Jost's encouragement to go Pink for October. In October this site will be very pink. I decided that I wanted to retain the current theme, but change the color to pink.

Continue Reading "Pink for October 2006..."

I've been to a few sites lately that have live comment preview and found that it helped me write better comments. These implementations use a textarea element to input your comment and displayed an HTML comment below the textarea element. Not as nice as a full WYSIWYG editor, but much lighter in weight and easier to implement in a wide variety of browsers. With that in mind I thought that it would be a good idea to implement live comment preview on my site.

The first thing I did is determined what DominoBlog, my blogging system does with a comment. I found out that it converts < symbols to &lt;, > symbols to &gt;, [b] into <b>, [/b] to </b>, [i] to <i>, [/i] to </i> and anything that starts with http:// to { Link } with the word link an href to the URL. When parsing the URL, DominoBlog looks for a space character or the end of the line to determine the end of the URL. Each line is turned into a paragraph.

Continue Reading "Live Comment Preview Added..."

Update 15 Sep 2006: Added check to see if target element is contained in the li before removing the sfhover class to avoid flickering over select elements with a size greater then one.

I've modified iehover-fix.js to use DOM methods to create the iframe shim instead of innerHTML. When using innerHTML the iframe, menus and sub menus were added, which in cases with a large menu tree could take some time. I usually use innerHTML to add a number of elements to the DOM because it is faster. In this case using DOM methods should improve performance since we are only adding one element for each dropdown or flyout menu and not recreating the menu list. I've also added code suggested by Alistair Potts that should work with https pages.

Continue Reading "Select tag overlap in IE, Part III..."

Update: 2014 March 19 - domReady version II has been created that provides a streamlined domReady function.

Update: 2008 June 13 - DOMContentLoaded for Browsers, Part V has been created that provides a domReady function without the overhead of the Dean Edwards' events code. If you're a prototype user you should check out Prototype JavaScript framework: document.observe which in version 1.6.0 gives you a dom:loaded event. If you don't have 1.6.0 or above of prototype or don't like their solution, check out domready.js in DOMContentLoaded for Browsers, Part V.

Update: 2006 Jul 10 - Fixed Firefox 2.0 problem and added ability to add a custom content ready function, DOMContentLoaded for Browsers, Part III

Update: 2006 Nov 28 - Changed code to support IE and https.

Update: 2006 Nov 21 - Added code to support IE and https.

Update: 2006 Jul 4 - Added Safari and KHTML specific code to load DOMContentLoaded events.

Update: 2006 Jun 26 - Code works in Opera 9. Now you can speed up onload events in most grade A browsers by using DOMContentLoaded/ContentReady events.

Dean Edwards has done it again. Thanks to work done by Matthias Miller, Dean has written a solution that removes the requirement of an external JavaScript file for Internet Explorer. My previous article, DOMContentLoaded for Browsers, used two external JavaScript files, ie_domload.js and events.js file to add DOMContentLoaded events. After adding Dean's new code to allow events.js to run the DOMContentLoadedInit function without an external JavaScript file for IE, I cleaned up the code that calls the DOMContentLoadedInit function to allow for browsers that will, or have added the DOMContentLoaded event. I believe that Opera 9 has added the DOMContentLoaded event. If anyone could test the sample page Opera 9, I would appreciate it.

Continue Reading "DOMContentLoaded for Browsers, Part II..."

Update: Added conditional comment so that IE 7 is bypassed.

Only ten months late, but here is how to use iehover-fix.js. First a little history. Some have used the Suckerfish dropdowns menu written at A LIST apart way back in November 07, 2003. The dropdowns work great until select elements (dropdown list boxes) are added to a form. The menus go under the select elements when viewed in IE. Several years ago I found a fix for this problem and wrote about it in my Select tag overlap in IE article. Since then things have changed and multi-nested menus are now supported which you can read about in the excellent Son of Suckerfish Dropdowns article written by Patrick Griffiths and Dan Webb.

Using the iframe technique, Ilya I. Gerasimenko wrote the Cascading Menu: Vertical (IE <select> bug fix) solution. The only problem is that it didn't work with the Son of Suckerfish Dropdowns and didn't take IE 5.0 into account. IE 5.0 doesn't support the iframe method.

Taking Ilya's solution, I modified iehover-fix.js to support IE 5.0 and Son of Suckerfish Dropdowns.

Continue Reading "Select tag overlap in IE, Part II..."

Update: 2014 March 19 - domReady version II has been created that provides a streamlined domReady function.

Update: 2008 June 13 - DOMContentLoaded for Browsers, Part V has been created that provides a domReady function without the overhead of the Dean Edwards' events code. If you're a prototype user you should check out Prototype JavaScript framework: document.observe which in version 1.6.0 gives you a dom:loaded event. If you don't have 1.6.0 or above of prototype or don't like their solution, check out domready.js in DOMContentLoaded for Browsers, Part V.

Update: 2006 June 22 - DOMContentLoaded Event for Browsers, Part II has been created that doesn't require the ie_domload.js external JavaScript file. Please check it out.

After learning of the DOMContentLoaded event in Mozilla browsers I knew it had to be added for other browsers. I wanted to add behavior to pages after the DOM had loaded and before the onload event. Some pages have images that take a long time to load, a DOMContentLoaded event allows a developer to add behavior after the DOM has loaded but before images have loaded.

Continue Reading "DOMContentLoaded Event for Browsers..."

Notice in the example page for the calendar popup that when using Microsoft Internet Explorer 5.5 and above, the calendar does not go under the drop down list but goes over the drop down list.

If you look at Lea Smart's calendar popup, which is what I used as a basis for the Calendar popup, the calendar goes under the drop down list when using IE.

All you have to do to make an element go over instead of under a select element in IE is add an iframe in the containing element, absolute positioned, the same size as your element with a z-index less than your element.

Check out the code in calpopup.js to see how it works.

As promised in my Date input and calendar popup article, here are instructions.

In the head section of your page add the following lines.

<link type="text/css" href="calpopup.css" media="screen" rel="stylesheet">
<type="text/javascript"script src="events.js"></script>
<type="text/javascript"script src="calpopup.js"></script>
<type="text/javascript"script src="dateparse.js"></script>
<script type="text/javascript">
// Optionally change the date format.
//	g_Calendar.setDateFormat('dd-mm-yyyy');
</script>

Because of a Safari bug with onclick events in elements that are created using createElement and insertBefore DOM methods, if you want this to work in Safari, add the following div right after the body tag. It does not affect other browsers to add this here, it just means that you have to add HTML to your page that should be created with javascript.

<body>
<div id="calcontainer"></div>

Add an input field to your form with a class of "dateparse".

<input type="text" size="10" id="dateField" class="dateparse">

Add a button or an image with an onclick event to access the calendar popup.

<a href="javascript:void(0);" 
	onclick="g_Calendar.show(event, 'dateField')" 
	title="Show popup calendar">
	<img src="calendar.gif" 
		class="cp_img" 
		alt="Open popup calendar">
</a>

The only required items for the show method are event and the id of the date input field.

Here's the sample date parser and calendar popup.

Update: 3 May 2006 Forgot to check for mdyyyy when parsing a date from an input field. Fixed now.

Update: 22 Jul 2006 Added ability to set the drop down year menu to any start at any year.

Update: 3 Aug 2006 Added instructions on how to make click events work in Safari.

When researching adding next day of week to the date parser I had trouble with the ambiguity of the word next. I consulted a friend who is a college English professor and here's the result.

last <day of week>

The closest day previous to yesterday. If today is Wednesday, last Tuesday would not be yesterday but eight days ago. Last Monday would be two days ago.

this <day of week>

The closest day following today. It could be said that this is equal to this coming. If today is Wednesday, this Tuesday would be the six days from today and this Thursday would be tomorrow.

next <day of week>

The day of the week in the week following this week, but not tomorrow. If today is Saturday, next Sunday would not be tomorrow but eight days from today. If today is Wednesday, next Thursday would not be in this week but in next week which would be eight days from today.

I have created a date input and javascript calendar popup. First, I modified Simon Willison's A better way of entering dates to fix a few bugs and to allow more date output formats. If you don't have the message div, date-parse will display an alert instead of throwing an error.

I've also heavily modified Lea Smart's calendar popup so that it doesn't use document.write and adds the calendar container to the body element instead of the head element. While I was at it I cleaned up the html code that is used for the calendar.

Here's the combined sample.

If you want to change the output format of the date parser, change the global dp_dateFormat variable to:

• dd/mmm/yyyy
• dd-mmm-yyyy
• dd mmm yyyy
• d/mmm/yyyy
• d-mmm-yyyy
• d mmm yyyy
• dd/mm/yyyy
• dd-mm-yyyy
• dd mm yyyy
• d/mm/yyyy
• d-mm-yyyy
• d mm yyyy
• mm/dd/yyyy
• mm-dd-yyyy
• mm dd yyyy
• m/dd/yyyy
• m-dd-yyyy
• m dd yyyy
• m/d/yyyy
• m-d-yyyy
• m d yyyy
• yyyy-mm-dd

The default format is m/d/yyyy. The code has been modified to allow date entry in dmy format for formatting strings that start with a "d". You can find the source files at:

• caldown.gif - left arrow image for calendar popup
• calendar.gif - calendar button
• calpopup.css
• calpopup.htm - example page for calendar popup
• calpopup.js
• calup.gif - right arrow image for calendar popup
• dateparse.js
• date-parser.htm - example page with combined input field date parser and calendar popup
• events.js - addEvent() that supports DOMContentLoaded that adds the date parsing behavior to the date input field.

For now you'll have to look at the example pages for the syntax.

Update: fixed a few bugs.

• Added click event to calendar container that stops the click event from bubbling.
• Added logic to close the month and year menus.
• Changed logic that calculates to see if the calendar will drop below the bottom of the screen.
• Changed page onclick handler to not calculate if the user clicked the mouse on the calendar. It now closes the calendar only since the calendar traps mouse click events and stops the click event at the calendar.
• Removed preload images since images are called from the CSS.

Update:

• Added setDateFormat() method.
• Syncronized calendar date format with date parser date format.

Update: 31 Mar 2006 - Fixed problem with date input if the month you were entering the had more days then the month you entered. The resulting date would be one month after the date you input. If you entered 1 Feb 2006 you would get 1 Mar 2006. It is now fixed, many thanks to ML for finding the problem.

Update: 22 Jul 2006

• Added holiday and day of week blockout masking. See source of date-parser.htm for an example of how to use holiday and day masking.
• Added an addEvent() call to add date parsing behavior to an input field with a class of "dateparse"
• Added the ability to set the start date of the drop down year menu.

Update: 31 Aug 2006

• Changed getFirstDOM function to set the day to 1 first then set the month and finally the year. This fixed a problem with the current day moving the month up to the next month and return the wrong first day of the month.

Update: 10 Sep 2006

• Changed table footer of calendar popup to display "Today is: Month Day, Year" or "Today is: Day Month Year" depending on the date format, with the date as a link.
• Changed title text of footer link from "Go to today's date" to "Go to current month".
• Modified calpopup.css to set the width of the footer td so that IE would not word wrap the text.

I arrived at work today and as I was walking by a cubicle I found a gift from Microsoft

The basket included the following software:

• Windows^XP Professional with Service Pack 2
• Microsoft Digital Image Suite¹⁰
• Microsoft Money Premium 2005
• Plus! Superpack
• Office Professional 2003
• Encarta 2005 Deluxe

The basket also included the following books:

• Windows XP Inside Out
• Office XP Step by Step

Why don't other companies like IBM do things like this? For instance, the company I work for wanted replace our custom built employee portal and asked several companies for help testing their products. When the person in charge told Microsoft that they'd like to try Sharepoint, Microsoft said, "sure, we'll send out two people to help you set it up." However when IBM was approached we were told that it would take three months to setup Websphere Portal Server and cost us a million dollars! All we wanted was a proof of concept so that we could make an informed decision!

When we originally looked at Blackberrys we did not have coverage at the building were I worked. We said "give us coverage and we'll take a look at them", they said, "buy 400 and we'll give you coverage." We did not purchase any Blackberrys until years later, when we had coverage. If we had been given coverage in the first place without the requirement to purchase we most likely would have purchased earlier.

UPDATE: I found out that Microsoft gave the basket to us to give to the Red Cross as a raffle. Still very nice of them. I really believe that Microsoft has marketing to large corporations down. I think that the position is, if they give me products to try out and I like a product then I will recommend it to others and they will purchase the product. Over my lifetime in the company I work for I have received many products to test and of course I have only recommended products that I found to be usefull, after all it is my reputation on the line. If companies had never given or lent me products in the first place it may never have found a voice to promote them in the company.

Update: I have a new article that supports nested menus with instructions on use at Select tag overlap in IE, Part II. Please go to the new article as it give you information that is not available in this article.

Sometime ago I was asked if I knew of an IE fix to hide select elements when postitioning other elements over them.

Does anybody know of any javascript that will disable or hide the select element tag?

The problem only occurs in IE when the dropdown menu overlaps a select tag in form. It appears that nother will override the z-index of the select tag in IE exept to hide it.

This is a problem with IE in that select elements do not honor the z-index and will display over any other position element, like a dropdown menu. You can eliminate the problem by inserting an iframe shim underneath the drop down. It's not an original idea, I don't know where I found the solution. I modified the suckerfish drop downs javascript file to add an iframe shim. Unfortunately IE 5.0 does not support this method, so I simply hide select elements when using IE 5.0.

You can download it at topnav.js and see a sample with opacity of a single drop down menu here and a cascading vertical menu solution written by another author here.

UPDATE: The unknown author is Ilya I. Gerasimenko and a few fine sandbox experiments can be found at DOM Studies.

UPDATE: You see a temporary sample with opacity of a single drop down menu here.

SimpleQuiz › Part XV: Numbered List Pairs

I like answer "C" for the reasons stated so eloquently by sgd in comment 25. What do you think?

Last night I was talking with my good friend and brother in the Lord, Eric Mack. He liked what I had done for both his and this site and wondered if I could do a proof of concept for one of his clients, David Allen. After working into the night with a lot of testing, Eric and I had a prototype up and running. I added comments to the template, and a lot of CSS to control the content management portion of the Blog. I'm very happy with the result. Well, as always there are a few more things that could be done, but over all I'm pretty happy with the site.

Eric and I tested all the links, one of which is a link to Buzz Bruggeman's Blog. Buzz looked at his Blog's referer log and discovered the URL to the Blog we were working on for David Allen. Buzz made a post, Robert Scoble made a post, and now the David Allen Blog is live! The last time I looked, in a few short hours there had been 1038 hits!

If you have a Domino environment, I really suggest that you use Steve Castledine's DominoBlog database template. It is very easy to use and allows the developer a lot of latitude in creating the look and feel of your blog.

I have been helping my good friend Eric Mack with his blog over the last few days. Like my blog, Eric's blog uses the ProjectDX Domino database created by Steve Castledine and used by Ed Brill.

Unlike the design used on this blog, which is elastic based on the text size (IE users can change the text size by selecting the menu item View, then Text size), Eric's blog is based on a fixed design. An elastic design helps the designer keep an optimum line length for easier reading and better comprehension.

We actually did the design last year and it was one of the first Web Standards designs that I helped create. At first we got it working with IE (which I no longer do, I try Mozilla Firefox first, then make it work in IE), then we have attempted to make it work across other browsers. Safari is still problematic and I don't even want to test it in IE Mac which has so many float bugs its almost impossible to create a good Web Standards/CSS design. It seems to work pretty good in IE 5.01, 5.5, 6.0 and Mozilla.

Eric and I also worked on a print style sheet. If you look at this blog in Print Preview you will see that the navigation on the side and bottom are gone and the two background images used on the page are also gone. However even though I've turned off letter-spacing, IE still carries it over from the screen style sheet to the print style sheet. :( We were running out of time when I decided to create a print style sheet for Eric and I really should have done it as a standalone style sheet like I did with my blog. It really does work better this way. As it is the main style sheet works with all media and the print style sheet tries to turn things off.

I'm pretty happy with the design and more importantly Eric likes it too.

I'm committed to Web Standards, though sometimes it can be frustrating to create a reliable layout. Tables make it so easy but I really like the benefits of Web Standards.

• Structural HTML
• Smaller file sizes
• Ease of design change through CSS
• Flexiblity

However it is very difficult to create a page that follows Web Standards when the Domino template I'm using doesn't support it. I really believe that Web Standards is the future for Web Designers. See CSS Zen Garden

While developing a project I needed to test using different versions of IE. It was difficult finding computers with older versions of IE on them to use for testing. I went to friends and a few old boxes but I was never able to test with IE 5.01. After reading an article at Chicago Web Design, I found a way to install different versions of IE on the same PC and run them concurrently. Here's a screen shot of IE 5, 5.5, and 6 running concurrently on one PC. You can tell that it is running each idividual version of IE because there are specific CSS bugs that only each version of the browser will render.

This seems like it would be a great tool for a developer to validate that a Web project works with specific versions of IE. Ryan Parman has created downloadable files with just the files needed to create multiple versions of IE. Just download the zip files. This site also has some very good information on the process. I created a directory called "ieold" and extracted the zip files into it. The zip files created an IE501SP2_NT and an IE555SP2_NT directory. Just run IEXPLORE.EXE in each directory and you get the respective versions. There are some caveats, so read the whole article.

It works great! I'm now able to test new code with older versions of IE on one PC. If you're brave, it looks like you can even run IE 3.0 and 4.01.

Well here is my first entry. I really don't have anything to talk about, I just needed an entry to help me design this site.

Continue Reading "First test entry..."