jquery4u.com - Archives (octobre 2014)

Le: 29 10 2014 à 19:00 Auteur: Lukas White

When you're collecting data from users, there are two key challenges; collecting that information, and validating it. Some types of information are straightforward - someone's age, for example, couldn't really be simpler to collect and to validate. Names aren't as straightforward as they sound, but provided you cater for edge cases and international variations - for example patronymics, the mononymous, or even just people with hyphenated surnames - you can't go too far wrong (although plenty of applications and services do!). Email addresses, while theoretically very easy to validate, have their own challenges - yet nevertheless, there are plenty of regular expressions in the wild that aren't quite right.

And then there are telephone numbers. These are hard. Really hard. In this article I'll discuss some of the challenges around collecting, validating, and displaying telephone numbers.

Why Telephone Numbers are Different

Perhaps you're thinking that since telephone numbers tend to follow a pretty rigid format, such as this:

[code] 202-456-1111 [/code]

...that it ought to be simple to construct a simple regular expression to validate them. In fact, here's one:

[code] ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$ [/code]

Well, stop right there. For starters, here are just some variations of the number above, all of which are perfectly valid:

[code] 202 456 1111 (202) 456 1111 2024561111 1-202-456-1111 1-202-456-1111 x1234 1-202-456-1111 ext1234 1 (202) 456-1111 1.202.456.1111 1/202/456/1111 12024561111 +1 202 456 1111 [/code]

So based on that, we know that the regular expression apparoach isn't as simple as we first thought - but that's only the half of it. These examples are just for a US-based number. Sure, if you know that the number you're collecting is going to be for a specific country, you may be able to use a regular expression. Otherwise, this approach won't cut it.

Let's look at some of the other issues around telephone numbers, and why they make our job even harder.

Numbers Change

All sorts of external factors can have implications for telephone numbering. Whole countries come and go, introducing new country prefixes. New classifications of numbers introduce new numbering systems - premium-rate, local-rate, toll-free, and so on. When a carrier runs out of one set of numbers - like, sadly, premium-rate - they simply introduce a new prefix.

Some changes have enormous implications; in the United Kingdom some years ago, for example, the entire regional numbering system underwent a drastic change, with virtually every area code getting an additional "1" inserted. Even then, the capital had a subtly different system. It was probably a decade before signage was changed across the country to reflect the changes.

Then, of course, there was the enormous and unprecedented growth in mobile. No longer was the number of telephone numbers required largely limited to the number of households, but many times over. The continued strain on the pool of available numbers can only increase the likelihood of further changes.

Continue reading %Working with Phone Numbers in JavaScript%

Le: 28 10 2014 à 17:30 Auteur: David Turnbull

Without a doubt, the most effective way to build an email list is to create a modal that appears when a visitor stumbles across your website. This modal will then contain an opt-in form that they simply can't ignore (usually with a compelling bribe to hand over their email, like a free download of some sort). This approach is not without its share of controversy, but:

1. They remain incredibly effective.
2. The complaints are from a vocal minority.

To create these modals, most people use third-party software like Opt-in Monster, LeadPages, or the List Builder plugin from SumoMe. But while these applications are convenient, they aren't always the best choice, and as we'll talk about in this tutorial, they're easy to replace with jQuery.

Here's how.

Step 1: Install jQuery

To begin, download and embed a copy of jQuery inside a web page. To save the slightest bit of time, feel free to embed an external copy of jQuery:

[html] [/html]

Next, we'll need to add two different jQuery plugins to our page:

The first plugin is the jQuery Modal plugin. This is what we can use to create the modal box that appears after the user visits our page. When adding the plugin to your project, make sure to download all of the files:

• jquery.modal.min.js
• jquery.modal.css
• close.png
• spinner.gif

You can follow this tutorial using other modal plugins (or a custom modal), but I've found the jQuery Modal plugin to be the simplest option.

The second plugin is the jQuery Cookie plugin. This is what we'll use to make it so that when a user clicks the "Close" button on the modal, they won't see the modal again for the next thirty days. This means:

1. Everyone should see the modal at least once.
2. Return visitors won't see the modal on every visit.

Relying on cookies is not a fool-proof approach but it's good enough.

After setting up jQuery itself, along with these plugins, you should have a HTML file that looks something like this:

[html] [/html]

Continue reading %Creating an Opt-in Monster Clone with jQuery%

Le: 08 10 2014 à 20:00 Auteur: Scott O'Hara

Not too long ago, a friend of mine had constructed a UI component to change a page’s content based on the the current selection of a <select> element. Her code worked, but being new to JavaScript, she had built the component in jQuery and had asked me to help optimize it.

While not replicating the code exactly, I’ve created the following example to showcase the type of UI component she was trying to create:

[code language="html"]

Option 1 Content

...

Option 2 Content

...

Option 3 Content

...

[/code]

After optimizing it a bit, here is the jQuery we ended up using to toggle the display state of the selected content block.

[code language="javascript"] $(function() { $('.jqueryOptions').hide(); $('#choose').change(function() { $('.jqueryOptions').slideUp(); $('.jqueryOptions').removeClass('current-opt'); $("." + $(this).val()).slideDown(); $("." + $(this).val()).addClass('current-opt'); }); }); [/code]

So what’s going on here?

The above jQuery function looks for all the content blocks that have a class of ‘jqueryOptions’ and hides them by default.

Then when a user changes the selected option of the select input (which has an ID of ‘choose’), the function closes any potentially open content blocks using jQuery’s .slideUp() method and then opens the selected option with slideDown(). It does this by taking the value of the selected option (referenced as this) and referencing the element with the class name that matches the value in “this”.

Continue reading %A Content-switching Component Built 3 Ways: jQuery, JS, CSS%

Flux (rss): http://feeds.feedburner.com/Jquery4u?format=xml