Solved

Customizing Focus Rectangle

Posted on 2004-08-09
4
494 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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now