JavaScript and CSS Classes... 1

JavaStripped · Nov 6, 2004

I was playing with JavaScript for getting rid of the focus outline on activated buttons/links/etc. I think this is pretty much how everybody does it (seems like the easiest way, anyway):

onMouseUp = "this.blur()"

But inserting this into every single individual button and link in my site seems unnecessarily laborious...

THIS is why we need to be able to include JavaScript in CSS documents! We use JavaScript (often) to control formatting (as in the above example); formatting is why we have CSS; therefore, we need to be able to use JavaScript in style sheets (unless CSS provides us with another way to do this).

[hairpull]

JavaStripped
"I did *not* escape. They gave me a day pass."

chessbot · Nov 6, 2004

Here's a better way: whenever the mouse is lifted, the window gains focus.

Code:

<html>
<body [red]onmouseup="window.focus();"[/red]>
<button onclick="alert('Clicked me!');" onblur="alert('Blurred me!');">Button</button>
</body>
</html>

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

JavaStripped · Nov 6, 2004

[smilejap]
(Closest thing to a "bow and scrape" emoticon I could find...)

Okay, the stars are insufficient. I'm giving chessbot a whole wack o'medals too.

[medal]

JavaStripped
"I did *not* escape. They gave me a day pass."

chessbot · Nov 6, 2004

Thanks!

Does it work?
There might be some problems with text components though... like being unable to focus on them without tabbing.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

JavaStripped · Nov 6, 2004

Actually, the documents I'm working with at this point have no text fields, so it all seems to work fine; your concern is duly noted for future reference. Thanx again.
[spin]

JavaStripped
"I did *not* escape. They gave me a day pass."

chessbot · Nov 6, 2004

OK, good.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

JavaStripped · Nov 12, 2004

Okay, found a problem with this solution. Turns out, you can't make [tt]<a>[/tt] elements do double duty for both [tt]href[/tt] and [tt]name[/tt] properties and still have it blur them properly. Makes sense when I thought about it; the [tt]window.focus()[/tt] is executing before the redirect from the hyperlink, so once you get to where you're going, the destination [tt]<a href="#up" name="down">[/tt] element will have the focus... because the new focus is applied after the function executes.
[bomb]

The only workaround I can think of immediately is to separate my [tt]href[/tt] and [tt]name[/tt] properties into different [tt]<a>[/tt] elements, and keep the [tt]<a name>[/tt] elements empty in terms of textual content between the opening and closing tags. Of course, this means a lot of tedious manual search and replace... I'm hoping for a better way...

JavaStripped
"I did *not* escape. They gave me a day pass."

chessbot · Nov 13, 2004

This might be a solution (IE only in any case):

Code:

function stopFocus()
{
  if (document.activeElement.tagname.toUpperCase() != "A")
    window.focus();
}
...
<body onblur="stopFocus();">

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

JavaScript and CSS Classes... 1

JavaStripped

Programmer

chessbot

Programmer

JavaStripped

Programmer

chessbot

Programmer

JavaStripped

Programmer

chessbot

Programmer

JavaStripped

Programmer

chessbot

Programmer

Similar threads

Part and Inventory Search

Sponsor