open external links in a new tab(_blank)
place an image next to external links

Example Use

Options

blank – if true it will change the links to open in a new tab by adding target=”_blank”. This defaults to true.

path – if set this is the (From the site root) to the image to show next to external links. defaults to ” which will not show an image.

ignore – this is the class name that can be put on a link so that the plugin will not add the image or target changes.

License

WTFPT (http://en.wikipedia.org/wiki/WTFPL) = “Do What The Fuck You Want To Public License”.

Source:

On Github

Full

(function($){
	$.fn.extTab = function(params) {
        var defaults = {
            blank:true,
            path:'',
            ignore:''
        };
        params = $.extend(defaults, params);
        var t = $(this).find("a[href^='http:']").not("[href*='" + document.location.host + "']");
        if(params.ignore != '') {
        	t = t.not("[class*='" + params.ignore + "']");
        }
    	if(params.blank) {
    		t.attr( "target", "_blank" );
    	}
    	if(params.path != '') {
    		t.append(' <img src="http://' + document.location.host + params.path + '">');
    	}
    };
})(jQuery);

Minified

(function(c){c.fn.extTab=function(a){var a=c.extend({blank:!0,path:"",ignore:""},a),b=c(this).find("a[href^='http:']").not("[href*='"+document.location.host+"']");a.ignore!=""&&(b=b.not("[class*='"+a.ignore+"']"));a.blank&&b.attr("target","_blank");a.path!=""&&b.append(' <img src="http://'+document.location.host+a.path+'">')}})(jQuery);

Icons

Just an example of some icons to use

The videos were provided in a .mov format so being lazy I tried just sticking those videos in to chrome and it worked… sorta.

<video width=800 height=600><source src=video.mov></video>

Sound Played Every Other Load

Very quickly the problems started occurring. First off the sound stopped playing every other time the video was played.

That seems to be a bug and to fix it I had to  remove the old video tag and replace it every time I played a video.

Video Load Performance  Problems

Then I moved from the short demo videos (10 secs) to the full 3 min videos and right off the bat, I saw huge performance delays. So slow that it appeared the videos would not show and the Task Manager did not show activity. Perhaps there is a file max size I have missed?

Now faced with this major performance problem I set out to see which video format worked fastest on which browser, since I had the luxury of picking a browser.

I converted the video into the .ogv, .mp4 (H.264) and .webm using the  Miro Video Converter (Which is REALLY easy and simple). It gave me the following file sizes.

• .mov – 631,964KB (Original File)
• .mp4 – 210,954KB
• .mp4 – 66,280KB*
• .ogv – 144,690KB
• .webm – 25,315KB

*I ended up using the Adobe Media Encoder to reconvert the second (smaller) .mp4 because it gave better compression and wanted to see what kind of difference it made.

Using the following 3 browsers:

• Firefox 3.6.12
• Chrome 7.0.517.44
• Opera 10.63

Heres how each format worked in them.

Firefox:

• .mov, .mp4 and .webm – do not run
• .ogv – ran but was very slow to start, after that the video was smooth.

Chrome:

• .mov – would not run
• .mp4 – would not run
• .mp4 (smaller) – ran smoothly but took a minute to appear
• .ogv – seems to be sized differently, runs really jagged, and just overall unacceptable.
• .webm – Extremely responsive, but the quality was plain awful.

Opera:

• .mov, .mp4 – does not run
• .ogv – Responsive and smooth.
• .webm – Extremely responsive, but the quality was awful. (same as chromes webm)

Before I started I assumed Chrome/WebM would be the best overall bet, just from the chatter it has been creating. But it seems that I was wrong.

Overall the .ogv on Opera seemed to be the best option.

It does seem that there is a very apparent association between file-size and initial load time. (bandwidth ignored) But nothing I could find written on the matter, or how to improve it. (@CoryMathews if you know)

After all this it still seems like the HTML5 video tag is far from ready, but its a hell of a lot nicer to use then flash.

Great HTML5 Video Tag Articles

• Introduction to HTML5 Video – dev.opera.com
• Everything you need to know about HTML5 Video and Audio 2 – dev.opera.com
• HTML5 Video – diveintohtml5.org

Sample Source  Code

Page Structure-ish

...
<script src="jquery.js"></script>
<style>
  #VideoShow { display:none; top:0; left:0; }
  #closeVid { position:absolute; top:0;z-index:5; display:none; }
</style>
...
<div id="But1"></div>
<div id="But2"></div>
...
<div id='closeVid'><img src='close.jpg'></div>
<div id="VideoShow"></div>
...
$("#But1").click(function(){ playVideo("video.mov"); });
$("#But2").click(function(){ playVideo("video.mp4");  });

function playVideo(videoName) {
  $("#VideoShow").fadeIn(300).html("<video width=800 height=600><source src=\"" + videoName + "\"'></video>");
  $("#closeVid").fadeIn(300);
  var Vid = document.getElementsByTagName('video')[0];
  Vid.play();
  Vid.addEventListener('ended', function(e) {
    closeVideo();
  }, false);
}

function closeVideo() {
  var Vid = document.getElementsByTagName('video')[0];
  Vid.removeEventListener('ended', arguments.callee, false);
  $("#VideoShow").fadeOut(300).html("");
  $("#closeVid").fadeOut(100)
}

<script type="text/javascript">
$(function(){
$("a[href^='http:']").not("[href*=EXAMPLE.com']").attr({ target: "_blank" });
});
</script>

You could also use this same technique to add a small friendly image next to these links  notifying the user they are about to leave the site.

<script type="text/javascript">
$(function(){
$("a[href^='http:']").not("[href*=EXAMPLE.com']").attr({ target: "_blank" }).append(" <img src=\"outLink.jpg\">");
});
</script>

Basic usage of .animate()

Just for good measure here is the basic usage of the .animate() function. I won’t go to far into this, check out the jQuery API for more.

$("#SomeID").animate({ width: '50px' }, { duration: 500 });

This animates the id SomeID to a width of 50px over 500 milliseconds with a basic linear slide transition.

The “animation” queue. (or so I will call it)

When jquery runs the .animate() function it runs it along side other javascript. This allows me to add multiple animations to a queue and then run one after another instead of all at the same time. For example

$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });
$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });

