Help - Search - Members - Calendar
Full Version: CSS to open links in new window
Movable Type Community Forum > Additional Resources > Tips and Tricks
aishel
Is there a way of editing my stylesheet so that all offsite links in my blog open in a new window?

Thanks
kindle9
If there's a super easy way of doing this through css, I don't know of it. But then again I am nowhere near css-savvy. Here's what I do with all my links:

[a href="http://blahblahblah.com" target="new"]blahblahblah[/a]

It's the 'target="new"' bit that will open the link up into a different window.
aishel
Right, that I know, but its so annoying to have to always add in the target=_blank tag. If there could be a way of doing it via CSS, it would make life so easy.
LisaJill
It can't be done via css; css is for styling.

It can be done via javascript, base targets, all sorts of other things. Do a search for "open links in new window" or something similar, you should get pages of responses.
aishel
Thank you, I should have realized that it wasn't a CSS thing.

If anyone is curious about the code, here it is, and it does seem to work:

CODE
<script language="JavaScript1.2">
<!--

//Open offsite links in new window option- By Jessica Hammer
//Heavily modified by Dynamic Drive
//Visit http://www.dynamicdrive.com for this script

//1)Enter domains to be EXCLUDED from opening in new window:
var excludedomains=["dynamicdrive.com", "javascriptkit.com"]

//2)Automatically open offsite links in new window? (1=yes, 0 will render a checkbox for manual selection)
var auto=1

var excludedomains=excludedomains.join("|")
rexcludedomains=new RegExp(excludedomains, "i")

if (!auto)
document.write('<form name="targetmain"><input type="checkbox" name="targetnew" checked onClick="dynamiclink()">Open off-site links in new window</form>')

function dynamiclink(){

if (auto||(!auto&&document.targetmain.targetnew.checked)){
for (i=0; i<=(document.links.length-1); i++) {
if (document.links[i].hostname.search(rexcludedomains)==-1&&document.links[i].href.indexOf("http:")!=-1)
document.links[i].target="_blank"
}
}
else
for (i=0; i<=(document.links.length-1); i++) {
if (document.links[i].hostname.indexOf(mydomain)==-1)
document.links[i].target=""
}
}

if (auto)
window.onload=dynamiclink

// -->
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.