Develop Reference

Force a URL to open in a new tab

I have a webpart on a site that allows you to insert a "Show more" link to an external page that expands on the information displayed in the webpart. Unfortunately this option only takes a regular URL as the value for the link, it doesn't let you construct the HTML link itself. I need this link to open in a new tab but since I only get to put the URL in, I can't use the normal target="_blank" HTML code. Is there a way to craft the URL itself to force a new tab?

In javascript:
window.open("url");
Or adding the attr:
document.getElementById("theLink").setAttribute("target", "_blank");
With the following html
<a id="theLink" href="url">

If you cannot modify any part the a tag, you can use jquery.
The following script will try to open all links on a different tab/window:
$("a").on("click",function(){
event.preventDefault();
window.open($(this).attr('href'),'_blank');
});
NOTE:
Make sure you read this answer

Retain a javascript link when the context menu is used

I have the following link that opens a page in a new tab (in most browsers subject to the users configuration) provided that javascript is enabled and some conditions are met.
<a href="../scripts/no-javascript.htm" target="nojs" onclick="openWin(url,name); return false;">
href="../scripts/no-javascript.htm" is included for users who don’t have javascript enabled or where the conditions are not met (no-javascript.htm explains why). This can’t have the same url or name as the ones included with openWin(url,name).
Everything works fine except that if the user right clicks and selects “Open link in new tab/window” from the context menu they get taken to no-javascript.htm.
Is there any way I can have this format and still have the user go to openWin(url,name) when they use the context menu?
Thanks.

You don't have to use onClick. Just change the link with JS and if the user disables it you get the nojs page.
HTML
<a id="the-link" href="../scripts/no-javascript.htm" target="nojs">
Javascript
document.getElementById("the-link").href = "../new_link.htm";
JSFiddle example

Yes. (I'm assuming jquery here)
<a id='nojs' href="../scripts/no-javascript.htm" target="nojs" onclick="openWin(url,name); return false;">
<script>
if (!conditionsmet) {
$("#nojs").attr("href", "http://something.else");
}
</script>

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?

You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!

Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.

The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

using images for links with <wicket:link>

I'm trying to use an image for a link like so:
<wicket:link>
<a href="UploadPage.html">
<img src="/logo.png"/>
</a>
</wicket:link>
In the rendered HTML, the href of the <a> is correctly set to my upload page.
But curiously, Wicket adds onclick=window.location.href='/logo.png' to the <img> tag. The end result is that clicking on the logo loads the logo itself, rather than the upload page.
A simple work-around is to not use <wicket:link>, and hard-code the url to my upload page, but I'd like to know if there is a proper solution to this.

For me it helped to add empty onClick (Wicket 1.5):
<li><a class="current" href="main">
<img onClick="" src="img/icons/home.png"/>
</a></li>
after this, the link points to the page, not the image itself

Add the following in your html:
<a wicket:id="linkID"><img src="/logo.png"/></a>
Add the following in the corresponding java class:
add(new PageLink<Void>("linkID", new YourWicketPage()));
Or for more generic purposes:
add(new Link<Void>("linkID") {
#Override
public void onClick()
{
// do whatever you want when the link/image is clicked
}
);
Note that I gave the Link a Void model, since a model doesn't seem necessary to me in this case. However, it is imaginable that given a certain context a model for the link should be used.

did you already check out the answer in How to make a wicket link appear as an image?
Which wicket version do you use?

you have maybe forgotten the quote on the "onclick" :
onclick="window.location.href='/logo.png'"

Just to mention: using full url for src tag should help (http://blah/logo.png) but it's not elegent or portable solution. Perhaps it's a wicket bug. Maybe consider using div with css instead?

Unobtrusive Javascript: Removing links if Javascript is enabled

I'm using PopBox for magnifying thumbnails on my page.
But I want my website to work even for users which turned javascript off.
I tried to use the following HTML code:
<a href="image.jpg">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/>
</a>
Now i need to disable the a-Tag using javascript, otherwise my PopBox won't work.
How do I do that?

Just put the onclick on the a-tag:
<img ...>
Make sure to return false either at the end of the function (here Pop) or inline like in the above example. This prevents the user from being redirected to the link by the <a>'s default behaviour.

Put the onclick event onto the link itself, and return false from the handler if you don't want the default behavior to be executed (the link to be followed)

You could give all your fallback anchor tags a particular classname, like "simple"
Using prototype, you can get an array of all tags using that class using a CSS selector, e.g.
var anchors=$$('a.simple')
Now you can iterate over that array and clear the href attributes, or install an onclick handler to override the normal behaviour, etc...
(Edited to add that the other methods listed above are much simpler, this just came from a background of doing lots of unobtrusive javascript, where your JS kicks in and goes and augments a functioning HTML page with extra stuff!)

May I suggest, in my opinion, the best solution? This is using jQuery 1.4+.
Here you have a container with all your photos. Notice the added classes.
<div id="photo-container">
<a href="image1.jpg">
<img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" />
</a>
<a href="image2.jpg">
<img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" />
</a>
<a href="image3.jpg">
<img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/>
</a>
</div>
An then you make a single event handler this way:
<script type="text/javascript">
$(document).ready(function(){
var container = $('#photo-container');
// let's bind our event handler
container.bind('click', function(event){
// thus we find (if any) the image the user has clicked on
var target = $(event.target).closest('img.popup-image');
// If the user has not hit any image, we do not handle the click
if (!target.length) return;
event.preventDefault(); // instead of return false;
// And here you can do what you want to your image
// which you can get from target
Pop(target.get(0));
});
});
</script>

The href attribute is not required for anchors (<a> tags), so get rid of it...
<a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a>
<script type="text/javascript">
document.getElementById("apic001").removeAttribute("href");
</script>
This method will avoid library contention for onclick.
Tested in IE6/FF3/Chrome. Side benefit: You can link directly to the portion of the page containing that thumbnail, using the id as a URI fragment: http://whatever/gallery.html#apic001.
For maximum browser compatibility, add a name="apic001" attribute to the anchor tag in your markup ('name' and 'id' values must be identical).
Using jQuery, dojo, Prototype, etc. you should be able to do the removeAttribute on multiple, similar anchors without needing the id.

You should be able to mix and match the return false from Chris's idea with your own code:
<a href="image.jpg" onclick="return false;">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);">
</a>
If someone has Javascript disabled, then their browser ignores the onclick statement in both elements and follows the link; if they have Javascript enabled, then their browser follows both OnClick statements -- the first one tells them not to follow the <a> link. ^_^