jQuery(document).ready(function(){
jQuery("a[href*='http://']:not([href*='http://yourdomain.com'])").attr("target","_blank");
jQuery("a[href*='https://']:not([href*='https://yourdomain.com'])").attr("target","_blank");
});

Updated to add: Here is a modification in case you want to allow links to subdomains to open in the same window…

jQuery("a[href*='http://']:not([href*='http://yourdomain.com'])").not("[href^='http://subdomain.yourdomain.com']").attr("target","_blank");

Another update Here is another modification that will work in a PHP page and automatically enter the current domain in:

jQuery(document).ready(function(){
jQuery("a[href*='http://']:not([href*='http://<?php echo $_SERVER['HTTP_HOST']; ?>'])").attr("target","_blank");
jQuery("a[href*='https://']:not([href*='https://<?php echo $_SERVER['HTTP_HOST']; ?>'])").attr("target","_blank");
});

Related posts:

1. WordPress emails being sent by {username}@box###.bluehost.com (fix) If you are hosted on Bluehost and you're using WordPress,...

Related posts brought to you by Yet Another Related Posts Plugin.

$(document).ready(function() {
$("table.striped tr:nth-child(even)").addClass("altrow");
});

Then, just add class="striped" to your table tag, and jquery will automatically apply add the class "altrow" to every other row. (If you want to change which row it starts with – change 'even' to 'odd' in the code above).

Then just include a style for your altrow:

table.striped tr.altrow td {
background-color: #ccc;
}

And to think I used to do that manually. OY!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

There are a lot of carousel scripts out there, and there is a scrolling plugin that I had been counting on to help me create what I needed – but to be honest, either I couldn't get those scripts to work the way I wanted them to, or I couldn't get them to work AT ALL. I spent a few frustrating days fighting with the plugins, when I finally threw in the towel. I knew what I wanted to do, and figured I'd be better off hand coding specifically what I needed instead of retrofitting a pre-made plugin or script. It turned out to be less time consuming, and in the end I got exactly what I wanted.

So while this script was for a specific purpose, I thought I would put it out here anyway on the chance that it might work for or help someone else. It's probably possible to "package it up" into a more modular plugin.

So first here is the very rough, proof of concept/demo. (no design on that page – just wanted to show how the script works)

Here you can download all the files (except the photos – I originally grabbed them from stock.xchng)

I'll walk through just a few of the details of how the HTML needs to be structured in order to get the script to work – but the files in the zip are well commented and should explain the rest.

One important trick with this script is that there are some "naming conventions" that it relies on. Each row of photos is setup as a unordered list. The ID of that unordered list is used as a base for naming other related elements. So for example – the first row is named with and ID of "row1" – I use that base for the ID of a div that contains links to the images in that row. I want this div to only appear when that row1 is being shown. So the ID of the div needs to be created like ROW BASE NAME + "-nav". So, specifically: "row1-nav".

