Jimmy Cuadra Web Services

RSS Recent Screencasts

Default Form Values with jQuery
by Jimmy

A common effect for web forms is to show a default value in each input in gray text that disappears when the user clicks in it and returns when they click away without entering text. Learn how to do it using jQuery in this beginner level tutorial.

View the screencast in high definition View the screencast in high definition

Screencast notes Read the notes

Notes

Note that in the blur handler, I accidentally used $(this) instead of $this (line 31 in the screencast and line 33 in the code below). This actually makes the point that either can be used and things will still work. However, it is more efficient to use $this.

<!-- index.html -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Jimmy Cuadra Screencasts</title>
  <link href="reset.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="application.js" type="text/javascript"></script>
</head>
<body>
  <div id="bucket">
    <h1>Default Form Values with jQuery</h1>

    <form>
      <fieldset>
        <p><input type="text" value="First name" /></p>

        <p><input type="text" value="Last name" /></p>

        <p><input type="text" value="E-mail" /></p>

        <p><input type="text" value="Website" /></p>

        <p><textarea cols="50" rows="5">Enter your comments</textarea></p>
      </fieldset>
    </form>
  </div>
</body>
</html>
// application.js

$(function() {
  // 1. select all form inputs and the textarea
  $('form input').add('form textarea')
  
  // 2. add focus handler
  .focus(function() {
    // a. cache current element
    var $this = $(this);
    
    // b. set the default value if it hasn't been set
    if (!$this.data('default')) {
      $this.data('default', $this.val());
    }
    
    // c. blank out the field and change color to black
    //    if the user hasn't entered text in it
    if ($this.val() == $this.data('default')) {
      $this.val('')
      .css('color', '#000');
    }
  })
  
  // 3. add blur handler
  .blur(function() {
    // a. cache current element
    var $this = $(this);
    
    // b. return field to default value and change color to gray
    //    if the field is empty
    if ($this.val() == '') {
      $(this).val($this.data('default'))
      .css('color', '#666');
    }
  })
  
  // 4. change text color to gray
  .css('color', '#666')
});


Tagged with: jquery, javascript

ActionMailer and Gmail
by Jimmy

This screencast shows how to set up a Ruby on Rails application to send email with ActionMailer and Gmail.

View the screencast in high definition View the screencast in high definition

View the screencast on YouTube View the screencast on YouTube

Screencast notes Read the notes

Notes

Ruby 1.8.7 and Rails 2.2.1 or later versions are required to use TLS (required for Gmail SMTP) without a plugin. If you use older versions of either Ruby or Rails, try a plugin like action_mailer_optional_tls.

I’ve improved the quality of the video for this screencast. A high quality version is available on YouTube via the link above.

I’d like to give a big thanks to Nebyoolae for providing the intro sound!

Here is the code from the screencast:

# config/environments/development.rb

config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
  :enable_starttls_auto => true,
  :address => 'smtp.gmail.com',
  :port => 587,
  :authentication => :plain,
  :domain => 'myapp.com',
  :user_name => 'username@gmail.com',
  :password => 'password'
}
# app/models/notifier.rb

class Notifier < ActionMailer::Base
  def gmail_message
    subject     'Message via Gmail'
    recipients  'youremail@address.com'
    from        'webmaster@address.com'
    sent_on     Time.now
  end
end
# app/views/notifier/gmail_message.text.plain.erb

Hello,

You are receiving this email via Gmail!
<!-- app/views/notifications/index.html.erb -->

<a href="/notifications/create">Send</a> a message via Gmail!
# app/controllers/notifications_controller.rb
class NotificationsController < ApplicationController
  def index
  end

  def create
    Notifier.deliver_gmail_message
    flash[:notice] = 'Your message has been sent.'
    redirect_to root_path
  end
end
# config/routes.rb

ActionController::Routing::Routes.draw do |map|
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
  map.root :controller => 'notifications', :action => 'index'
end


Tagged with: ruby on rails, actionmailer, gmail, email

Equalizing Column Heights with jQuery
by Jimmy

In this first screencast, I present the common problem of making the background of a floated sidebar stretch to the height of the neighboring content element and provide a simple solution using JavaScript and jQuery.

View the screencast in high definition View the screencast in high definition

View the screencast on YouTube View the screencast on YouTube

Screencast notes Read the notes

Notes

The solution uses jQuery to loop through each column on the page, find the tallest column, and set the heights of all columns to that value. Here is the script:

$(function() {
        var tallest = 0;
        var $columnsToEqualize = $(".column");
        $columnsToEqualize.each(function() {
                var thisHeight = $(this).height();
                if (thisHeight > tallest) {
                        tallest = thisHeight;
                }
        });
        $columnsToEqualize.height(tallest);
});

Remember to load the jQuery library first.

The full file from the screencast is available here.



Tagged with: new features, jquery, javascript, css

Find content by tags