bavotasan.com » way

Use jQuery to Replace a Word with a Link

c.bavota — Mon, 09 Aug 2010 20:54:46 +0000

If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all it took was a small piece of code.

If you don’t already have jQuery loaded into your page, include this before your closing .

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>script>

That will load up jQuery from Google.

Now you just need to include this in your site’s footer, before the closing . (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.)

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/jQuery/ig, 'jQuery')); 
})(jQuery)
script>

Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript replace() function. The i after the slash makes the search and replace case-insensitive, and the g makes it global.

I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site.

A Simple CSS Trick to Vertically Align Text

c.bavota — Thu, 05 Aug 2010 17:33:08 +0000

I was trying to vertically align text within a div container and it just wasn’t working for me. You would think that using vertical-align in your CSS would accomplish just that, but you would be wrong. I found a way to do it using three div containers and absolute positioning but I felt that was a little overkill for my purposes.

This was the box I was designing:

Some Text

After doing a lot of digging around, I discovered that you could set the line-height of your text to be the same as the height of your div container and this is what you would get:

Some Text

That did it.

Here is the CSS I used:

div.container {
  width: 100px;
  height: 100px;
  background: #666;
  color: #fff;
  text-align: center;
  line-height: 100px; /* where the magic happens */
}

The only way this technique wouldn’t work for you was if you had text on two lines, then the second line would be 100 pixels below the first. Hmm… maybe I could figure out a solution to that one as well.

Using Ajax with WordPress

c.bavota — Mon, 02 Aug 2010 18:53:53 +0000

A little while back, I updated Magazine Basic and added the Ajax save function. When I uploaded it to WordPress to await approval, I received some feedback on how I could incorporate Ajax using the admin-ajax.php file instead of the sloppy way I had it coded. All of the core Ajax functions in WordPress rely on admin-ajax.php and using it for custom scripts is extremely easy to implement.

Let’s take a look at all the pieces you need to get it working. In this example I will build a small mailing list function that will send out an email to the admin when a person clicks submit.

Here’s our form:


	
	
	 admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" />

Here’s the jQuery:

jQuery(document).ready(function(){
	jQuery("#mailinglist").submit(function()	{
		if(jQuery("#mailinglistemail").val()=="") {
			jQuery("#mailinglist #message").text("Please enter your email address.");
			return false;
		} else {
			var email = jQuery('#mailinglistemail').val();
			if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
				jQuery("#mailinglist #message").text("Please enter a valid email address.");
				return false;
			} else {
				var data = {
					action: 'join_mailinglist',
					email: email
				};
				jQuery("#mailinglistsubmit").hide();
				jQuery(".ajaxsave").show();
				jQuery.post("", data,
				function(response){
					jQuery(".ajaxsave").hide();
					jQuery("#mailinglistsubmit").show();
					jQuery("#mailinglist #message").html(response);
				});		
				return false;
			}
		} 
 
	});
});

Let me explain each part.

When a user clicks submit, we need to check that the email field is not empty. If it is empty, we let the user know by sending the “Please enter your email address.” message and we stop the form from being submitted by including the return false; line.

if(jQuery("#mailinglistemail").val()=="") {
	jQuery("#mailinglist #message").text("Please enter your email address.");
	return false;
}

Next, we’ll do a simple validation to make sure the email address actually contains the @ symbol and a period. If not, send an error message and return false.

var email = jQuery('#mailinglistemail').val();
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
	jQuery("#mailinglist #message").text("Please enter a valid email address.");
	return false;
}

Once all that is done and everything is good, we can submit our form. This is where admin-ajax.php comes into play. When using admin-ajax.php, you need to include an action callback to make it work. Our callback is join_mailinglist. This is going to interact with our PHP to make everything work on the backend. Let’s create a data variable to store our action and our email value.

var data = {
	action: 'join_mailinglist',
	email: email
};

Now we will hide our submit button and have a loader graphic appear to let people know something is going on. Then will will use the jQuery .post function to send everything out to the admin-ajax.php file. Once the function is complete and a response is given, the loader will disappear, the submit button will return and a success message, or error message will indicate what happened.

jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post("", data,
function(response){
	jQuery(".ajaxsave").hide();
	jQuery("#mailinglistsubmit").show();
	jQuery("#mailinglist #message").html(response);
});		
return false;

With the form and the jQuery in place, all we need now is some PHP.

The admin-ajax.php file requires two action filters.

add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

The first action will only work if users are logged in. The second is if users don’t have to be logged in. For our requirements, it should look like this:

add_action('wp_ajax_join_mailinglist', 'join_mailinglist_callback');
add_action('wp_ajax_nopriv_join_mailinglist', 'join_mailinglist_callback');

Here is our join_mailinglist_callback function, which needs to be added to functions.php:

function join_mailinglist_callback() {
	$email = $_POST['email'];
	if(!empty($email)) {
		$yourEmail = 'c@bavotasan.com';
		$subject = 'Add me to your mailing list';
		$success = mail($yourEmail, $subject, $email);
		if(!empty($success)) {
			echo 'Your email is subscribed to our mailing list.';
		} else {
			echo 'There was a problem. Please try again.';
		}
	}
	die();
}

With everything in place, you will get a form that works like the one below.

Great Font Resources for Web Development

c.bavota — Tue, 27 Jul 2010 14:20:25 +0000

Ever since I wrote Embedding Fonts in your Web Site with CSS and @font-face many people have been emailing me with questions about adding new fonts to their sites. One of the easiest ways is with The New Google Font API but there are also a few others resources available. Here is a list of places to find fonts and tools you can use to include them in your Web site.

Font Squirrel

Font Squirrel has an amazing library of free commercial-use fonts. All of the @font-face kits that are available in my Premium themes come from Font Squirrel. You can download fonts to use in desktop publishing or you can grab some @font-face kits to use on your Web site. There is even a handy, simple to use tool for converting standard fonts into @font-face kits for embedding on your Web site.
http://www.fontsquirrel.com/

Google Font API

I wrote about this one already so just check out that article.

TypeKit

TypeKit is a subscription-based service that allows you to link to fonts from many different type foundries. Subscription costs range from free to $99.99 per year. A free account allows for 25,000 pageviews a month and a limit of 2 fonts throughout you site. It is a great way to test out the service to see if it is right for you.
https://typekit.com/

WebFont Loader

This one is very similar to the Google Font API but it offers a wider range of resources of available fonts. You can use Google Fonts, TypeKit, Ascender or custom fonts.
http://code.google.com/apis/webfonts/docs/webfont_loader.html

sIFR

sIFR (Scalable Inman Flash Replacement) is an open source piece of JavaScript that allows you to replace text elements on your Web site with Flash embedded equivalents. It is a bit more complicated to implement but there are many sites that use it and the results are quite nice.
http://wiki.novemberborn.net/sifr3/

typeface.js

typeface.js was developed by David Chester as an alternative to using Flash to embed fonts on your site. Using typeface.js is pretty straightforward, since all it takes is the core JavaScript file and then a font. You can even convert your own fonts.
http://typeface.neocracy.org/

FLIR

FLIR (FaceLift Image Replacement) is another alternative to sIFR. It was created by Cory Mawhorter and uses JavaScript and PHP to dynamically create images of the text elements that you wish to use specific fonts on. Implementing it requires only a few lines of code and you are up and running.
http://facelift.mawhorter.net/

Cufón

Cufón works with a rendering engine built in JavaScript and a font generator that uses FontForge to convert fonts to a proprietary format.
http://wiki.github.com/sorccu/cufon/

6 Tips to Speed Up jQuery

c.bavota — Tue, 13 Jul 2010 16:10:12 +0000

As it stands, jQuery is an amazingly efficient JavaScript framework, but there are a few things that you can do when creating your code that will end up slowing it down significantly. I’ve noticed that a few small changes to my standard way of using jQuery have made my code run a lot faster.

1. Be More Specific with Selectors

When you are setting up jQuery to search through the DOM for a specific element, the more information you give it, the faster it will find the element. It is also faster to use IDs instead of classes.

Something like this will require going through the whole DOM structure to find the element:

$(".item")

These are way more efficient:

$("#item") // use IDs instead of Classes
$("p.first .item") // be more specific with the location

2. Always Use $(this)

If you are using a selector to traverse the DOM in search of an element to perform a specific function on, that element becomes stored and can be manipulated within the function by using $(this).

This code will traverse the DOM twice to get the same element:

$("#item").click(function() {
  $("#item").addClass('clicked');
});

This is the efficient way since the element is already stored within the $(this) call:

$("#item").click(function() {
  $(this).addClass('clicked');
});

3. Pass Multiple Selectors

If you want the same functions to occur on multiple elements, it is possible to group selectors together to increase performance and avoid repetitive traversing of the DOM.

// bad
$("p#one").fadeIn();
$("p#two").fadeIn();
$("p#three").fadeIn();

// good
$("p#one, p#two, p#three").fadeIn();

4. Use Multiple Properties and Values

Many jQuery methods accept multiple properties and values instead of just a single property and value pair. Including multiple properties will help speeds things up as it reduces the amount of jQuery objects that are created within your code.

// bad
$("img#one").attr('src', 'http://mysite.com/images/image.jpg');
$("img#one").attr('alt', 'My Image');

// good
$("img#one").attr({
  'src': 'http://mysite.com/images/image.jpg',
  'alt': 'My Image'
});

5. Add Styles with Classes or IDs

If you want to add multiple style changes to an element, it make more sense to use CSS to assign your styles to a Class or ID, and then add that Class or ID to the element.

Create your styles: