Thursday, October 26, 2006

jQuery Tip: Highlight row on hover

This snippet applies a class when you hover over a table row and removes it when you move the mouse out. Useful when you have a table with many rows and want to improve readability.

Define your stylesheet in head:

<style type="text/css">
<!--
 #mytable {
  border-collapse: collapse;
  width: 300px;
 }
 #mytable th,
 #mytable td
 {
  border: 1px solid #000;
  padding: 3px;
 }
 #mytable tr.highlight {
  background-color: #eee;
 }
//-->
</style>

JavaScript (also in head)

<script type="text/javascript">
<!--
$(
 function()
 {
  $("#mytable tr").hover(
   function()
   {
    $(this).addClass("highlight");
   },
   function()
   {
    $(this).removeClass("highlight");
   }
  )
 }
)
//-->
</script>

Your table (with id mytable) in body

<table id="mytable">
 <tr>
  <th>Foo</th>
  <td>Lorem</td>
  <td>Ipsum</td>
 </tr>
 <tr>
  <th>Bar</th>
  <td>Dolor</td>
  <td>Sit</td>
 </tr>
 <tr>
  <th>Baz</th>
  <td>Amet</td>
  <td>Consectetuer</td>
 </tr>
</table>

Now whenever you move your mouse over a row in the table, the background colour is changed to gray (#eee is a shade of gray).

Friday, October 20, 2006

Link: JavaScript Management with ASP.NET

JavaScript Management with ASP.NET outlines how you can make managing JavaScript easier in ASP.NET. It uses an XML file to store the JavaScript code (so only one file needs to be edited) and a HTTP Handler / Utility class to request and obtain the JavaScript code. The downside to this approach is that it is less portable than simply having separate files - you would need to write code for extracting the JavaScript from the XML file if you use another server side language like PHP.

Preloading Images the jQuery way

jQuery is capable of creating elements without using the DOM (i.e. document.createElement). You can take advantage of this to preload images, and it involves less code that most other solutions - if you ignore the fact that jQuery has overhead and assume you are using jQuery for tasks other than preloading.

jQuery.preloadImages = function()
{
    for(var i = 0; i<arguments.length; i++)
    {
        jQuery("<img>").attr("src", arguments[i]);
    }
}

You can then preload images before the page has fully loaded. Useful for when you implement rollover images (as there will not be the usual delay you normally get after mousing over a rollover image).

$.preloadImages("foo.jpg", "bar.gif", "baz.png");
$(
    function()
    {
        alert("document ready");
    }
)

Thursday, October 19, 2006

jQuery Tip: Open links in new windows with valid (X)HTML Strict DocType

Update: forgot the return false (without it, the page would open in a new window and replace the current page).

In (X)HTML Strict, anchor tags linking to other pages are not allowed to have the target attribute. Because of this, links can not be opened in a new window if the page validates. However, with jQuery and the addition of a class to anchors that open in new windows: <a href="http://jquery.com" class="external">jQuery</a> you can do this in just one line of code: $("a.external").click(function(){window.open(this.href);return false;});. If you add any more links dynamically (i.e. through AJAX), you would have to run this again, but preferably not anonymously (i.e. inline function).

function openWindow()
{
    window.open(this.href);
    return false;
}
// shorthand for $(document).ready(function(){...})
$(
    function()
    {
        $("a.external").click(openWindow);
    }
)

Friday, October 06, 2006

Fixing quotes with jQuery

It is easy to solve the problem with quotes in Internet Explorer (the problem being that they are not contained in quotation marks) by using jQuery.

All it takes is one line of code:

$("q").prepend("&#8220;").append("&#8221;");

However, that means there are two quotes for browsers that do support the tag. A browser sniff is all that is needed (generally it is a bad idea to do that, but some circumstances require it).

if($.browser.msie)
{
 $("q").prepend("&#8220;").append("&#8221;");
}

Demo page

Thursday, October 05, 2006

Google Code Search

Google now allows you to search for source code via Google Code Search that is freely available under several open source licenses (e.g. (L)GPL, BSD, MIT, Apache etc).

Wednesday, October 04, 2006

jQuery Text Clips for PN2 (updated)

An update of my text clips for Programmers Notepad 2 (jQuery version 1.0.1). Download.