Close

Home » Posts tagged 'jQuery'

Posts Tagged ‘jQuery’

July 5th, 2010

External Links New Window

Post Image

Open All External Links in a New Browser Window

Expanding on the post about XHTML valid target post.

Lets make this a bit automated using jQuery to search for external links and add a class named external.
As before, these links will be XHTML valid.
Then from the post we are expanding on these links will be automatically opened in a new window.

To start we need to load jQuery in our site, quick and simple we will load it from Google.

1

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

Moving on to the code needed for our task,
The Full Code, I will explain following the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

jQuery(document).ready(function(){
	//Process links to check if they are internal or external
	var start = "[href*='";
	var local = 'http://localhost/';
	var urlcheck = start + local + "']";
 
	jQuery("a[href^='http:']").not(urlcheck).addClass('external');
 
	//External links should now have a class added to them, lets process this classes action
	jQuery(function(){
	      jQuery('a.external').click(function(){
			window.open(this.href);
			return false;
	      });
	  });
});

The line that MUST BE CHANGED

1

var local = 'http://localhost/';

The http://localhost/ needs to be changed to the URL of your site.
For example, here it would be http://valid-webs.com/

It gets added to the urlcheck variable and used for checking all links against with in the viewed page.
Then the search happens in this line

1

jQuery("a[href^='http:']").not(urlcheck).addClass('external');

If any links in the page do not have the URL var local they will have the external class added to them.

Then the click function is added to the class external the same as in the original post.

1
2
3
4
5
6

jQuery(function(){
    jQuery('a.external').click(function(){
        window.open(this.href);
        return false;
    });
});

From that point on all external links with in the site will open in a new browser window.

Tags: , ,
Posted in jQuery | No Comments »

December 11th, 2009

jQuery Ajax loading image

Post Image

Well I noticed lack of instruction on using a loading image when you load something via Ajax.
So I am going to show you how, using jQuery.
First thing is you will need a loading image similar to this

If you do not have one there is an excellent site to generate all popular Ajax loading animate gifs in any color HERE.
The way it is loaded is like this,

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function(){
    //Click function for the item you are loading
    $("#id_to_click").click(function(){
         //Stuff to do when clicked
         //Add your animated loading image before you load the content
         $("#content_id_to_load").empty().html('<img src="image_path/loading.gif" alt="" />');
 
         $("#content_id_to_load").load("new_page.html", function () {
		//Some more stuff to happen here when your Ajax item is loaded
 
         });
    });
});

I’m sure there are 101 ways to do this, so here is 102 :) .

Tags: , ,
Posted in jQuery | No Comments »

December 1st, 2009

XHTML valid target

This version uses jQuery which I use on a lot of projects.
The simplest use without downloading anything is this.
Before your closing head tag,

</head>

Add

1
2
3
4
5
6
7
8
9

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
$(document).ready(function(){
	//new window method for external links
	$('a.external').click(function(){
		window.open(this.href);
 
		return false;
	});
});

To make a link open in a new tab, just add class=”external” to the link.
Example

1

<a class="external" href="http://your_url.com/">Link</a>

New links with that class will now open in a new browser window or tab and be XHTML strict compliant.
Example link

Tags: , ,
Posted in jQuery | 1 Comment »