Delete active state of a link

[ckirchho]

Hello,

I created some css link buttons. I defined some different values for
the active pseudo class of those links, so they have the visual
appearance of a button that is pressed down.

Now if I press the mouse button on a link, keep it pressed, move the
mouse out of the link's area and release the button, the link stays
active. I have to click somewhere else in the document to take away
the active state of that link.

I would like to let JavaScript do that automatically. So when the body
of the document is loaded, I search for all a elements. If they have a
specific class, I attach an onmouseout event to them. In the
onmouseout event I tried dispatching a click event on the document,
but that doesn't do the trick.

Is there any other method to achieve the desired behaviour?

Best regards,

Christian Kirchhoff

 

[The Natural Philosopher]

Hello,

I created some css link buttons. I defined some different values for
the active pseudo class of those links, so they have the visual
appearance of a button that is pressed down.

Now if I press the mouse button on a link, keep it pressed, move the
mouse out of the link's area and release the button, the link stays
active. I have to click somewhere else in the document to take away
the active state of that link.

I would like to let JavaScript do that automatically. So when the body
of the document is loaded, I search for all a elements. If they have a
specific class, I attach an onmouseout event to them. In the
onmouseout event I tried dispatching a click event on the document,
but that doesn't do the trick.

Is there any other method to achieve the desired behaviour?

use onmousover, onmouseout and onclick.

Onmouseout triggers even if you click and hold IIRC.

 

[Geoffrey Summerhayes]

Hello,

I created some css link buttons. I defined some different values for
the active pseudo class of those links, so they have the visual
appearance of a button that is pressed down.

Now if I press the mouse button on a link, keep it pressed, move the
mouse out of the link's area and release the button, the link stays
active. I have to click somewhere else in the document to take away
the active state of that link.

I would like to let JavaScript do that automatically. So when the body
of the document is loaded, I search for all a elements. If they have a
specific class, I attach an onmouseout event to them. In the
onmouseout event I tried dispatching a click event on the document,
but that doesn't do the trick.

Is there any other method to achieve the desired behaviour?

Is the problem the link staying active or its appearance
because it's active?

 

[David Mark]

Hello,

I created some css link buttons. I defined some different values for
the active pseudo class of those links, so they have the visual
appearance of a button that is pressed down.
Okay.


Now if I press the mouse button on a link, keep it pressed, move the
mouse out of the link's area and release the button, the link stays
active. I have to click somewhere else in the document to take away
the active state of that link.

It stays focused. To be consistent, I always make active and focus
the same as IE only supports one of them (active I think.) Is that
not what you have done? Or perhaps it is a quirk of the browser? You
didn't say what you were using. Perhaps it was a version of IE that
has this problem?

I would like to let JavaScript do that automatically. So when the body
Automatically?

of the document is loaded, I search for all a elements. If they have a
specific class, I attach an onmouseout event to them. In the

Why a specific class? Wouldn't it make sense to do it for all of the
links?

onmouseout event I tried dispatching a click event on the document,
but that doesn't do the trick.

Just forget it.

Is there any other method to achieve the desired behaviour?

Change browsers?

 

[ckirchho]

ckirchho wrote:
[...]

use onmousover, onmouseout and onclick.

Onmouseout triggers even if you click and hold IIRC.

Best regards,

Christian Kirchhoff

Hello,

thanks for the answer. As I wrote: "I attach an onmouseout event to
them. In the
onmouseout event I tried dispatching a click event on the document,
but that doesn't do the trick."

I already used mouseout, and it didn't work. To be precise, of course
the onnmouseout is triggered, but the code I used to take the focus
away of the link did not.

regards,

Christian

 

[ckirchho]

[...]

Is the problem the link staying active or its appearance
because it's active?

Hello,

thanks for the answer as well. Basically it is the appearance. The
link button's css lets it look like it is pressed down, when the user
clicks on it. Now when dragging the mouse outside and releasing the
mouse button, the link button stays pressed. This COULD be wanted
behaviour for 2 state buttons, but even then the behaviour would not
be 100% correct because the link is not followed, meaning the button's
action is not triggered. Therefore the link button should go back to
the "up" state automatically.

Best regards,

Christian

 

[ckirchho]

Hallo,

thank you for all your comments.

[...]

Now if I press the mouse button on a link, keep it pressed, move the
mouse out of the link's area and release the button, the link stays
active. I have to click somewhere else in the document to take away
the active state of that link.

It stays focused. To be consistent, I always make active and focus
the same as IE only supports one of them (active I think.) Is that
not what you have done? Or perhaps it is a quirk of the browser? You
didn't say what you were using. Perhaps it was a version of IE that
has this problem?

I am testing in Firefox 2.x. I use the active pseudo class in CSS.
This works
in IE as well. And IE shows the same behaviour (meaning: the active
state stays
after I dragged the mouse out of the links area.)
This is not a problem of CSS, I couls ask my question about links in
general
as well.

Automatically?

I wrote: "I have to click somewhere else in the document to take away
the active state of that link." and instead of actively clicking
somewhere I
would like javaScript to trigger an event or do something else to take
the
active state away from the link.

Why a specific class? Wouldn't it make sense to do it for all of the
links?

Well, as I said I dsigned link buttons. Meaning: Some links are styled
as graphical
buttons. I do not want to let every link appear as abutton, that's why
I use a class
for those. The JavaScript initializes a page by searching all links
with that class.
The other, normal, links do not have to have a special behaviour, only
the graphical
ones.

Just forget it.

Do you know why it doesn't work?

Change browsers?

Well I want to support as many browsers as possible, and as I said
above:
IE has the same behaviour as FF.

Best regards,

Christian

 

[SAM]

