jQuery UI is an amazing product. It’s not because it offers the best features, or that it offers the best solution, it’s that it offers a large degree of support for years to come. Which is saying a lot for something that is nothing more than JavaScript. It’s certainly something that many enterprises have begun to look at and look for in the development world. At my job at Coventry Healthcare, I’m responsible for the User Interfaces and generally the User Experience across some very highly visible web applications. One of the most recent developments in our line of business is the risk of not having an accessible site (we fall under Section 508 guidelines because of our Medicare/Medicaid users). jQuery UI has literally allowed me to very easily create and maintain large amounts of code so that I can spend more time making sure that it follows WCAG 2.0 and WARIA (which should cover us for S508).

So recently I discovered a very nasty bug dealing with jQuery UI dialog (withe modal:true) widgets that seems to only occur in Internet Explorer. It goes like this: If you are using a dialog with a screen reader, your main mode of navigation is with the keyboard. This is typically driven via the focus on elements. In jQuery, focus is demanded on the dialog because of the modal command. You are unable to focus on anything other than the dialog and it’s elements. Here’s the issue however, jQuery successfully can keep focus on the dialog in all browsers tested (FF, Safari, Chrome) so that the focus cannot leave the dialog. However in Internet Explorer (6, 7 and 8 ) your focus can get to the address bar, simply by tabbing to it. Once in the address bar, jQuery is no longer able to track and handle the focus, so inevitable, after tabbing through the menu, focus come back to the window. But instead of going to the dialog, it goes to the first element that can be tabbed to, which is undoubtedly BEHIND the modal dialog. jQuery, subsequently locks the tabbing at this point, most likely because you have focus on and element that is unable to be focused (in jQuery’s dialog algorithm).

So I cannot have this as that would literally cut 75% of my users from being able to use just a keyboard with the sites I’m maintaining. So I had to find a solution. First, IE seems to be the only browser with this issue and it has something to do with the fact that the focus moves out of the DOM’s control (out of jQuery’s control). But the focus would always at least get back to the first element that could be tabbed to, and then lock. So I devised a plan. What if the first element, when focused, looks for an open dialog and if it is there, focuses on that dialog? So I tried it out, like this.

$(document).ready(function() {
    $(":tabbable:first").focus(function() {
           $(".ui-dialog:visible:last :tabbable:first").focus();
    })
});

Amazingly enough, this is the exact solution to the issue. This is how it reads.

1. On page load
2. Get the first element that can be tabbed to in the body
3. When this element gains focus, check for a visible dialog
4. Take the visible dialog that is last (the last one drawn in the html) and get the first element that can be tabbed in it
5. give focus to that first element.

Now, in IE, when focus returns to the document, it goes to the dialog box, specifically, the close icon on the dialog box, thereby not breaking the fact that there a modal open on the page.

Now, there are some issues with this.  For one, the code is just assuming that the last dialog in the html that is visible is the one that is to be focused on.  Quite frankly, that’s what I need it for, as I try not to overlay dialogs, and when it do, the newest one is normally always on top.  However, there are times where you may swap between two dialogs, and the one that is on top is not the last dialog in the html, you would still have this issue in this case.  But for probably the other 95% of the cases, this is a clean and easy way to ‘fix’ the accessibility issue in IE with jQuery UI dialog modals.

Many web developers ask ‘what is usability?’.  This is one of those topics that I can explain, but it may be easier to demonstrate. My this experiences have led to some principles; one of them is that if I’m going to build it, it must be usable.   Unfortunately, many sites that I like, that tout usability, screw up one important concept that annoys me greatly.

I ask myself, “when using a menu, why do I have to drag my mouse from one button to the next, and fear losing the menu if I cross it’s border anywhere?”  Some menus are just annoying because they disappear mid mouse move, some are extremely hard to use because of several layers of menus, some I have resorted to using `tabs` to get to the correct menu item.  It’s unfortunate that people can’t get this right.

I have a simple fix that hopefully sharing it will help others. It’s basically a menu that buffers the time you are hovering, that way if you mistakenly move your mouse into the wrong area, you have a brief period of time to correct yourself.

Start with the HTML code:

<ul id="menu">
	<li class="nav"><a><span>ONE</span></a>
	<ul>
		<li><a><span>one</span></a></li>
		<li><a><span>two</span></a></li>
		<li><a><span>three</span></a></li>
		<li><a><span>four</span></a></li>
	</ul>
	</li>
	<li><a><span>TWO</span></a></li>
	<li class="nav"><a><span>THREE</span></a>
	<ul>
		<li><a><span>one</span></a></li>
		<li><a><span>two</span></a></li>
		<li><a><span>three</span></a></li>
		<li><a><span>four</span></a></li>
	</ul>
	</li>
	<li class="nav"><a><span>FOUR</span></a>
	<ul>
		<li><a><span>one</span></a></li>
		<li><a><span>two</span></a></li>
		<li><a><span>three</span></a></li>
		<li><a><span>four</span></a></li>
	</ul>
	</li>
</ul>

The menu is a simple list within a list. There are essentially only four main list items; ONE, TWO, THREE and FOUR. Each of this list items has their own list of list items generically named one, two, three and four. I personally stick with lists as my menu’s of choice because they degrade gracefully in case of CSS/JavaScript issues.

This list by itself isn’t much, in fact it’s not even a menu. CSS will be needed to really make it work correctly.

#menu li {
	list-style:none;
	float:right; /* Makes IE 6,7,8 act like FF */
	position: relative;}
#menu li a {
	display:block;
	width: 160px;
	height:35px;
	margin-top: 5px;}
#menu li a span{
	padding-left:10px;
	line-height:2.8em;
	color: #000000;
	font-weight:700;}
#menu li a:hover {
	font-weight:bold;}

#menu li ul li a:hover span{ color: #222222; }

	#menu li ul {
		margin:0px;
		position:absolute;
		left: 160px;
		top:-90px;}
	#menu li ul li {
		padding:0px;
		border:0px;
		border-collapse:collapse;
		margin:0px;
		height:34px;}
	#menu li ul li a{ margin:0px;padding:0px;border:0px;}
	#menu li ul li a span{
		display:block;
		padding-top:7px;
		font-weight:100;
		line-height:1em;
		font-size: 83%;}

This is some simple CSS that will make the UL/LI lists to really act like lists. Now the only issue is that you need it to act like a list. So the final piece of code to this puzzle is to add some JavaScript. I am using the jQuery library as my choice for creating this script, so it’s necessary to have that package (1.3+) installed for this to work. You can drop this script into the footer element inside of ‘script’ tags so it will run. It will run automatically on page load.

$(document).ready(function() {
	/* Setup the Menu */
	$("#menu > li > ul").hide();

	$("#menu li.nav").hover(
		/* on mouseover */
		function(e) {
			hoverMenu = this;
			if(this == closingMenu) {
				clearTimeout(closeMenu);
				clearTimeout(openMenu);
				$(this).find("ul:first").show("fast");
			} else {
				var newMenuOpen = function() {
					$(hoverMenu).siblings(".nav").find("ul:first").hide();
					$(hoverMenu).find("ul:first").show("fast");
				}
				openMenu = setTimeout(newMenuOpen, 500);
			}

		},
		/* on mouseout */
		function(e) {
			closingMenu = this;
			var closeMenu = function() {
				$(closingMenu).find("ul:first").fadeOut("fast");
			}
			closeMenu = setTimeout(closeMenu, 500);
		}
	);
});

The final product is quite a nice and simple dynamic menu that adds just the right touch of usability. Now, typically, I would never say that a menu with sub menus popping up everywhere is something of a usability menu system, it’s not. But sometimes, a nice menu like this is needed, especially if there is a lot of information and ‘drill downs’ that need to be accessed quickly. In any case, you can see my demo here. Leave some comments if you have any questions, and enjoy! You can also see a fully implemented version at Xcessorries Squared.

While recently using Scribd‘s services, I came across a very nasty bug, and a nice clean fix.  Scribd allows developers to tap into a great, but somewhat basic API.  One of these settings allows a developer to set a default ‘mode’ before the API then builds the flash calls necessary to display the document.  The issue comes up when you choose the ‘slide’ mode as the loading view.  No matter what ‘height’ you set, with ‘auto_size’ set to false, the height will adjust to the wrong height.

You can jump to the code here, or continue.

I started by writing some simple code that follows the API.

scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'height', 800 );
scribd_doc.addParam( 'width', 600 );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

Where ‘flash_catalog’ is the container div of the Scribd PDF.

This however led me to have a height that follows the default rules (width multiplier of 85/110) where the height matches how much space is in the window. So I progressed further with this code.

