Tag Archives: jquery

Make the jQuery UI Datepicker use a jQuery Button

It has been bugging me for some time that the datepicker widget uses a normal button unless you tell it to use an image. Seeing that we are using the jQuery-UI framework, it makes sense to me that the button should be styled as such. After playing with the selectors and trying it a few different ways, here is how I made that boring datepicker button become a jQuery-UI button (with calendar icon). Continue reading Make the jQuery UI Datepicker use a jQuery Button

Submit ajax form in jQuery-UI Dialog with Enter Key

This question is posted quite a bit and nobody seems to be able to provide a good solution that won’t behave questionably. So here’s my take on it…

$('<div id="myDialog"></div>').appendTo('body').dialog({
    autoOpen: false,
    modal: true,
    closeOnEscape: true,
    buttons: {
        OK: function() {
            $.ajax({
                type: 'POST',
                url: 'save.php',
                data: $('#myDialog :input').serialize(),
                error: function(xml, status, error) {
                    $('#myDialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
                }
            });
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $(this).html('').load('form.php');
    },
    focus: function() {
        $(':input', this).keyup(function(event) {
            if (event.keyCode == 13) {
                $('.ui-dialog-buttonpane button:first').click();
            }
        });
    }
});

Note: You can also trigger the event on any element (not just form fields) by using $(this) as the selector.

That’s it, enjoy 🙂

Reset fields to default values using jQuery

Have you ever wanted to reset only fields in a particular section of the form without resetting all of the fields?

Here is how you can achieve this with jQuery 🙂

$('#reset_address').click(function (event) {
 event.preventDefault();
 $('#address_details :input').each(function() {
  if ($(this).is('select')) {
   $(this).val($(this).find('option[selected]').val());
  } else {
   $(this).val(this.defaultValue);
  }
 });
});

#address_details represents a <fieldset> within my <form>. When the user clicks the #reset_address link I revert the fields within the <fieldset> (not the entire form) back to their original values.

Note: defaultValue is a core JavaScript property. A conditional check for <select> was necessary since defaultValue only applies to <input> and <textarea> fields.

IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)

This post expands on my original jQuery Preload and Swap Navigation Images post. The original code required you to enter the file extension (eg: jpg, png, gif). The modifications below make this jQuery hover/rollover/swap code totally dynamic 🙂

$(document).ready(function() {
 //preload images
 var preloadedImages = new Array();
 $('#container img').each(function(i) {
 preloadedImages[i] = new Image();
 var ext = $(this).attr('src').split('.').pop();
 preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
 });
 //rollover effect
 $('#container a').hover(function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('.' + ext).join('-hover.' + ext));
 }, function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('-hover.' + ext).join('.' + ext));
 });
});

The only significant change from my original code to grab the file extension (var ext = value) before preloading or swapping the images… Continue reading IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)

Use location.hash to pre-select a jQuery UI tab

I have noticed quite a few people asking how to set a default tab during page load using the jQuery UI Tabs Widget. My method is as follows…

<script>
$(function(){
 $('#tabs').tabs({
  selected: (location.hash && parseInt(location.hash.substr(1)) != 'NaN') ? parseInt(location.hash.substr(1)) : 0
 });
});
</script>

I am checking the url for a hash value (eg: mypage.htm#3). If one is found and it can be parsed to an integer, it will use that number for the selected tab, otherwise it defaults to zero.

jQuery UI Tabs Widget documentation

If you are not familiar with the short-hand if/else syntax above, here is an example…

variable = (condition) ? true : false;

Written long-hand it would be…

if (condition) {
 variable = true;
} else {
 variable = false;
}

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… Continue reading How to Add icons to Input (Submit and Reset) Buttons using jQuery UI

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… Continue reading Safe email mailto links using jQuery

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. Continue reading jQuery Preload and Swap Navigation Images