Solved

Customizing Focus Rectangle

Posted on 2004-08-09
4
499 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

751 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