Tag Archives: jquery

Toggle Password Display in HTML5 with jQuery

Do you have  a password field that the user wants to be able to view at the click of a button? Here is the solution I came up with to handle that need…

The field…

<div class="input-group">
  <input type="password" name="password" value="P@$$w0rD" placeholder="Password" id="input-password" class="form-control" required>
  <span id="view-password" class="input-group-addon"><i class="fa fa-eye" aria-hidden="true"></i></span>
</div>

The javascript… Continue reading Toggle Password Display in HTML5 with jQuery

Automatically expand textarea to fit content using jQuery without autogrow or autosize plugins

I’m sure there is a more efficient way to do this, but it suited my needs.

<script>
$(function() {
    $('textarea').keyup(function(){
        $(this).each(function(index, element) {
            $(element).height(element.scrollHeight);
        });
    }).keyup(); //trigger event to initialize pre-filled textareas
});
</script>

Enjoy 🙂

How-To: Reload verification image using Codeigniter 2 CAPTCHA helper

Out of the box, CodeIgniter has a good CAPTCHA helper to use in your web applications. Here is a simple example of how to get a new CAPTCHA image without having to reload the page 😉

Basic Controller

class Welcome extends CI_Controller {

    private $captcha_path = 'assets/img/captcha/';

    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
        $this->load->helper(array('captcha'));
        $captcha = create_captcha(array(
            'word'        => strtoupper(substr(md5(time()), 0, 6)),
            'img_path'    => $this->captcha_path,
            'img_url'    => $this->captcha_path
        ));
        $data = array(
            'captcha'        => $captcha
        );
        $this->session->set_userdata('captcha', $captcha['word']);
        $this->load->view('welcome', $data);
    }

}

The View (jQuery used for UI buttons and altering CAPTCHA image ‘src’ attribute)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/blitzer/jquery-ui.css">
<script>
$(function(){
    $('#new_captcha').button({
        text: false,
        icons: {
            primary: 'ui-icon-refresh'
        }
    }).click(function(event){
        event.preventDefault();
        $(this).prev().attr('src', 'welcome/new_captcha?'+Math.random());
    });
});
</script>
<?php echo $captcha['image']; ?>
<a href="#" id="new_captcha">Reload CAPTCHA</a>

Modified Controller Continue reading How-To: Reload verification image using Codeigniter 2 CAPTCHA helper

jQuery UI replacement for javascript:confirm() links

Here is a nice confirmation handler to replace javascript:confim() links using jQuery UI…

$(function() {
    $('.ui-icon-trash').click(function(event){
        event.preventDefault();
        var targetUrl = $(this).attr('href');
        $('<div title="Confirmation Required"><p>Delete this record?</p></div>').dialog({
            autoOpen: true,
            modal: true,
            resizable: false,
            buttons: {
                Yes: function() {
                    window.location.href = targetUrl;
                },
                No: function() {
                    $(this).remove();
                }
            }
        });
    });
});

I use it for “delete” links (should be obvious) but it can be easily adjusted for any other type of confirmation.

Cheers!

IMPROVED: Open all external links in a new window using jQuery

In the original post I covered how to use jQuery to automatically make external links open in a new window. The method however was slightly flawed in my opinion since…

  1. It did not check form action attributes
  2. It assumed ANY link starting with “http[s]://” was external

Here is my new and improved method for making all external site links open in a new window. It now includes form tags, one less selector for secure and non-secure link urls, AND excludes any of those which link to an internal page where the full url may have been specified.

$('a[href*="://"], form[action*="://"]').not($('a[href*="://'+location.host+'"]')).attr('target','_blank');

A quick breakdown…

  1. a[href*=”://“] and form[action*=”://“] matches the elements where a full url has been specified
  2. .not($(‘a[href*=”://’+location.host+'”]’)) excludes all matched items that include the current host (eg: http://www.robertmullaney.com/)
  3. finally we update the target attribute of the the remaining links open in a new window

Why this is important:

Once you have a user on your site, the worst thing you can do is send them away. Also, you will easily annoy them if all links open in new windows and cause them to leave anyhow. This way, only the links that pull them away from site site are opened in new windows. When they are done on the external sites, they close the browser and there your site remains.

Calculate the total height of child elements of a clipped (overflow: hidden) parent tag

Ever have an element with clipped content and wanted to know the total height of the elements contained therein? I have a client who wants the height of the main content to be clipped to a preset height (don’t ask me why). Which means I need to dynamically add a “read more” link to expand the container and show all the content.

Well, here’s how you calculate the combined height of the children with jQuery… Continue reading Calculate the total height of child elements of a clipped (overflow: hidden) parent tag

My HTML5 base template (skeleton file) with jQuery from Google CDN

Below is the standard HTML5 template I start most of my projects with. It includes the latest 1.x version of jQuery, jQuery UI, and the desired jQuery UI theme. It also has a conditional comment that checks to see if the current browser older than IE9 and includes HTML5Shiv to make sure new elements are rendered properly in older IE browsers.

While I don’t claim this is the best skeleton HTML5 template, I think it is a very solid foundation to start from 😉

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
$(function() {
    //DOM is Ready
});
</script>
</head>
<body>

</body>
</html>

jQuery Add Bookmark to Favorites Script

Here is a quick example of how to use jQuery along with traditional browser sniffing techniques to create a dynamic “Bookmark Us” link.

Google CDN (latest 1.x version, theme)…

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css" />

The javascript… Continue reading jQuery Add Bookmark to Favorites Script

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.