Le 11/26/08 5:14 PM, ckirchho a écrit :

Hallo,

I wrote: "I have to click somewhere else in the document to take away
the active state of that link." and instead of actively clicking
somewhere I would like javaScript to trigger an event or do something
else to take the active state away from the link.

<a href="#" class="special"
onclick="return false;"
onmouseout="if(this.className=='special')this.blur();">
test lien special</a>



or :

JS:
===
function blr() {
var a = document.links, n=a.length;
for(var i=0; i<n; i++)
if(a.className && a.className=='special')
a.onmouseout = function() { this.blur(); };
}
window.onload = blr;

HTML:
=====
<a href="#" class="special" onclick="return false;">
test special link #1</a>
<a href="#" onclick="return false;">
test normal link #1</a>
<a href="#" onclick="return false;">
test normal link #2</a>
<a href="#" class="special" onclick="return false;">
test special link #2</a>

 

[ckirchho]

Le 11/26/08 5:14 PM, ckirchho a écrit :

Hallo,

I wrote: "I have to click somewhere else in the document to take away
the active state of that link." and instead of actively clicking
somewhere I would like javaScript to trigger an event or do something
else to take the active state away from the link.

<a href="#" class="special"
onclick="return false;"
onmouseout="if(this.className=='special')this.blur();">
test lien special</a>

or :

JS:
===
function blr() {
var a = document.links, n=a.length;
for(var i=0; i<n; i++)
if(a.className && a.className=='special')
a.onmouseout = function() { this.blur(); };}

window.onload = blr;

HTML:
=====
<a href="#" class="special" onclick="return false;">
test special link #1</a>
<a href="#" onclick="return false;">
test normal link #1</a>
<a href="#" onclick="return false;">
test normal link #2</a>
<a href="#" class="special" onclick="return false;">
test special link #2</a>

Hello,

thanks for the reply. I tried blur, but that didn't do the trick
either.

Here is a more detailed explanation: I attach a background image to
the link, depicting an icon or glyph, let's say on the left side of
the link button. The link has a left padding, so the text of the link
sits to the right of that glyph.
I do not want to realize the link button's caption as an image as
well, because that would be more complicated when internationalizing
the website (right now I retrieve the actual caption with gettext).
No there are two different behaviours:
1. I press the mouse button while the mouse is over the text caption
of the link. I keep it pressed and move the mouse outside the link
button's area. The mouse pointer changes to the drag/drop symbol that
says: cannot be dropped here. Apparently the link destination is
dragged. I can drop it on the desktop or a text field. In this
situation the button doesn't change to inactive state when I release
the mouse button, no matter whether I release it somewhere where I
cannot drop the link or e.g. on the desktop.
2. I press the mouse within the padding area of the link, e.g. on the
glyph. Keep it pressed and mouve th mouse outside. In that situation
no drag and drop is initialized, and whenever I release the mouse
button, the link button changes to inactive automatically.

So what I need would be a script for situation one, when a drag and
drop of the link button's destination has been initiated. blur()
unfortunately doesn't help in that situaion.

Best regards,

Christian

 

[SAM]

Le 11/27/08 1:36 PM, ckirchho a écrit :

thanks for the reply. I tried blur, but that didn't do the trick
either.

(explainations)
Only available if the link is of type inline.
(if the link is of type block and you don't use IE(<7) you have only the
1st case)

So what I need would be a script for situation one, when a drag and
drop of the link button's destination has been initiated. blur()
unfortunately doesn't help in that situaion.

Quelle drôle d'idée !
Who play to DnD a link ?
Who among those players is surprised when the drop doesn't fire and by
consequence the link keeps the focus ?

What you want is to disable the drag ?
While programmers of browsers worked hard to set this feature !

Perhaps :
onmouseup="if(this.tagName=='a')this.blur();"


Probably better :

<p onmousemove="coordinates()" style="padding:8px">

<a href="#" class="special" onclick="return anAction();"
onmousedown="coord=[this.offsetLeft,this.offsetTop,this.offsetWidth,this.offSetHeight];"
onmouseup="if(coords[0]<coord[0] || coords[0]>(coord[0]+coord[2]) ||
coords[1]<coord[1] || coords[1]>(coord[1]+coord[3]))
this.blur();"> my link </a>


The function 'coordinates' will have to set the array 'coords' with
mouse position (x, y) relatively to the link's parent or container,
something as :
x = event.clientX;


Not tested all that !

Infos :
<https://developer.mozilla.org/En/DOM/Event.clientX>
<https://developer.mozilla.org/en/DOM/element.offsetTop>
<http://msdn.microsoft.com/en-us/library/ms534303(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms533567(VS.85).aspx>

 

[Geoffrey Summerhayes]

[...]

Is the problem the link staying active or its appearance
because it's active?

Hello,

thanks for the answer as well. Basically it is the appearance. The
link button's css lets it look like it is pressed down, when the user
clicks on it. Now when dragging the mouse outside and releasing the
mouse button, the link button stays pressed. This COULD be wanted
behaviour for 2 state buttons, but even then the behaviour would not
be 100% correct because the link is not followed, meaning the button's
action is not triggered. Therefore the link button should go back to
the "up" state automatically.

Well, this won't work for IE6 IIRC, but try something like:

..foo {
background-color:Gray;
border-left:solid 3px Silver;
border-right:solid 3px Black;
border-top:solid 3px Silver;
border-bottom:solid 3px Black;
display:block;
width:5em;
overflow:hidden;
}
..foo:hover {
background-color:Aqua;
}
..foo:active:hover {
border-left-color:Black;
border-right-color:Silver;
border-top-color:Black;
border-bottom-color:Silver;
}

<a class="foo" >Test</a>