Setting a focus on an input box is a hassle with so many different browsers out there. Each browser has their own unique tag to set the focus. Rather than using the browser-specific tags for the focus, one can utilize Javascript to provide the functionality for multiple browsers.

jQuery is a great alternative to adding the focus since its simply a matter of adding a few lines of code to your page. It will work on multiple browsers, whether it be Internet Explorer, Firefox, Chrome, or Safari.

If you want the first visible element of the page to be focused:

<script type="text/javascript" >
$(function() {
$("input:text:visible:first").focus();
});
</script>

If you want a specific element to be focused, such as a search box:

For instance,<script type="text/javascript" >
$(function() {
$("input[name=\'MY_INPUT_NAME\']").focus();
});
</script>

will set the focus for your input element with the name “MY_INPUT_NAME”.

When coding your pages with Javascript/AJAX/CSS, one thing to look out for is the compatibility with your organization’s remote access device. One of the devices I have to consider is the Cisco WebVPN product. It has compatibility issues with things such as the @charset “UTF-8″; and @import command in CSS files.

Compatibility Issues:

• jQuery does NOT work in WebVPN by default. This is a HUGE problem. I have tried rolling back the jQuery version to no avail. I’m guessing the Cisco ASA WebVPN appliance doesn’t work with rewriting included files (such as a js points to another internally)
  UPDATE 9/29/2009:
  However, thanks to a helpful tip from kenjin there is a fix!
  
  Go to your jQuery file (jquery.js, jquery-1.3.2.min.js, etc.) and do a search and replace with the following tag.
  Locate:
  <param />
  Replace it with:
   <param name=""/>This should resolve the WebVPN compatibility issues with jQuery.  
• CSS Files: any @ command in CSS files such as @import and @charset. To workaround it, remove the charset and move all linking of css files to the webpage instead.

The cache in Internet Explorer is not very AJAX friendly for GET/POST commands. You must put in a constantly changing variable in the URL such as date with seconds in Internet Explorer. I noticed this when the refresh of my GET command would only work once in my window.setInterval(.. , .. ) function.  However, in Mozilla and Safari, my function was working perfect.

The solution to this is to append the current date and time into the URL of your GET/POST request. Special thanks to this post.

...

...

I previously tried setting the cache to expire on the PHP header files, but it has no effect. However, this date/time trick works.

Over the weekend, I ran across a dropdown script called jdMenu that runs off the jQuery library. It turned out to work great for me, as long as the level of menus is maxed at 2. I prefer using scripts that use the jQuery library in order to simplify the maintenance of scripts and to speed up development of Ajax scripts.

From my experience, modern dropdown menus should only use <ul><li> hierarchy tags to make it easy to maintain. As long as the coder knows HTML, they should be able to modify the dropdown menu. I’ve used dropdown menu scripts in the past that had javascript arrays, which are a huge hassle to maintain. Not to mention accessibility issues. jdMenu uses the list HTML structure, and does an efficient job at it. The script loads fast.

The only downside to the script is the development documentation and support, but I figured out how to modify the script to meet my needs.  For instance, I’ve converted the top level navigation links to images and used CSS to display the rollover of the images. If you want clickable top level links, make sure you DO NOT use the class=”accessibility” option.  The jdMenu script is definitely one to consider if you want to use dropdown scripts with CSS. Very fast and easy to rewrite to meet your specific needs.

Pros:

Very fast –actual script is only 3Kb
Works with search engines — plain unordered lists UL/LI HTML
Very easy to customize — jQuery code is easy to update
Works with IE6 and IE7 – There is a known issue where IE6/IE7 places select boxes on top of EVERY element in the page. This script takes care of that. I know many other scripts do not have this fix built-in.

Cons:

Limited documentation, but the code is easy to understand. Just need to have a handle of HTML and some JS in order to get started.
3rd level+ menu order isn’t fully supported. I suggest not having menus written with that many levels anyway, too confusing for the user.