How To Target Firefox 2 RSS

Share /
Browser Testing, jQuery / 7.14.09 / 606No CommentsHow+To+Target+Firefox+22009-07-14+15%3A35%3A12kevin /

I was recently working on a project that had some issues in Firefox 2.0, but not Firefox 3.0. Generally I would frown on this sort of “browser sniffing” approach, but for this it was a requirement and there seemed to be no way around it.

I’ve used jQuery’s $.browser() method to add a class of ff2 to the <body> tag if the browser is indeed Firefox 2.0.

$(function(){
	if ($.browser.mozilla && $.browser.version.indexOf('1.8.') > -1) {
		$('body').addClass('ff2');
	}
});

Hopefully this helps someone else out there!

jQuery Animation & Distorted Text in Internet Explorer RSS

Share /
Internet Explorer, jQuery / 5.5.09 / 3152 Comments2009-05-05+17%3A30%3A13kevin /

While working on the Corporate Filing Solutions project I came across an issue with the jQuery scrolling quotes and Internet Explorer.

What’s the issue?

It seems that when you animate text with jQuery, particularly bold text, Internet Explorer will distort the text horribly.

How do you fix it?

To fix this, all you have to do is set a background color on the element that is being effected. In this case I set <cite> tag to have a background-color of #FDFDFD and it fixed the issue.

Smart Forms Using GeoIP Location RSS

Share /
jQuery / 4.1.09 / 195No CommentsSmart+Forms+Using+GeoIP+Location2009-04-01+17%3A39%3A04kevin /

GeoIP technology allows us to detect where a specific user is located based on their IP address. With MaxMind’s new JavaScript API it is easy to auto-fill any location form fields to make processes easier for users. This avoids one of the common user interface design mistakes we often encounter: the use of poor defaults.

Sample

GeoIP: Smart Form Design

This is a very basic but common example of how you can use this in your projects.

How it’s done

You’ll need to start by linking to a copy of jQuery and the MaxMind GeoIP JavaScript API.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"><!--mce:1--></script>

If for some reason the MaxMind data service goes down, the first field will be the default. Not the end of the world. It’s estimated that services uptime is about 99.95%.

Check out Fresh Tilled Soil: Web Resources! RSS

Share /
AJAX, Abstractions, Art Inspiration, Branding, CSS, Content, Flash, Life, Mobile, PHP, Process, Resources, SEM / SEO, User Interface, Web Design, Wordpress, XML, jQuery / 2.3.09 / 174No Comments2009-02-04+02%3A42%3A30kevin /

Some people may have noticed that the frequency of my articles has died down a bit over the past month or so. I’ve been adding posts at a new location now for work.

Many of the topics are the same, if your interested in checking it out head on over to Fresh Tilled Soil: Web Resources and take a look.

I’ll continue to post on kevinleary.net as well, but not as often. I’d say that I plan to average 2-3 new posts per month.

Thanks again for reading!

jQuery fadeIn() & fadeOut(): Problems in Internet Explorer RSS

Share /
jQuery / 10.18.08 / 11810 Comments2008-10-18+14%3A53%3A43kevin /

On January 20th, 2010 I upgraded the demo for this to use jQuery 1.4 and the fadeIn() and fadeOut() issues seem to be fixed in IE7 and IE8.

I’ve noticed some issues with my jQuery work. When I use the .fadeIn() or .fadeOut() methods I see ugly pixelated text in Internet Explorer.

Preview / Sample / Demonstration

jQuery Fading Problems in Internet Explorer

How it is fixed

Set a background color with CSS on the element that is fading in or out.

An alternative method

If you’re having problems with the method above give this jQuery plugin a try.

Thanks to Bill: I can’t recall where I got this from but if you google it you’ll find it. This is how to fix the problem (not tested in jquery 1.4).

Use this function. Change your ‘fadeOut’ to ‘customFadeOut’. A sample of Bill’s setup can also be seen on the demo page.

(function($) {
	$.fn.customFadeIn = function(speed, callback) {
		$(this).fadeIn(speed, function() {
			if(!$.support.opacity)
				$(this).get(0).style.removeAttribute('filter');
			if(callback != undefined)
				callback();
		});
	};
	$.fn.customFadeOut = function(speed, callback) {
		$(this).fadeOut(speed, function() {
			if(!$.support.opacity)
				$(this).get(0).style.removeAttribute('filter');
			if(callback != undefined)
				callback();
		});
	};
	$.fn.customFadeTo = function(speed,to,callback) {
		return this.animate({opacity: to}, speed, function() {
			if (to == 1 && jQuery.browser.msie)
				this.style.removeAttribute('filter');
			if (jQuery.isFunction(callback))
				callback();
		});
	};
})(jQuery);

Resources

jQuery in Action: If you find yourself frequently using jQuery in your projects I would highly recommend checking out this book. I’ve read this and also Learning jQuery 1.3 and have found jQuery in Action to be clearer, more straight forward and more powerful.
jQuery IE Fade Test
jQuery Reference Guide

Highlighting The Current Page With CSS & jQuery RSS

Share /
CSS, PHP, User Interface, jQuery / 9.10.08 / 9264 Comments2008-09-10+21%3A47%3A57kevin /

Here’s a common web development scenario: How do we highlight the current page in a navigation seamlessly and dynamically? The answer is jQuery.

See a Live Demo

My recipe for this common scenario involves a mixture of CSS and JavaScript with a dash of jQuery.

XHTML

<ul id="navigation">
	<li><a href="about-us.html">about us</a></li>
	<li><a href="our-products.html">our products</a></li>
	<li><a href="blog.html">blog</a></li>
	<li><a class="active" href="login.html">login</a></li>
	<li><a class="active" href="contact.html">contact</a></li>
</ul>