var oniPaperReady = function(e){
 $("#flash_catalog embed")
.attr("wmode","transparent")
.hide()
.css({"height":"800px", "width":"600px"})
.show();
}

scribd_doc.addEventListener( 'iPaperReady', oniPaperReady );
scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

So now I am dropping in a listener in the API to wait for the document to load. I then hide the ‘embed’ flash information, then add the height and width, then re-show the flash element.

You may notice, I’m using jQuery, in which you can do the same thing with regular JavaScript, although quite a bit more complicated (ask if you really really need that code).

An astute reader would also notice one thing, I’m not adjusting for an ‘object’ tag, only the ‘embed’ tag (the difference for flash between different browsers). I figured out this novice mistake while testing in Internet Explorer. Here’s the finished code, that works, removing the nasty height issue.

var scribd_doc = scribd.Document.getDoc( #######, 'key-*******************' );

var oniPaperReady = function(e){
$("#flash_catalog embed")
.attr("wmode","transparent")
.hide()
.css({"height":"800px", "width":"600px"})
.show();

$("#flash_catalog object")
.attr("wmode","transparent")
.hide()
.css({"height":"800px", "width":"600px"})
.show();
}

scribd_doc.addEventListener( 'iPaperReady', oniPaperReady );
scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

The final word; I’m adding the transparent mode so that I can then have a menu that drops on top of the flash. This works very well!

While working on a dialog in the new jQuery UI 1.6rc6.  I have come accross an issue.

If you were to open a dialog, and then dynamically change the content in the dialog, the shadow border will not resize.  The problem is, the code does not ‘know’ the box is larger, and is not able to watch for the changes.   Their have been some solutions that I have found to solve this, like turning off shadows, etc.  But I think I have a better one, a 3-line solution so to speak
Go into your code, mine is in my jquery-ui-personalized-1.6rc6.js file… Also could be in ui.dialog.js etc.

Inside the code (mine is line 4218) after this function

$.widget("ui.dialog", {

_init: function() {

add this function

refresh: function() {
this._refreshShadow(1);
},

Then from within your code you can call something like this…

$("#dialogbox").dialog("refresh");

Check for updates, I may write a drop-in style patch so the coding isn’t necessary.

Enjoy!

As I start to push more bloggin on my end (Yes, 8 hours of work a day and 3 hours of school at night, two dogs and a lovely wife are just not enough for me to handle),  I am branching out to a site I have had for a while that I haven’t really done much on.

The goal of the site is to host all of the ideas that I have in my head and that will in the end help motivate me to get them done and worked on… if individuals decide to comment on them   I will attempt, at my best, to keep the projects code clean and easy to follow, along with good documentation.

A few may be very helpful to some (jCritic, jSave, jSuite) so as I get them done, I will defitely get them on there with working demos etc.

In the end, enjoy!

I’ve begun putting together an idea for a PHP program that will document JavaScript.  In the general sense, it will need to have a good lexical analyzer because it need to understand the syntax and the buildup and creation of the functions and classes.   I’m going to outline some goals that are needed for me to use a program like this.

Requirements

1. Must be autonomous
2. Must be able to Add/Edit Comments, without having to directly change the source files
3. Must contain revision controls
4. Display of the output must be adaptable easily
5. Must contain an API to access from “afar”

With those five initial setups, I think I will start to build some thought expirements to figure out exactly what I am talking about.  Should I implement SVN into it?  ScriptDoc formats?  JavaScript engine for analyzing?  Lots of different things.

Come back to this post for more info later.  I’m going to search out other programs that implement some of these things to figure out if there are any.

Help appreciated

So the other day I was invited to try out Yahoo! Search Monkey.  If you haven’t heard yet, the Yahoo! Develepors Team is looking to set Yahoo! at the cutting edge of the current level of Internet Develepment.  They have realeased a preview (think private beta) testing of SearchMonkey which is the first step to making Yahoo! entirely Web 3.0 (buzzword: sharing social information accross websites, using the internet as a development platform itself).

After loggin in you are given three categories to get started with.  Presentation Applications, Custom Data Services, and Data Feeds.  The first is pretty much defining what you want th individual to see when they run a search using your application.  You can pull from up to 10 URL’s after defining what information you are looking to grab.  The second, Custom Data Services, is where you are able to construct your own search engine’ish data path.  You can strip data from pages themselves (think wikipedia) or grab from an API (think facebook).  The last is mainly used for grabbing from RSS feeds and the like.

More to come as I get developing.  I will keep you up to date!

As a developer, I long for two things that rarely ever come together well. This Christmas, I have been able to do just that, and I love it! I am always on the lookout for something that will give me the power of a desktop, but the mobility and function of a tablet computer. Three years ago I had bought a Toshiba m205, which some may know, was one of the first tablet computers to really make a mark on the market. I really enjoyed it, as it was very nice, but it was quickly outdone by the market. It really couldn’t run Vista, and XP Tablet version has never been developed enough to get the full potential from a tablet computer.

IBM has outdone themselves with the x61. The x61 came out about a half a year ago, and this Christmas they had a one week deal that dropped the price down by nearly 50% of the overall Cost. I jumped at the prospect, even though I had decided to wait another 6 months to replace my aging Toshiba. Let me Introduce you to my new computer.

Lenovo X61

• Dual Core Centrino Pro 1.8Ghz with 4Mb Cache
• 3Gb 533Mhz DDRII Ram (Max 4Gb)
• 100Gb 7200rpm Hard Drive with 1Gb Cache for speed boost
• Multi-Touch Monitor (Touchscreen and Stylus)
• Multi-View Monitor (Indoor and Outdoor – full sunlight does not affect viewing enjoyment. ** Max resolution is only 1024 x 768)
• Tablet Mode (monitor swings around and lays flat)
• Vista Business
• Intel 965 Integrated Video with 128Mb dedicated memory
• 3 usb 2.0, Gigabit Lan, Wifi A/B/G/N, SD reader, PCMCIA slot, 1394 Firewire, VGA out, onboard Mic.
• 4-Cell Battery (8-Cell available) @ 2.5 hours of power

So as you can see, this thing flies! It’s a tablet computer that weighs a mere 3.77 lbs with the battery in.

Now to the good stuff, what this is intended to do.

First thing I did was install VMware Workstation 6. This is a virtualization software that will allow me to do what’s next in the list.

Next I downloaded Ubuntu Gutsy 7.10 in live cd Iso format. Then mounted the ISO as a virtual CD drive. Fired up VMware and created a new virtual computer, which was subsequently loaded with Ubuntu.

While in Ubuntu, I then installed Quanta+, Apache, PHP5.2, MySql5, RapidSVN.

Quanta has quickly become my chosen editor when it comes to developing. It’s fast, sublime, pretty and full of features, including auto finishing words you are typing based on a history of the words you have typed. The rest of the LAMP install is too long and also reproduced many times over (check out the forums on http://forums.ubuntu.com for more details if you are interested in this) to repeat here for the 10 Millionth time.

While VMWare is running the Ubuntu machine, that I dedicated 512Mb Ram to, I started network installing Microsoft Office. I really really enjoy using OneNote, which is one of the greatest Tablet Tools that is out there.

After that was all said an done, I know have a mobile computer that packs a serious punch. I am running Vista using OneNote to take notes, Internet Explorer 7, Firefox, Safari and Opera to test web pages, virtualized Ubuntu Gutsy running my editor and Webserver, so no matter where I happen to be, I can easily program and test via a single powerful machine.

Such an amazing combination, I am sure many of you also would consider the same.

Sites need to be able to interact in one single, universal space.

-Tim Berners-Lee

I started this little project because I have a client whom needs to get his 24 page PDF online. The problem is that a 24 page PDF with all the bells and whistles

ends up being over 5mb in size. This causes issues for people running sub-cable internet connections, as the loading time becomes horrendous. So to solve the problem, I am going to run the PDF as a download by choice and have all the links point to the HTML(Hyper-Text Markup Language: what webpages are written in) converted page when they click on what page they want to see. This does however cause problems if something is updated on the PDF, the HTML is not dynamic or binded to the PDF so and update will p align=”left”> have to occur in both places. The only way around that is to have the HTML being the origionating source and have the ‘download as pdf’ link be a call to a server side script that packages the HTML as a PDF. That however is too much for what this client needs and the issues with the updating will have to be taken in stride.

Tools Needed:
RTF or DOC reader (I prefer OpenOffice2.2) that can convert to HTML
A Program designed to convert PDF to DOC format (I used Able2dDoc, licensed)

Unfortunately, In my case, the PDF contained a large amount of tables that were made up by images after conversion. Because of this, I had to handle things a little bit different, in which I will explain later.

First things first, lets convert to HTML

Using the software I used, Able2Doc, if you load up the PDF you can simply convert the file to a DOC format. Notice, not many converters will go straight from PDF to DOC or RTF formats. Once you are able to convert the PDF to DOC or RTF, you can then open up that file into Microsoft Office or Open Office. Both have the ability to Open up these files and then Export them as HTML.

Microsoft Offices’ way of doing things

Office is really simple. Take the document you are in and go to File->Save As->Other

Then after that you can go click and change the type to an HTML Document… put in the name and your done!

Open Offices’ way of doing things
In Open Office, it is actually easier! Just have your document open and then go to File ->Save As and you can then select the HTML from the drop down list. No extra step as there is in Word.

When things get messy…
You have to start to get creative. I know, it stinks, when things just don’t go your way. I mentioned earlier that I my specific issue just could not be settled by this process only because the images in the PDF were making up the tables and the text did not stick inside the image/tables when changed to HTML. I ended having to go with a slightly altered reality, but the end result to the user is near the same.

The idea that I had was to split the PDF into images. This was actually really easy to do. I swapped over to linux for this part (Ubuntu Gutsy). The PDF Reader program has the ability to output to JPG for your PDF’s. This came in very handy, I simply outputted the PDF I was using, 28 pages of it, as JPG’s and then used to Javascript to make a nice little setup for Checking out the picutres.

Javascript Code In the <body> tags :
<script> function PageQuery(q) {if(q.length > 1) this.q = q.substring(1, q.length);else this.q = null;
this.keyValuePairs = new Array();
if(q) {
for(var i=0; i < this.q.split(“&”).length; i++) {
this.keyValuePairs[i] = this.q.split(“&”)[i];
}
}
this.getKeyValuePairs = function() { return this.keyValuePairs; }
this.getValue = function(s) {
for(var j=0; j < this.keyValuePairs.length; j++) {
if(this.keyValuePairs[j].split(“=”)[0] == s)
return this.keyValuePairs[j].split(“=”)[1];
}
return false;
}
this.getParameters = function() {
var a = new Array(this.getLength());
for(var j=0; j < this.keyValuePairs.length; j++) {
a[j] = this.keyValuePairs[j].split(“=”)[0];
}
return a;
}
this.getLength = function() { return this.keyValuePairs.length; }
}
function queryString(key){
var page = new PageQuery(window.location.search);
return unescape(page.getValue(key));
}
function displayItem(key){
if(queryString(key)==’false’)
{
return ’1′;
}else{
return queryString(key);
}
}
</script>

What else?

Once this code is in place, you can see what it is trying to do. You are basically parsing a query address URL and looking for the specific information showing on whatever variable you pass in. This is giving your JavaScript the ability to know what a variable is from a JavaScript /PHP equivalent to the Get variables.

Now you need the code that will change values of a select box, so the complete picture will come into view.

The idea that I had was to split the PDF into images. This was actually really easy to do. I swapped over to Linux for this part (Ubuntu Gutsy). The PDF Reader program has the ability to output to JPG for your PDF’s. This came in very handy, I simply outputted the PDF I was using, 28 pages of it, as JPG’s and then used to JavaScript to make a nice little setup for Checking out the pictures.

<SCRIPT LANGUAGE=”JavaScript”>

 function loadPage(value) {

if(value == “”) {

 document.getElementById(‘mainimage’).src=”img/ProductCatalog/Page1.jpg”;

 } else {

 document.getElementById(‘mainimage’).src=”img/ProductCatalog/Page” + displayItem(‘p’) +”.jpg”;

 }

 }

 function changeImage()

{

 document.getElementById(‘mainimage’).src = document.getElementById(‘list’).options[document.getElementById('list').selectedIndex].value;

 }

function prevImage()

 {

 if(document.getElementById(‘list’).selectedIndex == 0)

 {

 document.getElementById(‘list’).selectedIndex = document.getElementById(‘list’).options.length-1;

 }

 else

 {

 document.getElementById(‘list’).selectedIndex–;

 }

 changeImage();

 }

function nextImage()

 {

 if(document.getElementById(‘list’).selectedIndex == document.getElementById(‘list’).options.length-1)

 {

 document.getElementById(‘list’).selectedIndex = 0;

 }

 else

 {

 document.getElementById(‘list’).selectedIndex++;

 }

 changeImage();

}

</script>

That was pretty much what the JavaScript needed, and then I could handle everything else from HTML which made things much easier. All that is said and done, any Q’s just ask.