Scripting Tips

[Choop]

This set of functions will make all your links open in a new window, without encouraging invalid XHTML, and without throwing any errors..

Code:

function pops () {
    var a, i;
    if (typeof(document.getElementsByTagName) != 'undefined') {
        a = document.getElementsByTagName('a');
    } else if (typeof (document.links) != 'undefined') {
        a = document.links;
    }
    i = a.length;
    while (--i >= 0) {
        if (typeof(a[i].href) != 'undefined' && a[i].href.substr(0,1) != '#') {
            registerEvent(a[i], 'click', function () { window.open(this.href); return false; });
        }
    }
}
function registerEvent (el, evt, func) {
    if (typeof(el.addEventListener) != 'undefined' ) {
        el.addEventListener(evt, func, false);
    } else if ( typeof(el.attachEvent) != 'undefined' ) {
        el.attachEvent('on'+evt, func, false);
    } else {
        el['on'+evt] = func;
    }
}
registerEvent(window, 'load', pops);

This is for slink, who needs the patch, and for misterhaan, who thought he geeked out.

[slink]

Nice. Hadn't thought about doing it that way.
I really should have and now I'm going to go freak out about how much of my brain is wasted potential!

Cheers man.

[Choop]

As a bonus, you can use the registerEvent() function for all of your event-assigning needs, including (in recent browsers) multiple event handlers on the same event on the same element.

Usually, though, I just slap the DOM2 Events library from Chris Nott's Dithered into my page, and use DOM-2 style event handling.

[sara]

/me passes out from the geekery let loose in the room.

<swoon>

[jough]

Jesus Bartholemew CHRIST, Choop.  Can't I leave you little monkeys alone for four days?

If you want to add the "target" attribute to XHTML 1.1, it's really easy to do with a custom DTD that will allow you to extend the spec modularly.

Ahem.

You can add this to the end of your DTD to include the Target mod:

Code:

<!ENTITY % xhtml-target.mod
    PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
    "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod" >
%xhtml-target.mod;

Then use the target attribute to your heart's content and still be valid XHTML 1.1.

See http://poetryx.com for this in action (and if you try validating any of the pages, note the DTD listed).

[AlohaDawg]

OK, now that didn's sound like Sara at all. I'm really confused.

Also, who had Wednesday, 6:39 in the board pool? We have a winner!

[Nabubrush]

Now that's funny.

[Choop]

Jough, I love how you hate me.

I meant for this thread, as indicated more by its title than its first post, to be a place wherein geeks could share scripting tips -- so let your geekery free, and share back. I know you're out there.

[misterhaan]

personally i don't use target=anything

i hate it when i click a link that i wanted to open in the same tab (i middle-click it if i want to open it in a new tab, and basically never want a link to open in a new window), so i make all my links open in the same tab/window.  i figure if you wanted it to open in a new tab/window then you would have ctrl-/shift- clicked the sucka and seen just that effect.

most people don't seem to agree with me, but i want to leave as much control of how my site is experienced to the person experiencing it as possible.  that's why i changed my default stylesheet to expand to the width of their browser too.  and if you have a crazy wide browser, then you can select one of the alternate styles that limits the width so that you can actually still READ stuff.

i also have removed all javascript from my site because the powers of javascript are all too often used for evil.

maybe none of that was scripting tips, but it was something that is sort of related, right?

[CortJstr]

how good and decent people should make pages.

Word.

[slink]

maybe none of that was scripting tips, but it was something that is sort of related, right?

Indeed. And actually that's something I'm glad you said. I think I am going to rip it all out since you make a very valid point about what makes the best UI for a page. Making things user friendly is something I try to do as much as possible. I don't like to make things overcomplicated, even on the scripting/markup side of things wherever possible, and OK so I am not totally up to date on it all again, so my HTML skills are a mix of 10 years out of date and new.
But thinking about it not from the dev point of view, but of the user, targeting blank pages is nasty. And with the wonders of middleclick in FireFox I should have seen it.

[jay-ell]

Yaaaay, misterhaan!  Score one point for the forces of goodness!

[misterhaan]

targeting blank pages is nasty. And with the wonders of middleclick in FireFox I should have seen it.

i open links in new tabs most of the time already, and most of the time someone decides that a link should open in a new window i'm opening it in a new tab anyway so no real problem.  but if i don't like what i'm looking at and i want to replace it, i CAN'T.  so they took that away from me, and the closest i can do is open it in a new tab and close the tab with the link, but then i've lost my history.  if target isn't specified, all options are still available to me.

since my other post got a good response, i'll preach a little more:
i use firefox's web developer extension to keep my browser sized to 800x600, though my monitor is 1600x1200 at home and 1024x768 at work (that one's a crappy LCD and can't do any better), and i also have javascript disabled by default, and only turn it on for sites that require it.  (i use this extension to help with that).
no site should ever require javascript.  and it's not that hard either!  for example, the case of wanting a link to open in a new window can be done by specifying this:

<a href="javascript:window.open('somepage.html');">unfriendly link[/url]

that link will do nothing for me, because i have javascript off.  it also breaks the middle-click option to open it in a new tab.  javascript should NEVER show up in the href attribute--instead use onclick:

<a href="somepage.html" onclick="javascript:window.open('somepage.html'); return false;">friendly link[/url]

the return false part of that one means that the browser should ignore the fact that the user just clicked on the link.  it's already done window.open() and we don't need it to follow the link so we get two of somepage.html.  for people without javascript, or for middle-clicks, the onclick is ignored.

i used to use javascript in my photo album to pop up a bigger photo on top of the rest of the page when you clicked on the smaller preview.  if javascript was off, it just acted like a link to the picture.  i have since replaced that with opening a page for each photo with a description.

[Choop]

...which is also the exact behavior as the longer script I entered above.

Pop this into an external .js file, and it's not going to waste the bandwidth of any non-script-using surfers, but it will augment the user experience of those doing so. That's my philosophy with scripting. Don't make anything rely on it, as you said, haan, but make it so non-intrusive that nobody realizes it's even there when it is or gone when it's not.


One more subtle difference between my script and your example is that the function I assign just uses the value of the href attribute already in the link; yours could cause a malfunction due to typo, or a pure change in destination due to bad design.

[slink]

It has to be said I am far more a proponent of externelisation of scripts. I use nothing but an external stylesheet for CSS in any page I create, which eases the creation of the page as well as the bandwidth needed to view any set of pages. It is true both that larger files cost more, and that they're just unnecessary. I like my workspace utilitarian, and any code and script likewise.