Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

Open external links in a new window in one line of jQuery

jQueryI have been against opening new browser windows because a user can choose to do this on their own. There are several ways they can do this like middle middle clicking or right clicking for a contextual menu. I also wrote about it a few years ago as part of my 12 bad website practices. I’m a little more open to this practice now; I believe the choice to open external links in a new window also depends on your website and your taget audience. I constantly middle click myself, because often when you visit a link embedded in article you fully intend on coming back to the source article after taking a peek. Regardless of whether it’s right or wrong, here is a super easy way to make all external links open in a new window using jQuery.

Keep Reading 

jQuery: How to get links to work in toggled or dynamic content

jQueryjQuery still never ceases to amaze me. The developers of this fantastic library seem to have thought of everything, and the only real challenge for us end users is hunting through the API. Recently I was tasked with creating slide out toggle boxes that had links embedded within them. The problem was that the animation would be triggered before the links, thus rending them useless. Luckily like many things with jQuery the fix is simple and I will demonstrate with two examples.

Keep Reading 

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

jQueryFancybox is a pretty cool lightbox plugin for jQuery that I have been using for awhile now. It’s got a great feature set, looks good, and for the most part it just works out of the box. There is however one thing that was mind numbingly hard to figure out, and that was how to automatically set the height of an iframe lightbox. Fancybox has this functionality built in for inline content via the autoDimensions key, which is set to true by default. Unfortunately this is not the case for iframes. After some hair pulling I managed to piece together an auto height solution for Fancybox iframes, but this technique could also be used without Fancybox to find the height of any iframe.

Keep Reading 

Clearing the jQuery animation queue

jQueryEver see sites where a jQuery animation happens over and over when you rollover or click it multiple times. It’s almost as if the animations are stacking on top of one another in a queue and executing one by one, and guess what? That’s exactly what’s happening. Not to worry though, there is a simple and easy way to fix this.

Keep Reading 

Doing JavaScript pop-up windows the right way

Bad pop-upsSome would argue there is no right way to do a JavaScript pop-up since it disrupts the natural flow and usability of the web. I would tend to agree, but like all things web, there are exceptions to this rule and it may not be your choice anyway. That said there definitely is a very wrong way to do a JavaScript pop-up, and unfortunately there are literally hundreds of tutorials showing you how to do it the wrong way and even more websites implementing it wrong.

Keep Reading 

jQuery validator plugin – custom method for postal code validation

With my previous post on jQuery, I thought I would share a simple add-on method for the jQuery Validation plugin. If you are from Canada or writing a Canadian validation form with a postal code field you can use this. Just add the code below in your rules script.

// Addon method for validating postal codes. Valid
// formats are (X1X 1X1) or (X1X1X1) or (X1X-1X1).
$.validator.addMethod("postalCode", function(value) {
     return value.match(/^[a-zA-Z][0-9][a-zA-Z](-| )?[0-9][a-zA-Z][0-9]$/);
}, 'Please enter a valid postal code');

Then you can use the rules required:true and postalCode:true in your rule set.

jQuery really can change the way that you write JavaScript!

I recently started playing around with two JavaScript libraries, MooTools, and jQuery. After playing with MooTools for a long time and getting frustrated, I switched to jQuery. This does not mean MooTools is bad, I am no JavaScript expert and there are a lot of very nice MooTools examples on their site.

At work I write a lot of JavaScript validation in forms, and it can get very tedious. I like writing my own code, but I’ve never really liked JavaScript as much as other languages and in today’s world of ever changing technologies and browsers I finally thought why re-invent the wheel; someone has probably done this better than me already. Combine that with the fact that the form I was working on and my JavaScript was becoming particularly unwieldy, so I decided try out one of these highly praised JavaScript Libraries.

After downloading jQuery I quickly realized I would need a plugin. A quick search revealed many, many plugins, including a validation plugin called “Validation” of all things. The learning curve for jQuery and the plugin was several hours, but after setting it up I quickly began to see the power using a JavaScript library. I am now a jQuery convert.

Want to see who else is using jQuery? The list is quiet impressive. As another blogger said, if it’s good enough for them, it’s good enough for me.