This code will animate an id from a width of 50px to 150px to 50px to 150px one after another so I see a nice smooth slide from one stage to the next.

Now this code.

$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });
$("#SomeID").animate({ width: '50px' }, { duration: 500 });
$("#SomeID").animate({ width: '150px' }, { duration: 500 });
alert('hi');

Notice the alert appears to run first. This got me until I stopped to really think about the animation queue.

Take a look at this example from learning jquery

$(document).ready(function() {
  $('ul.anim_queue_example1 a').hover(function() {
    $(this).animate({ left: 20 }, 'fast');
  }, function() {
    $(this).animate({ left: 0 }, 'fast');
  });
});

This is a simple hover effect for a list menu. The problem may not be easily spotted at first but try it out. Running your mouse over the menu quickly will cause the queue to fill up with animations and continue running them long after you stop. More then likely not the desired effect.

Brandon Aaron was easily able to fix this by adding a simple .stop() to the functions.

This now gives you this code

$(document).ready(function() {
  $('ul.anim_queue_example2 a').hover(function() {
    $(this).stop().animate({ left: 20 }, 'fast');
  }, function() {
    $(this).stop().animate({ left: 0 }, 'fast');
  });
});

Adding the .stop() function will stop the current animation in the queue before running the next animation and will fix the problem.

Ok, now for the example problem that does not get fixed by calling .stop().

For the next example I am going to be using thepause plugin by Johnathan Howard and posted below

$.fn.pause = function(milli) {
  milli = milli || 1000;
  return this.queue("fx",function(){
    var self = this;
    setTimeout(function(){$.dequeue(self);},milli);
  });
};

Now check out the following:

$("#SomeID, #SomeID2").animate({ width: '50px' }, { duration: 500 }).pause(350);
$("#SomeID, #SomeID2").animate({ width: '150px' }, { duration: 500 });
$("#SomeID, #SomeID2").animate({ width: '50px' }, { duration: 500 }).pause(350);
$("#SomeID, #SomeID2").animate({ width: '150px' }, { duration: 500 });
$("#someID3").hover(function() {
$("#SomeID , #SomeID2").stop().height(50).width(50).animate({ width: '150px' }, 500);
} , function() {
$("#SomeID ").stop().animate({ width: '50px' }, 200);
$("#SomeID2").stop().animate({ width: '50px' }, 200);
});

This example will stop the current animation but when that short pause ends it will continue with the queue and mess with the desired animated effects. To stop this problem is actually pretty easy. To solve it change .stop() to .stop(true, false). This is because in .stop(true, false) the first true is the clearQueue parameter. This will clear all queued actions for the object. Meaning that all the future animations, once delayed, are now removed and will not interfere with the hover event.

More problems

1 more problem I have not looked into solving put probably will have to eventually is the problem of keeping those animations until after the hover is finished. Not every time will I want to completely clear the queue. I could see it being likely that I would want to do something more like the following:

$("#someID3").hover(function() {
$("#SomeID , #SomeID2").pauseQueue().animate({ width: '150px' }, 500);
} , function() {
$("#SomeID , #SomeID2").stop().animate({ width: '50px' }, 200).startQueue();
});

You may be loading the jQuery library like so:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

Well if you are then you are doing it wrong.

It was ySlow that told me why. Try changing that one line to the following and take another look at ySlow.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Notice the difference? Google is now gzipping the library when its called from googleapis.com instead of googlecode.com thus lowering the files size drastically.

For those of us that are to lazy to try it out here is the result with the googleapis.com loaded instead of the googlecode.com.

You can see instead of downloading 57.2kb that you would with the googlecode file the gzip compression brings it down to 19kb.

The same rule would apply for other libraries that are hosted by google. such as mootools, or even the jQuery UI.

So next time you go to include the library make sure to do it the right way.

Now I just need to switch all the sites I have that are using it.. such as this one.

You can view live demos on iSearchNotes.com or at the plug-in webpage.

In order to create our rounded corners you will of course first need jQuery. If you do not already have jQuery hurry up and go download it at jquery.com. I will wait.

Waiting…

Ok so now you will also need to download the rounded corners plug-in. This small jQuery script can be downloaded by saving this file jquery.corner.js

Now we have all that will will need to round those corners. On the page you wish to have the rounded corners on you must add includes to both javascript files.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

Now we must tell jQuery which areas of the layout to round.

<script type="text/javascript">
$(function(){
$("#content").corner()
});
</script>

<div id="content">Hello this would have rounded corners</div>

This simply uses jQuery’s selectors to select the id content and rounds all 4 of that divs corners by the default amount.

This plug-in can do so much more then this example. You can pick which corners to round, how much to round by, how to round, and much, much, more. Instead of listing them all check out the plug-in page to see more uses of it. (there are some pretty cool ones near the bottom of the page)

There are many different ways to use it but some of the more common uses would be:

	$("#content").corner()
	$("#content").corner("bottom");
	$("#content").corner("top");

You could always avoid javascript altogether and do it the hard way using css.