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!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing link focus

Status
Not open for further replies.
Mephist0222

Mephist0222

Programmer
May 14, 2008
12
US
am working on a script that will focus on the first link in a set when the page loads, will go down one link when you trigger one function and stop at the end and go up one link when you trigger another function and stop at the top.

I have it sort of working but it is not 100%

<style>
a.link:hover, a.link:active, a.link:focus{
border: solid 1px #000;
background: #ff9;
}
</style>
<script>

var links = document.getElementsByTagName("a");

for(var i=0; i < links.length; i++) {
if(links.className == 'link'){
if(links.blur){
links[0].focus()
}

function arrDwn() {

if(links.focus){
links[i++].focus()
}

}
function arrUp() {
if(links.focus){
links[i--].focus()
}



}

}
break;
}

</script>

<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>

<br/>
<br/>




<a href="javascript:arrDwn();">Down</a>
<a href="javascript:arrUp();">Up</a>
 
Sort by date Sort by votes
You're missing so many elements, such as HTML and BODY elements, and your SCRIPT and STYLE blocks have no type.

Also, your functions are defined in the loop - something you would see if you formatted your code nicely.

Fixing those gets it working for me in IE6 and Fx2.

Hope this helps,
Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Dan,
I di dnot copy the full pages code, just the middle. I also had the functions in the loop so I can use the ++ and --.

If you have this working can you put it up?
 
Upvote 0 Downvote
I have been able to get it to change link focus, but it won't target just the links I want it to and stop an the last one for going down and on the first for going up.

Here is the latest version of the code, it is not working right now because I am trying to add in these features:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body onload="init()">
<style>
a.link:hover, a.link:active, a.link:focus{
border: solid 1px #000;
background: #ff9;
}
</style>
<script>
function init() {
var links = document.getElementsByTagName("a");

for(var i=0; i < links.length; i++) {
//if(links.className == 'link'){
if(links.blur){
links[0].focus()
}


break;
}


function arrDwn() {
if(links.className == 'link'){
if(links.focus){
if(links.focus = links.length-1){
alert('first');
return false;
}

else{
links[i++].focus()
}
}
}
}
function arrUp() {
if(links.className == 'link'){

if(links.focus){
if(links[0].focus){
alert('last');
//return false;
}

else{
links[i--].focus()
}
}}}

}

//}
</script>

<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>
<a href="me" class="link" name="mine">Link</a><br/>

<br/>
<br/>




<a href="javascript:arrDwn();">Down</a>
<a href="javascript:arrUp();">Up</a>


</body>
</html>
 
Upvote 0 Downvote
Why not do something like this:

Code: 
var myLinks = [];
var myCurrentLink = -1;

function init() {
	var allLinks = document.links;

	for(var loop=0; loop<allLinks.length; loop++) {
		var theLink = allLinks[loop];
		if ((' ' + theLink.className + ' ').indexOf(' link ') != -1) {
			myLinks[myLinks.length] = theLink;
		}
	}

	// If we have any 'my' links, highlight the first one
	if (myLinks.length) {
		myCurrentLink = 0;
		myLinks[0].focus();
	}
}

Then all you need to do is increment or decrement 'myCurrentLink' (doing out-of-bounds checking against the length of 'myLinks'), and highlight the appropriate link.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

peterpann
  • Locked
  • Question
javascript create active link
Replies
2
Views
112
peterpann
peterpann
ahm1985
  • Locked
  • Question
get the value of row before changing in table if cancel click
Replies
0
Views
91
ahm1985
ahm1985
Julierme
  • Locked
  • Question
Selecting leaflet markers and changing marker icons
Replies
0
Views
105
Julierme
Julierme
Blueie
  • Locked
  • Question
Changing location on screen? 1
Replies
7
Views
150
Blueie
Blueie
southbeach
  • Locked
  • Question
onblur problem when attempting to set focus
Replies
2
Views
125
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top