You'll notice in the HTML when I link to rows or specific images in the row – I didn't put the id of the image inside the "href" element. I actually repurposed the "rel" attribute and put the image I wanted to display in the carousel in that. (The script didn't work quite right if I put the row name in the href value).

Another "repurpose" I've done is for use with the delayed image loading. In each of the LI element, I "store" the path to the image that will be loaded inside the LI element in the "title" tag.

I've pulled out as many "variables" as I could in the javascript.js – row names, image names, classnames – and explained what they are and how they relate to the HTML in the comments to make reusing the code as easy as possible.

So an important note, I don't claim this to be an easy to use plugin. If you're going to use this script, you do have to some level of understanding of jquery, javascript, html. I also can't promise too much (un-paid) support. If you want to use it, you're welcome to it – please leave the credit lines in place – I spent quite a bit of time getting this to work. And for my own curiosity, I'd love it if you came back here and posted a link to where you're using it. If you can't get it to work, you're welcome to post a question here, but I can't guarantee I'll be able to help out.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

For a project I'm going to be working on, I needed to create a navigation piece that had different panes scrolling/sliding in from the right depending on what item you clicked. I've seen lots of options for vertical accordions. Not as many, but a few, options for horizontal accordions. My situation was unique in that the click was not near or part of the scrolling panes. And it should disappear completely out of view if not the current pane so that if clicked again, it would again animate in. But if already in view – I wanted it to stay until the new pane coming in covered it completely.

Went through a few versions of this, and finally I have something I'm satisfied with. Here's the demo.

View source on that page to see the full html and jquery code. Now I'll walk you through what my logic was…

var lastpane;
var href;
var zcount = 2;
var inprogress = false;

That's just calling out some variables we'll be using in various iterations. "href" will be used to hold a reference to the current element/pane. "zcount" will make sure the current pane always has the highest z-index. "inprogress" will keep track of whether there is currently a pane being animated or not and will hold the other clicks/animations until the current pane animation is complete

$('a').click(function(){

Obviously, if this gets used in something other than a proof of concept, you'll probably have to be more specific about WHICH 'a' – ie – give the links you want to use for this a style like class="paneslider" and then change that to $('a.paneslider')… etc. In any case, the above just says, run the following whenever a link is clicked.

if (!inprogress && $(this).attr('title') != lastpane) {

Here I'm checking to make sure that an animation isn't already in progress, and the currently clicked link does not match the pane currently in view. (Which would have been defined as "lastpane"

inprogress = true;
zcount = zcount+1;

Set in progress to true right away so that we don't have conflicting animations. And add 1 to zcount (z-index), which will make the current pane appear above any other that is visible.

$(lastpane).css("z-index","1");

Give the last element pane shown (defined as "lastpane") a z-index of 1 to make sure it appears below the pane we want to have move across the screen.

var href = $(this).attr('href');

Now we'll redefine href as the current pane we want to animate. (This, by the way is set in the html – in the "a" tag using the "title" attribute).

$(href).css("left","800px");
$(href).css("z-index",zcount);

Make sure that the current pane is starting out completely out of view, and then giving it the highest z-index.

$(href).animate({"left": "0"}, 2000, function() {

Now we start our animation. Move it across to absolute position of 0 in 2000 milliseconds. As well we use a callback function to do the following after the pane finished moving.

$(lastpane).css("left","800px");
lastpane = href;
inprogress = false;

We move the pane that is now hidden under the current pane back to the "starting" position – and then we redefine "lastpane" with the pane that is now currently visible. And now that everything else is done, "inprogress" gets set back to false so we're open to run another pane across.

Then the rest of the code is all closing brackets etc.

Just for fun, I have another version of the sliding pane thing using the "easing plugin". Here's the demo using a bounce as it comes in.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

1) Each tab has four "states" – Off, Off (with right tab on), On, On (with right tab on). I combined each of these four states in the one image for each tab. So it looks like this:

2) The HTML is pretty simple and looks like this:

<div id="navbar">
<ul>
<li id="nav_home"><a href="#"><span>Home</span></a></li>
<li id="nav_about"><a href="#"><span>About Us</span></a></li>
<li id="nav_products" class="right"><a href="#"><span>Products</span></a></li>
<li id="nav_sales" class="current"><a href="#"><span>Sales Reps</span></a></li>
<li id="nav_contact"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

Notice that when one of the tabs is set as the "current" tab – we also need to define the tab before it with a class of "right" (meaning that the tab to the right of this one is set as "on")

3) Then we define the various states in CSS. In this case, all the tabs are the same width and height:

#navbar li {
float: left;
}
#navbar li a {
display: block;
height: 29px;
width: 91px;
}

Hide the text with css since we're using images for the tabs:

#navbar li a span {
margin: 0 0 0 -100000px;
}

Define the image to be used for each tab:

#nav_home a {
background:url(images/nav_home.gif) top left no-repeat;
}
#nav_about a {
background:url(images/nav_about.gif) top left no-repeat;
}
#nav_products a {
background:url(images/nav_products.gif) top left no-repeat;
}
#nav_sales a {
background:url(images/nav_sales.gif) top left no-repeat;
}
#nav_contact a {
background:url(images/nav_contact.gif) top left no-repeat;
}

4) I'm going to skip over the rest of the class definitions and move to the jquery part – because I think it will make more sense to see how the classes are being defined if you see what class I'm applying when and where.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready( function() {
j('#nav_about a').hover(function() {
j('#nav_home a').addClass("left");
}, function() {
j('#nav_home a').removeClass("left");
});
j('#nav_products a').hover(function() {
j('#nav_about a').addClass("left");
}, function() {
j('#nav_about a').removeClass("left");
});
j('#nav_sales a').hover(function() {
j('#nav_products a').addClass("left");
}, function() {
j('#nav_products a').removeClass("left");
});
j('#nav_contact a').hover(function() {
j('#nav_sales a').addClass("left");
}, function() {
j('#nav_sales a').removeClass("left");
});
});
</script>

So what I'm doing here is, anytime I mouseover a tab, I'm adding the class "left" to the <a> tag in the tab in front of the one my mouse is on.

So if the tab in front of the one my mouse is on is "off" – then we need to change that tab to state #2 (Off – with the tab next to it on). If that tab has the class "current" applied to the li tag – then we need to move that tab to state #4 – (On – with the tab next to it on).

4) So on to the various states with css….

