Javascript on a text link

corblimey

I want to run a few js commands when a user clicks a link (updating an image, opening an popup, etc). Which is the most acceptable method?

<a href="" onclick="js_command();">blah</a>

<a href="#" onclick="js_command();">blah</a>

<a href="javascript:js_command();">blah</a>

Thomas_S_Hunterson

It's been a while since i did any HTML, but maybe

<SPAN onclick="js_command();">Blah</SPAN>

mewso

Not sure what you mean by acceptable. My personal preference would be to use an external js file with:-

var objLink = document.getElementById("mylink");
objLink.onclick = js_command;

function js_command() {
...
}

or something along those lines. There may be a more recommended way of doing it.

Eoin

sean_keevey wrote:

It's been a while since i did any HTML, but maybe

<SPAN onclick="js_command();">Blah</SPAN>

Looks good - and use CSS so the mouse cursor changes into the little hand.

<a href="#" onclick="js_command();">blah</a>
<a href="" onclick="js_command();">blah</a>

I think that using these versions can make the parent page reload. This is a serious pain if the connection to the site is slow, and also if the user has scrolled down the page to click the link. Also, there could be server-side code that you don't want running twice.

This does not happen for the last one you posted.

<a href="javascript:js_command();">blah</a>

seamus

eoin_s wrote:

I think that using these versions can make the parent page reload. This is a serious pain if the connection to the site is slow, and also if the user has scrolled down the page to click the link. Also, there could be server-side code that you don't want running twice.

I agree. If the page doesn't reload, using the # symbol will force the window to jump to the top of the page - highly frustrating if the page is anywhere long.

You can even use CSS to make a P, DIV or SPAN object to appear like a link, so the cursor changes when they mouse over it.

Eoin

seamus wrote:

You can even use CSS to make a P, DIV or SPAN object to appear like a link, so the cursor changes when they mouse over it.

Here's the CSS Seamus is referring to:

<div style="cursor: pointer;">fake link text</div>

corblimey

I'm thinking in terms of which will work the best in most modern browsers. Setting up a span with an onclick and false cursor change seems like overkill to me?

I know the # jumps back to the top of the page - that's not an issue here, but if it reloads the page (on some browsers?), that could get tricky.

musician's solution is interesting, but I can see it getting unwieldy if I have a bunch of pages opening different popups.

Eoin

corblimey wrote:

I know the # jumps back to the top of the page - that's not an issue here, but if it reloads the page (on some browsers?), that could get tricky.

Then just use <a href="JavaScript: myFunction()">blah</a>

corblimey wrote:

musician's solution is interesting, but I can see it getting unwieldy if I have a bunch of pages opening different popups.

Actually, musician's solution is the best one if you have multiple pages opening popups, as you only have to define the function once. Just pass in the URL and title of the new page as parameters.

e.g.

functions.js:

    function openNewWindow(sPageName, sPageTitle)
    {
         var newWin = window.open(sPagename, sPageTitle, "properties here");
    }

Your page:

<script type="text/JavaScript" src="functions.js"></script>
<a href="JavaScript: newWin('popup.asp', 'mypopup');

If the different popups shoud be of different sizes, then pass the height and width in as parameters as well. This is off the top of my head, so sorry if there are some errors there.

corblimey

eoin, either I misunderstood musician's post or you did. His solution seems to be having js find the link in question and set the onclick programmatically. i would need to have a js file for each page or have a onclick event for each possible link.

Eoin

corblimey wrote:

eoin, either I misunderstood musician's post or you did. His solution seems to be having js find the link in question and set the onclick programmatically. i would need to have a js file for each page or have a onclick event for each possible link.

Sorry, you're right - I was just thinking of the external JS File part of it.

mewso

corblimey wrote:

musician's solution is interesting, but I can see it getting unwieldy if I have a bunch of pages opening different popups.

You only need one js file and your site template can link to it so every page has access to it. Each function and initialisation code can be in the one js file and it will no more unweildy than having inline javascript on every page. You just need to see if the object exists.

var objLink = document.getElementById("mylink");
if (objLink) {
objLink.onclick = js_command;
}
var objLink2 = document.getElementById("mylink2");
if (objLink2) {
objLink2.onclick = js_command2;
}

function js_command() {
...
}
function js_command2() {
...
}

akari no ryu

eoin_s wrote:

If the different popups shoud be of different sizes, then pass the height and width in as parameters as well. This is off the top of my head, so sorry if there are some errors there.

You'd need to do something like this

    function openNewWindow(sPageName, sPageTitle, properties)
    {
         if(!properties){
           properties="default properties go here";
         }
         var newWin = window.open(sPagename, sPageTitle, properties);
    }