473,406 Members | 2,281 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

Highlight block A elements

As a user tabs about a web page I want to highlight with a, say, 2 pixel
solid yellow border the anchor that currently has focus. When the anchor
loses focus the border is removed.

The anchors that may receive a highlight have their style.display set to
'block'.

So far this is working fine except that when the border displays it
pushes the anchor down and to the right by 2 pixels (to accommodate the
border). I thought about simply moving the anchor when it has focus to
"stop" it from appearing to move. Unfortunately some anchors are
positioned absolutely from the right, some with a relative value, and
some are inline. So I need to work out which are which before I can
reposition them.

Is there a simpler/better way to highlight anchors with a border that
doesn't cause them to move on screen?

I tried drawing a new DIV over the top of each anchor but that stops the
mouse click from getting to the anchor.

Andrew Poulos
Oct 10 '08 #1
4 2781
On Oct 10, 5:22*am, Andrew Poulos <ap_p...@hotmail.comwrote:
As a user tabs about a web page I want to highlight with a, say, 2 pixel
solid yellow border the anchor that currently has focus. When the anchor
loses focus the border is removed.

The anchors that may receive a highlight have their style.display set to
'block'.

So far this is working fine except that when the border displays it
pushes the anchor down and to the right by 2 pixels (to accommodate the
border). I thought about simply moving the anchor when it has focus to
"stop" it from appearing to move. Unfortunately some anchors are
positioned absolutely from the right, some with a relative value, and
some are inline. So I need to work out which are which before I can
reposition them.

Is there a simpler/better way to highlight anchors with a border that
doesn't cause them to move on screen?

I tried drawing a new DIV over the top of each anchor but that stops the
mouse click from getting to the anchor.

Andrew Poulos
Put a div behind each hooverable element and give it padding or the
desired border width. Then put your content in to the div. When the
ancore is hovvered on chane the colour of the background div to the
desired colour of the border....
Oct 10 '08 #2
On Oct 10, 8:23*am, Laser Lips <loudsphi...@gmail.comwrote:
On Oct 10, 5:22*am, Andrew Poulos <ap_p...@hotmail.comwrote:
As a user tabs about a web page I want to highlight with a, say, 2 pixel
solid yellow border the anchor that currently has focus. When the anchor
loses focus the border is removed.
The anchors that may receive a highlight have their style.display set to
'block'.
So far this is working fine except that when the border displays it
pushes the anchor down and to the right by 2 pixels (to accommodate the
border). I thought about simply moving the anchor when it has focus to
"stop" it from appearing to move. Unfortunately some anchors are
positioned absolutely from the right, some with a relative value, and
some are inline. So I need to work out which are which before I can
reposition them.
Is there a simpler/better way to highlight anchors with a border that
doesn't cause them to move on screen?
I tried drawing a new DIV over the top of each anchor but that stops the
mouse click from getting to the anchor.
Andrew Poulos

Put a div behind each hooverable element and give it padding or the
desired border width. Then put your content in to the div. *When the
ancore is hovvered on chane the colour of the background div to the
desired colour of the border....
Rubbish.

This is a CSS question. If you don't care about IE6 (or know the
DirectX hack for transparent borders), use transparent borders and
color them on hover and focus. If you have further questions, try a
CSS group.
Oct 10 '08 #3
David Mark wrote:
On Oct 10, 8:23 am, Laser Lips <loudsphi...@gmail.comwrote:
>On Oct 10, 5:22 am, Andrew Poulos <ap_p...@hotmail.comwrote:
>>As a user tabs about a web page I want to highlight with a, say, 2 pixel
solid yellow border the anchor that currently has focus. When the anchor
loses focus the border is removed.
The anchors that may receive a highlight have their style.display set to
'block'.
So far this is working fine except that when the border displays it
pushes the anchor down and to the right by 2 pixels (to accommodate the
border). I thought about simply moving the anchor when it has focus to
"stop" it from appearing to move. Unfortunately some anchors are
positioned absolutely from the right, some with a relative value, and
some are inline. So I need to work out which are which before I can
reposition them.
Is there a simpler/better way to highlight anchors with a border that
doesn't cause them to move on screen?
I tried drawing a new DIV over the top of each anchor but that stops the
mouse click from getting to the anchor.
Andrew Poulos
Put a div behind each hooverable element and give it padding or the
desired border width. Then put your content in to the div. When the
ancore is hovvered on chane the colour of the background div to the
desired colour of the border....

Rubbish.

This is a CSS question. If you don't care about IE6 (or know the
DirectX hack for transparent borders), use transparent borders and
color them on hover and focus. If you have further questions, try a
CSS group.

I do care about IE 6 and don't want to user the hack for transparent
borders.

Although I didn't say it in my original post the highlight is optional.
Depending on what settings a user makes. So the highlight will be
applied dynamically using javascript.

Andrew Poulos
Oct 11 '08 #4
On Oct 11, 7:07*am, Andrew Poulos <ap_p...@hotmail.comwrote:
David Mark wrote:
[snip]
This is a CSS question. *If you don't care about IE6 (or know the
DirectX hack for transparent borders), use transparent borders and
color them on hover and focus. *If you have further questions, try a
CSS group.

I do care about IE 6 and don't want to user the hack for transparent
borders.
Why not? It is a perfectly reasonable way to get transparent borders
in IE6 (provided you wrap the rules in conditional comments.)
>
Although I didn't say it in my original post the highlight is optional.
* Depending on what settings a user makes. So the highlight will be
applied dynamically using javascript.
So, add and remove the rule (or sheet) as needed. What's the problem?
Oct 11 '08 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: KP | last post by:
I want to automatically highlight parts of a webpage (make them standout from the rest of the contents). These parts could be as small as single image tags, and as large as complex tables, parts of...
7
by: Zhang Weiwu | last post by:
Hello. This is problem puzzled me a long time. I wish to organize some block elements and let them flow one after each other like text. Think about a album, I wish the album have 12 thumbnails,...
11
by: VK | last post by:
Hi, I'm playing around with tables (TOM vs. DOM etc.) I cannot figure out an effective highlight mechanics for the cells: 1) No problems with: <td ...onMouseOver/Out background change> some...
15
by: 50295 | last post by:
Hi everyone, This one is better experienced than explained, so I'm including a code sample below. Please and save (as an html file) and view with NN or Firefox (or maybe even Mozilla), and then...
2
by: TadPole | last post by:
Hi all, My main problems are::::::::: 1. Set a value within a block container that can be used and changed by subsequent templates/block-containers/tables etc.. 2. get/determine/find the...
3
by: Nicky | last post by:
hi, all I have an iframe in my page. Actually what I want is just like the google search. When user clicks search, I will load the a page from another URL into iframe and then highlight the key...
21
by: listaction | last post by:
Folks, I'm trying to implement a tabbed effect with CSS and HTML - no graphics. for some reason, i'm unable to control the width of the tabs. I've pasted the code below. Any help /...
6
by: dave8421 | last post by:
Hi, I'm a bit confused about the definition about "Prinicpal Block Boxes" in CSS 2.1 draft specification. ( http://www.w3.org/TR/2006/WD-CSS21-20061106 ) <pre> 9.2.1 Block-level elements and...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.