This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
July 03, 2008 8:12am
Subscribe [8]#1 / Jul 03, 2008 8:12am
Hi,
Can anybody help me with the following?
I would like a new window to open when an URL is clicked. Please find my code that creates the URL:
<small>Website:</small> <span class="url">{website}</span>I fiddled some with onclick=window.open and target=_blank but somehow I don’t get it right, wrong place or code.
Thanks in advance.
Tammo
#2 / Jul 03, 2008 8:19am
Hi there Tammo,
Not too sure where the code you have shown above is coming from? I guess from a weblog entry?
Your best way I think would be to utilise a Javascript solution as using target=“blank” is no longer valid usage I’m afraid. There is a great script located here that does just what you are after and you shouldn’t hopefully have to change anything. What the Javascript does is looks through your code when the page loads and if there are any external links then it opens them in a new window. Internal links stay in the same window. If people don’t have Javascript enabled then the default will be to load all links in the same window so whilst you are giving people something extra in using the Javascript you are also not taking away anything from those users that have Javascript disabled.
On the other hand if you want to do this with just certain links then you would probably have to do something more like :
<small>Website:</small><span class="url"><a href="http://{website}" title="{title}">{website}</a></span>Then you would need to ensure that you turn off the automatic link creation so that the {website}
</code></pre>
and then use this other script located here.
Hope some of that helps.
Best wishes,
Mark
#3 / Jul 03, 2008 9:09am
Hi Mark,
Thanks for the prompt reply! I want all external links to open in a new window so have tried the first option. I copied the script and inserted it within Javascript tags in the template. Btw it was a weblog entry indeed. Unfortunatly it doesn’t seem to make a difference and after clicking the link it still opens in the same window.
I have added the first part of my page to give you some more insight:
</head>
<body>
[removed]
this.blankwin = function(){
var hostname = [removed].hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;
};
this.set = function(obj){
obj.target = "_blank";
obj.className = "external";
};
for (var i=0;i<a>
{embed=site/header"}
<div id="wrapper">
<div id="page">
<div id="sidebar">
<!-- search -->
{embed="site/block_search"}
<!-- categories -->
{embed="site/directory_cats_block"}
<!-- add -->
{embed="site/add-directory"}
<!-- latest directory entries-->
{embed="site/directory_latest_block"}
</div>
<div id="content">
<!-- entry -->
<div class="block page-block">
<h2><span>{exp:weblog:info weblog="directory"}{blog_title}{/exp:weblog:info}</span></h2>
<p><br />
{exp:weblog:entries weblog="directory" limit="1" track_views="one"}<br />
<div class="story vcard"><br />
<br />
<h3 class="fn org"><a href="http://{title_permalink=directory/comments}" title="{title} {if category_request}{categories} | {category_name}{/categories}{/if}">{title}</a> {if category_request}{categories} <small>({category_name})</small>{/categories}{/if}</h3><br />
{description}<br />
<br />
<br />
<small>Website:</small> <span class="url">{website}</span> • <small>Email:</small> <span class="email">{email_address}</span> • <small>Country:</small> <span class="country">{directory_country}</span> • <small>Phone number:</small> <span class="tel">{phone}</span> • <a href="http://{permalink=site/frienddirectory}">Tell-a-Friend</a><br />
The page of the above is: http://www.hospitality-industry.com/index.php/directory/comments/mise_design_group/
Maybe you see what I did wrong?
Thanks again,
Tammo
#4 / Jul 03, 2008 9:27am
Haven’t looked at your code above but do see that if I go to your page that you have shown then you don’t have the full Javascript in the page. It isn’t being initiated.
I think you probably copied the code from the front page of the site that I linked too?
If you take a look at this page that has the demonstration on it and take a look into the source code then you should hopefully see that there is some other code in there which is also required. Not too sure why the front page of their site has that missing though I guess they just thought people would write their own initialiser or something?
Also what I would suggest is to download the Javascript file instead and then just link to that as it keeps your source code a little leaner for working on. Just a thought though.
Hope that helps and gets this working for you.
Best wishes,
Mark
#5 / Jul 03, 2008 10:16am
I feel so dumn but how do initiate this code? I have copied it from the source now, added it just under the body, added the opening tags [removed] for javascript in front of it and closed it at the end but still it won’t open up in a new window. I couldn’t however found any difference (the initialiser) between the code on the front page and in the source code, or do you mean the script referrals in the header?
#6 / Jul 03, 2008 10:27am
Hiya,
The full code should have more to it than you have on your page currently. I have been trying to paste the full code into this post but the forums keep on stopping me from doing so due to it being Javascript so the best thing to do would be to download the source file from here and see what is different. Better still would be to just upload that Javascript file to your server and then just link to it.
Hope that helps.
Best wishes,
Mark
#7 / Jul 03, 2008 11:25am
Hey Mike, it works!! I took the code from the download now, and indeed, there appeared more code. I will take your advice and link to the file to keep my code clean. Many thanks for your help and your quick respons, much appreciated!
Regards,
Tammo
#8 / Jul 03, 2008 11:29am
Hey Mike, it works!! I took the code from the download now, and indeed, there appeared more code. I will take your advice and link to the file to keep my code clean. Many thanks for your help and your quick respons, much appreciated!
Regards,
Tammo
Hiya,
No problem at all, glad to have been of help on this one. BTW my name’s Mark 😉
Good luck with everything, oh and meant to mention the site design you have there looks really really great, should be a very good site.
Best wishes,
Mark
#9 / Jul 03, 2008 11:32am
Here’s a jQuery one - jQuery is proper great and I love it. You just need to make sure you reference jquery.js then fire in this code, obviously changing the domain values (I specify it twice - once with wwws and once without, just to be sure)
// automatically create external link class and open in new window if link is not local or ID anchor
$(document).ready(function(){
$("a[@href^='http']").not("[@href*=http://www.example.com]").not("[@href*=http://example.com]").not("[href^=#]").addClass("external").attr('target','_blank');
});It adds a class of ‘external’ too, so you can style your outgoing links to show the user that they’re opening a new window.
#10 / Jul 04, 2008 2:39pm
Hi there Tammo,
utilise a Javascript solution as using target=“blank” is no longer valid usage I’m afraid.
hey Mark,
can you please explain what you mean by “no longer valid usage”
i’m still learning many of the ins and outs of html/css, and keeping track of what works with what browser is sometimes baffling… but i hadn’t heard that and i’ve been using target=“blank” in my templates…. ;(
am i wrong to use that?
#11 / Jul 04, 2008 2:47pm
can you please explain what you mean by “no longer valid usage”
Well, apart from being a nuisance (personal opinion here: If I want a new browser window or tab, there are at least half a dozen ways for me to achieve that. Point is, I would like to make that decision, and not have the site owner do it on my behalf) it is also not valid XHTML Strict, I believe.
If you are using any other doctype, you should be fine for the time being.
#12 / Jul 04, 2008 2:48pm
Sorry I should have been a bit more clear when I said that, sorry sometimes I don’t think and just write things very quickly.
The problem would come if you try to use it in a page using STRICT validation. If you use it in a Transitional doctype then you should be okay but I just prefer getting everything as strictly validated as I can nowadays.
Sorry I wasn’t clearer, consider my hand slapped from this end 😉
Hope that helps though.
Best wishes,
Mark
#13 / Jul 04, 2008 4:36pm
I think what might be confusing is that both javascripts add target=“_blank” to the code. The reason it passes validation in this instance is that javascript instantiated code isn’t read by the validator.
Agree with Ingmar though, websites that open new windows make me cross - sadly, some clients insist on it.
#14 / Jul 04, 2008 4:58pm
I think what might be confusing is that both javascripts add target=“_blank” to the code. The reason it passes validation in this instance is that javascript instantiated code isn’t read by the validator.
Agree with Ingmar though, websites that open new windows make me cross - sadly, some clients insist on it.
i only use the “blank” for links to pages outside my domain. being a music magazine, i have a zillion links to outside info.. ie: band websites, band myspaces, record labels, amazon…..
that still turns you guys off? sometimes, some sites don’t let you “back” so easy…
within my site, however, no target=“blank”
#15 / Jul 04, 2008 5:04pm
i only use the “blank” for links to pages outside my domain. being a music magazine, i have a zillion links to outside info.. ie: band websites, band myspaces, record labels, amazon…..
Good for you. I generally use the context menu “Open in new tab”, use the middle mouse button or Ctrl-Click. Either way, I decide to open a new tab (or window, if I’m so inclined), or leave the site.
that still turns you guys off?
It does me, yes. The only thing worse is trying to mess with my contect menu, of course. Also, I might not be representative, of course.