jQuery: Opening Links under current window?

JavaScript
1

Hi,

I’m looking at creating a list of links that when each one is clicked, opens a new window/tab under the current window, the reason for this is that i’m using jQuery .toggle to switch content upon click of a link to reveal a message. They have to read this message before going to the new window, which is why it must be opened below the current window (Hope all that makes sense!).

I’ve got the content switching part done, which is great, but having some trouble coding the “New Window opening under the current window”

Thw following code (When used with jQuery) opens up a new window under the current window (Yay!) - BUT - this happens on page load (Arghhhh) - so I’m wondering if any jQuery guru’s out there can help me take this working functionality and simply apply it to the links, and only apply it to link with a certain class e.g. class=“newwindow”


$(document).ready(function() {
							   
		var link = $(this).attr('href');
				var mer_window = window.open(link, '_blank', 'toolbar=1,location=1,directories=1,scrollbars=1,resizable=1,status=1,menubar=1');
				 if (typeof mer_window === "object")
				 {
				 	mer_window.blur();
				 }
				
				 return false;
		 	});

As potentially there could be 1000’s of links, it has to be portable, so can’t literally hard code the physical links within the JS.

So ideally the XHTML code would be:

<a href=“http://www.sitepoint.com” class=“newwindow” target=“_blank”>Visit Sitepoint</a>
<a href=“http://www.sitepoint.com/forums/” class=“newwindow” target=“_blank”>Visit Sitepoint Forums</a>
etc etc…

REALLY hope someone can assist :slight_smile:

2

Hey,

You need to put the code in a click event so that it runs when a user interacts with your links.

For example:

$(document).ready(function() {

  $('a.newwindow').click(function() {
     var mer_window = window.open(link, '_blank','toolbar=1,location=1,directories=1,scrollbars=1,resizable=1,status=1,menubar=1');
     var link = $(this).attr('href');

     if (typeof mer_window === "object")
	{
	      mer_window.blur();
	}
				
	 return false;
  });

});
3

Hi Simon,

Wow, that worked perfectly, it now only happens when a link is clicked!!

I’ve noticed just one thing now, instead of it opening the link e.g. sitepoint.com - it infact opens a page with “undefined” in the address bar… so we are half way there!

Perhaps it’s something to do with how the link is defined?

var mer_window = window.open(link, '_blank','toolbar=1,location=1,directories=1,scrollbars=1,resizable=1,status=1,menubar=1');
     var link = $(this).attr('href');

??

Though i’m not sure myself, any ideas here please?

Thanks again.

4

Right okay, that’s my bad. It’s because you’re defining the variable ‘link’ after making a call to window.open so it doesn’t exist at that point.

Just need to swap them round like so:

 $(document).ready(function() {

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

     var link = $(this).attr('href');
     var mer_window = window.open(link, '_blank','toolbar=1,location=1,directories=1,scrollbars=1,resizable=1,status=1,menubar=1');

     if (typeof mer_window === "object")
	{
	      mer_window.blur();
	}
				
	 return false;
  });

});

See if that helps

5

Oh My God!!!

It WORKS!! - IT WORKS!!!

I can’t thank you enough for that Simon, It’s working perfectly with my jQuery .toggle content switcher as well, thank you Soooooooo much

Sitepoint - Give this guy an award!!!