When hovering – we go to the "on" state – (in this case, when tab is current, it lookes the same as when we mouse over it.) So the most basic state – state #3: Whether the tab is current, or hovering – move to that "Third" state: On – with the tab next door off.
#navbar li.current a,
#navbar a:hover {
background-position: 0 -58px;
}

This is for state #2: Off – with the tab next to us as On. (the ".right" class applied to the li tag means that the tab in front is "current")
#navbar li.right a,
#navbar li a.left {
background-position: 0 -29px;
}

This is for state #4 – On with the tab next to us as on.
#navbar li.right a:hover,
#navbar li.current a.left {
background-position: 0 -87px;
}

One thing to note – the last tab really only has two states – because there is no tab in front of it – but to keep things simple in the code and css – I just made the image with the extra versions. This way it could have the same styles applied to it – without having to make a special case for it.

Here are some more demos:

No tab set as current

Home tab set as current (no "right" class needs to be applied – since home is the first tab)

Last tab set as current

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

$.validator.addMethod("atleastonedigit", function(pass) {
if (pass == "") {
return true;
}
return ((/[0-9]+/).test(pass));
}, "This field must contain at least one number");

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

So one thing I am now using jquery regularly for is form validation. Previously, form validation used to mean a lot of script writing, not to mention a fair amount of dread.

Now it's quite painless.

My current usage of that plugin is pretty basic until I get a better handle of it. But one thing that I have been requested a number of times, is to add validation for a phone number – which is not included in that plugin. I'm not sure this is the "right" or best way to do it – but it does work.

The functions are basically the same as those provided here with some minor modifications and altered to be used with the jquery plugin.

First of course you include the jquery javascript file:
<script language="javascript" type="text/javascript" src="/js/jquery.min.js"></script>

Then the validation plugin:
<script type="text/javascript" src="/js/jquery.validate.pack.js"></script>

Then you add the function to check the phone number:
<script type="text/javascript">
$.validator.addMethod("phone", function(phone_number, element) {
var digits = "0123456789";
var phoneNumberDelimiters = "()- ext.";
var validWorldPhoneChars = phoneNumberDelimiters + "+";
var minDigitsInIPhoneNumber = 10;
s=stripCharsInBag(phone_number,validWorldPhoneChars);
return this.optional(element) || isInteger(s) && s.length >= minDigitsInIPhoneNumber;
}, "Please enter a valid phone number");

Some "helper" functions:
function isInteger(s)
{ var i;
for (i = 0; i < s.length; i++)
{
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}
function stripCharsInBag(s, bag)
{ var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++)
{
// Check that current character isn't whitespace.
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}

Then the line that makes the jquery run:
$(document).ready(function() {
$("#myform").validate();
});
</script>

To use the jquery validation plugin – I was just adding "required" as a class to those fields that were required. Like this:
<input type="text" name="FirstName" class="required" />

You can check email structure by also adding the class "email".
<input type="text" name="EmailAddress" class="required email" />

And now, using the code above, if you add the class "phone" – it will check a phone number.
<input type="text" name="PhoneNumber" class="required phone" />

(My code above allows for some additional characters beyond just numbers – so that it will accept parens around the area code – dashes or periods between the numbers and "e" "x" "t" characters as well – in case someone needs to include an extension.)

Typical disclaimer – like I said – I'm still a nub at jquery. There may be a better/easier way to do the above, so as always feel free to chime in if you know what that better/easier way is…

Updated 5/5/08 I do see a "phone" method in the "additional-methods.js" file… but I needed it do things a little differently… (like allowing extension numbers etc.)

Updated 5/29/08 Had some issues with the method not allowing phone fields to be optional and only checking the values if something was entered (when optional). Fixed that now.

Updated 7/1/08 As JT noted in the comments with regex this can be simplified. JT provided the following code:
function isValidPhoneNumber(ph) {
if (ph == null) {
return false;
}
var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
// 10 is the minimum number of numbers required
return ((/\d{10,}/i).test(stripped));
}

So to update the jquery:
$.validator.addMethod("phone", function(ph, element) {
if (ph == null) {
return false;
}
var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
// 10 is the minimum number of numbers required
return ((/\d{10,}/i).test(stripped));
}, "Please enter a valid phone number");

And then you can loose the other "helper" functions. (Thanks JT!!)

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

for (var i=0; i < document.formname.dropdownboxname.length; i++) {
if (document.formname.dropdownboxname[i].value == "value") {
document.formname.dropdownboxname[i].selected = true;
}
}

Update Posting my comment in the main post – because this is the way to do it right: Use jQuery because it rules.

Use this plugin:
http://www.texotela.co.uk/code/jquery/select/

And this code:
$(document).ready(function() {
$(”#selectboxname”).selectOptions(”The Select Value”, true);
});

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.