Solved

Customizing Focus Rectangle

Posted on 2004-08-09
4
498 Views
Last Modified: 2008-03-03
Is there any way in which the dotted line that come around the link when it gets focus to be appearing in a bold and maybe in some other color.
My target browser is Mozilla Firefoc 0.9.3.

Thanks in advance.
0
Comment
Question by:Vinod_nk
  • 2
4 Comments
 
LVL 14

Expert Comment

by:ziffgone
ID: 11750446
Nope. It is out of our control.

At most, you can make it disappear with an onClick="this.blur();" statement. Otherwise, that's it.
0
 
LVL 1

Accepted Solution

by:
garethdart24 earned 250 total points
ID: 11750995
I couldn't get this to work quite right, but I'm posting it anyway in case it gives you or anyone else any ideas.  Dynamically adjusting the appearance of links with CSS sort of works, as below.  Each time you click a link, it's class is set to 'custom', which has a black 1px border in this case.  When you click on another link, the previous link's class is returned to 'normal', which has a white 1px border (I would use no border but that makes the links move by 1px when clicked, and that's unprofessional) and the new link's class is set to 'custom'.  The flaw is that if the next mouse click is not on one of the links, then the last link clicked retains the border even though it no longer has the focus.  You can probably solve this, though.

<html>
<head>
<style>

a.custom {

padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 1px;
border-color: #000000;

}

a.normal {

padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;

}

</style>
<script>

//declare and initialise a variable to hold the last clicked link
var lastLink;

lastLink = "link1";

lastLink.className = "normal";

function customFocus(theLink) {

lastLink.className = "normal";
theLink.blur();
theLink.className = "custom";
lastLink = theLink;

}

</script>
</head>
<body>
<br />

<a class = "normal" id = "link1" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />
<a class = "normal" id = "link2" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />
<a class = "normal" id = "link3" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />
<a class = "normal" id = "link4" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />

</body>
</html>

Careful, though: many users don't like the default behaviour of a browser being changed by individual web pages (this.blur makes it harder to cycle through links with the tab key, for example, if you call it from the onfocus event), so you may want to abandon this concept anyway.

G
0
 
LVL 8

Author Comment

by:Vinod_nk
ID: 11751403
This solves the problem. thanks a lot....
0
 
LVL 1

Expert Comment

by:garethdart24
ID: 11759205
You're welcome.  Thanks for the points.

G
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
send email part1 9 39
formvalidation.io validate form on class click 4 35
href return to normal window 5 28
Can anyone help me find this preloader? 51 37
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question