This has been mentioned here before, but it seems to come up pretty often, so I'll attempt to provide a clear answer for everyone.
david wrote:
> Ordinarily, this would be achieved with the help of JavaScript and
> Window.Open(), so much for cross-browser compatibility.
>
> Then there's the target="_blank" anchor attribute, but this is
> disallowed by the DTD I'm using (XHTML1.1 w/ IFrame), that... plus it > doesn't offer a way to get rid of browser UI elements.
My preferred method is to create a standard anchor element (<a href="http://example.com";>) and utilize the onclick handler to call javascript's window.open() method with arguments.
Here's a simple example:
<a href="http://example.com/"; title="More about example." onclick="window.open(this.href, '_blank'); return false;">Example</a>
Note that the link is valid and well-formed. It's actually perfectly accessible despite the javascript -- even with javascript turned off in the client, the href attribute would suffice and the browser would handle the hyperlink as usual.
If javascript is turned on, however, it will respond to the onclick event by executing the window.open function, and then return false to tell the browser not to bother handling the event:
onclick="window.open(this.href, '_blank'); return false;"
The first argument, 'this.href' is key. By using 'this.href', we are accessing the value of the current element's 'href' attribute. This means we don't need to supply window.open() with the url manually -- it will use the same value as the 'href' attribute in our link, in our case, 'http://example.com'.
The second argument (the 'name' of the new window to be created) is given the special name, '_blank', which serves to inform window.open() that it is to launch a new window. Think of it like using <a target="_blank"> in older versions of html.
Note that we follow the call to window.open() by returning false to the event handler (return false;). This is important as it prevents the browser from handling the link itself. If the onclick handler doesn't return false, the browser will handle the click normally, and both windows will wind up at http://example.com.
For David, who wanted to know about controlling the attributes of the new window, there is an optional third argument that window.open() accepts -- a string of properties for the new window.
Here's an example of a call to window.open with the 'properties' argument:
onclick="window.open(this.href, '_blank', 'width=500, height=500, menubar=no'); return false;"
Going back to our original example, we can revise it so that it opens a new window to 'http://example.com' that is 500px wide, and 500px high with no menubar:
<a href="http://example.com/"; title="More about example."
onclick="window.open(this.href, '_blank', 'width=500, height=500, menubar=no'); return false;">Example</a>
It's probably worth noting that, as per the xhtml spec, you need all your attributes to be lowercase (including attributes that pertain to event handlers). So, while "onClick" may work in most browsers, you'll need to use "onclick" if you want xhtml compliance.
While I generally try to avoid creating new windows, I do on occasion use this method as a straight-up replacement for target="_blank" when appropriate.
Hope this helps!
Jeff.
-- Jeffrey Hardy Application Developer
http://shiftmediagroup.com Standards Compliant Web Development
david wrote:
Here's the situation:
I've got a form that users fill out in order to add something to a database...
Under each <dt>, there's the <label for=""> element for each of the input elements, and that works fine
But because of the layout of the page, the <label> values are kept short, yes... there are title="" attributes, but IE and FF don't show the whole text
So I was thinking about doing what other sites do... and thats to put a "more info on this field" link, people click on it, and a popup appears with the minimum of browser UI chrome and jumps to the right section in the code
Ordinarily, this would be achieved with the help of JavaScript and Window.Open(), so much for cross-browser compatibility.
Then there's the target="_blank" anchor attribute, but this is disallowed by the DTD I'm using (XHTML1.1 w/ IFrame), that... plus it doesn't offer a way to get rid of browser UI elements.
Does anyone have any alternatives?
I was thinking of having a JavaScript "show/hide" function with the instructions and extra detail contained in a <div style="visibility: none;"></div>
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
