How to Add icons to Input (Submit and Reset) Buttons using jQuery UI
As you may have already noticed, most browsers do not support adding icons to <input type=”submit”> and <input type=”reset”> using jQuery UI. The code below will correct this issue by replacing matched <input> tags with appropriate <button> tags…
$(document).ready(function(){
$('input:submit, input:reset').each(function(){
$(this).replaceWith('<button type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
});
});
We loop through each submit and reset button and replace it with a button tag using the original input’s value as the new button’s text. Since we are using the original input’s value attribute, it should not be considered optional. Otherwise, you’ll end up with a button that has no text unless you set it explicitly with the .button({label: ‘my button label’}) option unless you intend to show only the icon by calling .button({text: false}) option.
Now we can assign icons to the buttons without updating the html using the following code… Read more
Safe email mailto links using jQuery
Here is a quick and easy way to use jQuery for hiding email links from spam bots.
$(document).ready(function() {
//safe mailto's
$('a[href*="[at]"][href*="[dot]"]').each(function() {
var email = $(this).attr('href').split('[at]').join('@').split('[dot]').join('.');
$(this).attr('href', 'mailto:' + email.toLowerCase());
if ($(this).text().length == 0) $(this).text(email);
});
});
First things first… loop through all the anchor tags (aka: links) that have [at] and [dot] in the href attribute. Next replace those placeholders with the proper characters. Then we prepend mailto: and lastly update the inner text of the anchor tag with the email address.
To make this work, your email links would be written as follows… Read more
Adding mouse events to table rows using jQuery
In my example I will only be modifying the row’s css classes. The behavior would be very similar to what you may already be familiar with in phpMyAdmin’s interface.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
$('tr').hover(function() {
$(this).toggleClass('highlight');
});
$('tr').click(function() {
$(this).toggleClass('selected');
});
$('tr:even').addClass('odd');
$('tr:odd').addClass('even');
});
</script>
Everything should be pretty easy to understand except for the last 2 addClass commands. jQuery’s “:odd” and “:even” selectors behave differently than you may expect. You could assume the “odd” selector to start at the “first” row but that is not the case (an array’s first element zero-index unless otherwise defined). Unless I included a heading row, my “first” row is actually an even row since it is referenced as an array and has an index of zero. That’s why it looks like I am doing it backwards 
Open all external links in a new window using jQuery
In the following code we set the “target” attribute to “_blank” for every anchor that has an “href” attribute starting with “http(s)://”…
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[href^="http://"],a[href^="https://"]').attr('target','_blank');
});
</script>
Most examples of this type only check for links starting with “http”, this of course would cause internal relative links such as “httpd_info_page.html” to open in a new window. This is why I check specifically for the full strings.
jQuery Preload and Swap Navigation Images
UPDATED CODE: IMPROVED jQuery Image Preloader with Rollover Effect (extension independent)
I have been researching Javascript libraries quite a bit lately and have decided on jQuery. Don’t ask me to say why it is better or worse than the other libraries out there. After reading the documentation I just happen to prefer it.
Suprisingly enough, one of the most common things Javascript is used for is navigation rollovers. Swapping an image source using markup attributes such as onmousover and onmouseout is not difficult by any means. We have all done it the “old” way and most of us still do, but there is hope!
I normally use unordered lists for my menus, but for simplicity’s sake, and no need to reference CSS rules, here is an example of a very basic menu.
<div id="navWrapper"> <a href="page1"> <img src="../assets/images/page1.png" /></a> <a href="page2"> <img src="../assets/images/page2.png" /></a> <a href="page3"> <img src="../assets/images/page3.png" /></a> </div>
Now what we would usually do is add “onmouseover” and “onmouseout” events to each anchor (link) and an “id” attribute to each anchor’s child image. Wouldn’t it be great if we didn’t have to clutter the (X)HTML with javascript? There must be a better way… this is the thought that started me on my introduction to jQuery 
Using only the markup above and the Javascript referenced below, we can achive the same result of my previous Javascript image preloader/swapping function post. Read more