Designing with Code: Providing Feedback

As of today, I am hosting the Web Design Resource Center on InformIT. My new column covers object-oriented feedback handling for web applications from a design perspective. The column is focused on Ajax web applications because the object that we create to handle feedback is a JavaScript-based object. The column is called Providing Feedback and features a sample and the source for the object that I cover. Enjoy.

Keeping the Drop-Downs on Top

Have you ever run into a depth problem with drop-down menus in Internet Explorer, everybody's favorite browser "chuckle"? If you have ever built a drop-down menu then I am sure that you have had this issue and it is not an easy issue to work around, until now...

If you have had this issue in the past you have probably found developers using the iframe hack, which renders an invisible iframe below the drop-down menu and brings it to the highest depth level, even above select lists in forms! This is a great solution, although, the solutions that I have found have been elaborate and complicated to implement. Therefore, I have created the method below named addIframe, which simply takes two parameters and renders the iframe for you, allowing much more flexibility from a development standpoint.

function addIframe(id, el)
{

if(document.getElementById(id) == null)
{

var _iframe = document.createElement("iframe");
_iframe.src = 'about:blank';
_iframe.scrolling = 'no';
_iframe.frameborder = '0';
_iframe.id = id;
_iframe.name = id;
_iframe.style.position = 'absolute';

if(el)
{

document.getElementById(el).appendChild(_iframe);

}
else
{

document.body.appendChild(_iframe);

}

}
return document.getElementById(id);

}

The method takes two parameters, the first is a unique id for the iframe that you will be creating. This allows you to later reference the iframe by id in order to move it, resize it, etc. The second parameter is a optional parameter which expects an element id for any element in which you want to append the iframe to, if this parameter does not exist it is simply appended to the document body. After the iframe is created it will be returned and can then be manipulated as I mentioned earlier. This is where you will want to tell it where to go and what size to be. Enjoy...

Tag Editing

I have been using Dreamweaver for years now and I have just learned something new today which makes my life so much easier. At the bottom of the code view there are a list of DOM elements that exist in the current file that you are editing. I knew this much and use it all of the time because it really helps match open and closing tags when you have a very complex file. Today I learned something that makes my life twice as easy, I learned that you can right-click a DOM element and receive a list of editing options. My favorite is Remove Tag, as it simply strips the opening and closing tags for the choosen element and leaves the nested code as is. No more searching through code to find the appropriate closing tag, what a nice feature!

XSL Variables in JavaScript

Recently I have been working on a web application that has an XSL front-end. I have been integrating Ajax widgets and other DHTML objects with the XSL and up until now I have had to create some work around code to retrieve XSL variables with JavaScript. After much frustration with the work around I have discovered that it is possible to write the variables directly to JavaScript as I am doing in the following example.

<xsl:template name="sampleTemplate">

<xsl:param name="sampleParam" select="''"/>
<script type="text/javascript">

alert( '<xsl:value-of select="$sampleParam"/>' );

</script>

</xsl:template>

I hope this saves some of you the time I spent creating work arounds.

JavaScript Query String

Here's a great way for a front-end developer to retreive a query value without using a server-side language. This method simply takes a query key and returns its value if it exists in the current URLs query string.

document.getQueryValue = function(key)
{

var query = window.location.search.substring(1);
var vars = query.split("&");
for(var i=0; i<vars.length; i++)
{

var pair = vars[i].split("=");
if(pair[0] == key)
{

return pair[1];

}

}
return null;

}

I like to try and use a server-side language to accomplish this whenever possible, but there are definetely times that this comes in handy. My word of advice is to use it wisely...

Mouse Coordinates

I feel like I've written the same mouse coordinate code a million different times, in a million different ways. I've finally created a simple JavaScript method to solve this issue.

document.onmousemove = function(evt)
{

if(!evt) { var evt = window.event; }
document.mouseX = (evt.screenX == null) ? evt.clientX : evt.screenX;
document.mouseY = (evt.screenY == null) ? evt.clientY : evt.screenY;

}

With this method in your document, all that you need to do is simply call document.mouseX or document.mouseY in order to get the current coordinates at any given time. Enjoy!

Ajax on Amazon

My first release on Amazon
I am thrilled to say that my first book has officially been listed on Amazon: Ajax for Web Application Developers! The book is due out in late October and covers advanced Ajax topics for web application developers. The book will cover everything on Ajax from creating an engine and components, to connecting with a database with various languages.