New-Window Links in a Standards-Compliant World

[Jason Donald]

This forum thread discusses the article 'New-Window Links in a Standards-Compliant World' by Kevin Yank.

"On the surface, the latest (X)HTML standards seem to frown upon links that open in a new window with target=_blank. But with a little creativity, new-window links can be done in a standards-compliant way, with minimum hassle."

[1magic]

This is great hint - how to use a JavaScript to open links in new window.

But why waste your time?
Is really standart compliancy so important?

[Bill Posters]

http://www.sitepointforums.com/showt...threadid=98703

[ant1832]

But what about people who disable javascript?

[Bill Posters]

Originally Posted by ant1832

But what about people who disable javascript?

Originally Posted by Bill Posters

http://www.sitepointforums.com/showt...threadid=98703

Specifically: http://www.sitepointforums.com/showt...049#post702049

[ant1832]

well that answers it...thanks billl

[hafrancis]

InInteresting technique, Kevin. But how can one specify the size of the new window?

[vgarcia]

Originally Posted by hafrancis

InInteresting technique, Kevin. But how can one specify the size of the new window?

<a href="mypage.html" 
onclick="window.open(this.href, 'newWin', 'width=300, height=450');">My
 Link</a>

[redux]

Originally Posted by vgarcia

<a href="mypage.html" 
onclick="window.open(this.href, 'newWin', 'width=300, height=450');">My
 Link</a>

i'd add return false as well...

<a href="mypage.html" 
onclick="window.open(this.href, 'newWin', 'width=300, height=450'); return false;">My
 Link</a>

[vgarcia]

Originally Posted by redux

i'd add return false as well...

<a href="mypage.html" 
onclick="window.open(this.href, 'newWin', 'width=300, height=450'); return false;">My
 Link</a>

Uh, yeah, lapse in judgement on my part. Otherwise, the link will open in both the original and the new window. Thanks redux!

[terts]

How do you call the smallerwindow using the rel="external" script?

I tried to just replace the "_blank" with this code:
* * *anchor.target = OpenWin = this.open(url, "CtrlWindow", "left=0,top=75,height=550,width=500,toolbar=yes,menubar=yes,location=no,scroll bars=yes,resizable=yes");
OpenWin.focus();

We have been using this code for some time now on our site. Problem is we call the script using the onClick attribute, which does not validate in XML transitional 1.0.

any ideas?
Thanks!
Terri

[Optimum]

Keep in mind popups are great to use AT TIMES but more and more people are purchasing or downloading for free, popup blocker software. Eg.

"EarthLink rolled out Pop-Up Blocker in August. EarthLink provided Pop-Up Blocker for free download to its 4.7 million members. The company does not release the number of users who have downloaded the software, estimating only that it is "well into the six figures." "

I think anyway you get it done is fine, its just how much people will be blocking this window that should be a major concern.

People frown on anything they get their minds on. Microwaves were frowned upon once too. Can't make everyone happy.

[terts]

We do not use it as a popup, per se. When someone is going to be leaving our site (outside links), then we open a smaller window so they can navigate on that site. We use this instead of _blank so that the new window does not cover the original window.

[M. Johansson]

Originally Posted by 1magic

But why waste your time?
Is really standart compliancy so important?

HEATHEN

[jadesailor]

I was making a XHTML compliant site and found that _target was not supported.
The solution here is fine, but I got a problem with a form I needed (well, the client "needed") to submit in a new window.
I guess you should do the same thing as with "a" tags but instead check whether is a "form" tag?
I am surprised that this is the only solution to a widely use atribute.

[vgarcia]

Originally Posted by jadesailor

I was making a XHTML compliant site and found that _target was not supported.
The solution here is fine, but I got a problem with a form I needed (well, the client "needed") to submit in a new window.
I guess you should do the same thing as with "a" tags but instead check whether is a "form" tag?
I am surprised that this is the only solution to a widely use atribute.

If you really need the "target" attribute to open links in a new window, then drop down to XHTML Transitional rather than Strict. It's as valid a standard as any still .

[jofa]

Originally Posted by jadesailor

