I actually just dropped this block right into a text widget in WordPress and it worked just fine…

The "29950141" is the video id (you can extract that from the URL you'd normally use to embed your vimeo video with)

The "343" and "193" are the width and height of the video we're displaying.

No related posts.

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

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.

With the explosion of web usage over the past decade, the online applications that users have access to have become more sophisticated as each year passes. While 'internet time' is even faster than the proverbial 'dog years', one recent development has radically altered online applications and will continue to do so for some time.

Dubbed 'Ajax', this technology allows for a web application to make asynchronous method calls to perform certain tasks without refreshing the user's browser. To the user, it may appear that the page changes as they use it, or there may be progress indicators such as 'loading' graphics or something similar.

While the technology that allows this to occur isn't actually new, the availability and ubiquity of broadband internet access, along with wider browser support for advanced Javascript programming, has made it extremely common. Here are some specific points that anyone looking into creating Ajax-enabled applications to make sure they aren't just introducing something that happens to be the latest fad.

First, consider how many times your users may have to do something in the application, for example, clicking a button, which normally may cause the entire page to reload. By working to limit those types of actions to Ajax methods, the user's navigation experience will seem faster, as they don't have to wait for the page to refresh.

Sure, there is still some time for the page to update, but showing the user a progress bar or some other similar indicator makes the time seem quicker. It should also be noted that Ajax methods that update small parts of the web page should not just seem faster, however. Since less data is being passed back and forth across the wire to the user's browser, it will actually increase the application's speed.

Consider, however, being careful that trying to do everything in the application within a single screen may not be the best way to go, either. Some screens simply need a different layout in order to make sense to the user. By carefully deciding which navigation elements should be moved to Ajax and which should not, you will improves the accessibility and usability of the entire application.

About the author: James Mowery is a computer geek that writes about technology and related topics. To read more blog posts by him, go to laptop computers.

No related posts.

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

I'm not sure of what other factors played a role (the fact that the element was in a absolute positioned container, or that the immediate container to the flash element was in a float) but I had the call to the swfobject javascript in the BODY tags of the html (not within the head tags). This was apparently causing Firefox to not display the flash. Simply moving the swfobject javascript code within the head tags of the html instantly fixed the problem.

I know I've used swfobject inside the body before – so I'm sure there's something else that contributed to the problem.

No related posts.

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.

This calculator will let you enter in the original width and height of an image (or document, video or whatever). Then you enter the width (or height) of the size you need it scaled to (down or up). And it will tell you what the other side needs to be.

For example: I have an 800×600 image – I need it scaled down to fit in a 256 width area… what height will I need to make it? This tool will answer your question.

Proportional Scaler Calculator

No related posts.

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