Newbie DOM Query - temporarily disabling links?

H

howard.jones

Hi Folks,

I am working on an interactive editor for a graphical map. I have
almost all of it sketched out now, but one problem remains...

I'm using a <ul> to make a toolbar at the top of the screen, with
various CSS to make it into a horizontal toolbar. Each toolbar button
is an <li><a> pair. The href for the a is "#" and there's an onclick
atribute.

However, the buttons are modal. Each one is a verb, and you'd then pick

the target by clicking on the large image below the toolbar. So far, I
can change the class of the other buttons to grey them out, but I can't

actually stop them being represented as links - the pointer still
changes to a hand as you pass over them, and they are still clickable.

A little experimentation has show that removing the href for a button,
in the HTML, will give the effect I want - is there a neat and portable

way to do this programmatically? Setting the href to '' isn't enough
unfortunately.

Can anyone point me in the right direction please?

Thanks in advance for any pointers,

Howie
 
R

RobG

Hi Folks,
[...]


A little experimentation has show that removing the href for a button,
in the HTML, will give the effect I want - is there a neat and portable

way to do this programmatically? Setting the href to '' isn't enough
unfortunately.

Don't use an 'A' element, use a span with onclick (or just put the
onclick on the UL element). No, href, no problem. You can style the
span to look just like an A if you like, but I suspect you've removed
the styling from the A anyway.
 
R

Richard Cornford

RobG said:
(e-mail address removed) wrote:

Don't use an 'A' element, use a span with onclick (or
just put the onclick on the UL element).
<snip>

I would have said; don't use A, use <input type="button">, as buttons
seem a better semantic fit with the employment of the elements, and I
would want to retain keyboard navigation/activation of the elements. And
form controls can be easily disabled when necessary.

But the cursor image issue is irrelevant as A elements will accept
cursor styling (by CSS class to cover hover, active, etc).

Richard.
 
R

RobG

Hi Folks,

I am working on an interactive editor for a graphical map. I have
almost all of it sketched out now, but one problem remains...

I thought on this a little further, some comments below.
I'm using a <ul> to make a toolbar at the top of the screen, with
various CSS to make it into a horizontal toolbar. Each toolbar button
is an <li><a> pair. The href for the a is "#" and there's an onclick
atribute.

However, the buttons are modal. Each one is a verb, and you'd then pick

Modal anything is bad, a hangover from single-tasking DOS/Windows pre
Windows 95. Is there a really good reason for it?
the target by clicking on the large image below the toolbar. So far, I
can change the class of the other buttons to grey them out, but I can't

actually stop them being represented as links - the pointer still
changes to a hand as you pass over them, and they are still clickable.

I can't see why you want to disable the other 'buttons'. If the user
clicks on a button, then changes their mind, how do they cancel the
current selection?

Have a look at some CAD or GIS software where this stuff has been
done for 20 years or so - emulate that. If a user clicks on a
button, keep that selection. If they then click on another, change
to that selection. Give currently selected button a different style
to show it's been selected.

And GIS/CAD software (or any GUI software I can think of) doesn't
change the cursor when you are over a button - the fact that it's a
button tells the user it's a button.

As Richard said, real buttons are probably best for just that
reason.

The cursor may change a button has been selected to help in whatever
action may follow e.g. eye dropper or 'bucket' fill tool in image
editing software.
 
H

Howie

That makes a lot of sense, but buttons don't appear to be stylable in
Safari, which is kind of a step backwards from where I am. Keyboard
navigation is also something of a red-herring in this context. The very
next thing you'll need to do in most cases is pick a position on an
imagemap, so accessibility is pretty much a non-starter.

The cursor wasn't so much that it shows it, but that the A element
still accepts clicks even when 'disabled' in colour. I can have a
dispatcher function that refuses to do anything, but it'd be better if
it acted dead to start with - saves a bit of confusion for the user.

It looks like the easiest approach is to start with a span, and make it
behave like the bits of <a> I want rather than the other way around.

Thanks for your help, guys!
 
H

Howie

I was thinking the same kinds of things as I was writing it. There is a
reason.

Basically, it's a network map editor.
http://wotsit.thingy.com/haj/cacti/php-weathermap/

You create nodes, then join them up with links, both of which have a
bunch of properties (bandwidth etc). The graphics are all done by an
existing PHP script server-side. What I wanted was that the 'default'
situation is that you can click on any of the existing items in the map
(there's an imagemap describing them), and get a Properties box appear
(which is a hidden DIV with a form). When you submit that, it has to go
to the server anyway to get a new map, and possibly a new imagemap.

So the actual verbs are: properties (implicit), add node, add link, map
properties and a few others. Add Node needs to capture an X,Y
coordinate for something that isn't there. Client-side imagemaps can't
do that [*], so I actually have *two* copies of the map, one in an <img
usemap> and one in an <input type="image"> which is normally hidden
too. When you press 'Add Node', it updates a few hidden fields, and
then shows the <input> and hides the <img>. That way, when you click,
it submits the x,y coordinates. If you choose not to click, and press
then (ugh) cancel button that is currently lit, then you get back to
the 'normal' state.

So part of the 'mode' thing is just so that when nothing else is going
on, you can just click to edit existing map elements, and the other was
just to make it more obvious that the editor is expecting something
different of you now - there is a help prompt, but I figured that it
never hurts to be more explicit.

In a 'real' application, I suppose it'd be non-modal, and use something
like right-clicking for the properties part, but that's not an option
to me [*]. Also every click that actually changes something causes a
trip to the server anyway, so you're not really
going to be working too quickly here.

Thanks for your thoughts though - I'd be interested in any alternative
solution...

[* As far as my limited javascript/DHTML knowledge knows]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top