The solution here is fine, but I got a problem with a form I needed (well, the client "needed") to submit in a new window.
I guess you should do the same thing as with "a" tags but instead check whether is a "form" tag?

I added this to the externalLinks() function:

	var forms = document.getElementsByTagName("form"); 
	for(var i = 0; i < forms.length; i++) 
	{ 
		var form = forms[i]; 
		if(form.getAttribute("action").substring(0, 4) == "http") 
		{
			form.target = "_blank"; 
		}
	}

Worked for me, because the only forms I want to submit to a new window are the ones with an "external" action, i.e. action begins with "http://..."

[jadesailor]

Yeah, that's right, the forms I submit to new windows are external http addresses, so this will work!
Thank you

[Ronin SpoilSpot]

As far as I can see, all the browsers I have available accepts the document.links collection. With it, the code of this article can be made more efficient than with the getElementsByTagName function.

function setTarget() { 
  var refs = [document.links,document.forms];
  for (var refidx in refs) {
    var collection = refs[refidx];
    for (var i=0;i<collection.length;i++) {
      if (collection[i].ref == "external") {
        collection[i].target="_blank"; 
      } 
    }
  }
}

I prefer using the ref attribute to the class attribute, since the class attribute can contain more than one class name. One can still use CSS selectors to match the external links:

  *[ref="external"]:after {content:url(external.png);}

Unsurpricingly, attribute selectors don't work in IE, but the rest of us can use them. I have a rule on the form

  *[target]:after {content: "[" attr(target) "]";}

in my user stylesheet to warn me about target attributes

/RS.

[hurricane.uk]

Originally Posted by terts

We have been using this code for some time now on our site. Problem is we call the script using the onClick attribute, which does not validate in XML transitional 1.0.

Try making it all lower case, so onclick

[billiousness]

Originally Posted by Optimum

Keep in mind popups are great to use AT TIMES but more and more people are purchasing or downloading for free, popup blocker software. Eg.

"EarthLink rolled out Pop-Up Blocker in August. EarthLink provided Pop-Up Blocker for free download to its 4.7 million members. The company does not release the number of users who have downloaded the software, estimating only that it is "well into the six figures." "

I think anyway you get it done is fine, its just how much people will be blocking this window that should be a major concern.

People frown on anything they get their minds on. Microwaves were frowned upon once too. Can't make everyone happy.

this is a little of topic but I always thought(without researching or doing any correctly by just making an assumption) that pop up blocking software only blocked automatic pop ups. I asssumed new window pop-ups that were initiated by links were classed as like "friendly pop ups".

please tell me their friendly and that the blocking software don't block them too...

[hurricane.uk]

Originally Posted by billiousness

please tell me their friendly and that the blocking software don't block them too...

My browser won't block user propagated windows, but my firewall will block some (and seemingly at random, I have that switched off anyway) - so I would say that some popup blockers would/may/can block the friendly kind.

[Bill Posters]

I'm looking for a way to specify that all links present inside an element with a certain id should open in _blank, while the rest of the links on that page open in _self* as per usual.

I don't have access to the <a> tags themselves, but I do have access to the surrounding tag element (in this case a <td>).
I can set an id for the <table>, <tr> or <td> (or can create and id another container such as a <span> or <div> if it somehow makes things easier).

...

<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>

<table id="theseLinks">
  <tr>
    <td> <!-- everything within this cell is included from a 3rd party source -->
      <a href="4.html">4</a>
      <a href="5.html">5</a>
      <a href="6.html">6</a>
    </td>
  </tr>
</table>

<a href="7.html">7</a>
<a href="8.html">8</a>
<a href="9.html">9</a>

...

Basically, links 1-3 and 7-9 should open _self as normal.
Links 4-6 should open open in _blank.

I'm thinking that there may be some way to adapt Yank's method that will allow me to do this.

Anyone able to tell me how?


Big TIA

[jofa]

Do an "Inverse Yank": Give your links the attribute rel="internal", and change the script to

...
if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") != "internal")
     anchor.target = "_blank"; 
...

[Bill Posters]

I'd considered that, but it would mean giving every other link on the page a rel="internal" and thats hardly an efficient way of doing things.

but thx for trying though.


The search continues...