Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 312
  • Last Modified:

How do I set the focus of a show/hide link to the link using Javascript

Hi,

I have which consist of a number of rows and 2 columns. The first column is a list of categories and the second column is a lot of text associated with the category.  By default none of the text in the second column is shown until you click the category link in the 1st column. When you click the link the associated text is displayed.

I have got this working fine, but when ever you click on the link the page appears back to the top which means you have to scroll down to see the associated text.

How can I keep the focus on the hyperlink clicked?

The rows content (categories and associated text) are created by php running a MySQL query. Therefore the div, class and element ids are generated on the fly by php.

Below is my sample example. or see here http://jsfiddle.net/mbarber/vyj99/2/ 

<SCRIPT language=JavaScript>
<!—
    function toggle_visibility(id) {
       var e = document.getElementById(id);
      if(e.style.display =='block')
      {e.style.display ='none';}
      else
      {e.style.display ='block';}
       
       }
    
    
//-->
</script>

<table>

<style type="text/css">
   .displayID1 {  display: none; }
</style>
<tr>
<td> <a href="#" onclick="toggle_visibility(conID1); ">Category1</a></td>
<td> <div id="conID1" class="displayID1" > Lots of Text here </div></td>
</tr>

<style type="text/css">
   .displayID2 {  display: none; }
</style>
<tr>
<td> <a href="#" onclick="toggle_visibility(conID2); ">Category2</a></td>
<td> <div id="conID2" class="displayID2" > Some More  Text here </div></td>
</tr>


</table>

Open in new window



How can I keep the focus on the hyperlink?

I've tried document.getElementById[id].focus(); and various combinations without success.

Thanks
0
EICT
Asked:
EICT
  • 9
  • 8
  • 4
  • +1
1 Solution
 
GaryCommented:
Add return false to the end of your js function and in your onclick add return e.g.
<a href="#" onclick="return toggle_visibility('conID1'); ">Category1</a>

Or remove the href="#"
0
 
DualCoolCommented:
your link is doing it's job - its navigating to the location. just use a
button or a div or something other than an <a link tag

ie..
<button onClick="toggle_visibility(conID2);">Category2</button>

please dont use a link tag without a href
0
 
DualCoolCommented:
here is a working example of your code (i made some changes which i think you will like)

1: you needed to put quotes around the toggle_visibility('conID2') variable
2:also the language attribute is depreciated in the script tag
instead use type  <script type="text/javascript">
3: i thought you were maybe wanting to target the class name instead of the display value directly.
4: also use a button or a div instead of the link for what you are doing


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.displayID1 {display: block;}
.displayID2 {display: none;}
</style>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.className =='displayID1'){
      e.className ='displayID2';
}else{
      e.className ='displayID1';}
}

</script>
</head>
<body>

<table>
<tr>
<td> <button onclick="toggle_visibility('conID1'); ">Category1</button></td>
<td> <div id="conID1" class="displayID2" > Lots of Text here </div></td>
</tr>
<tr>
<td> <button onclick="toggle_visibility('conID2'); ">Category2</button></td>
<td> <div id="conID2" class="displayID2" > Some More  Text here </div></td>
</tr>
</table>


</body>
</html>
0
Technology Partners: 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!

 
DualCoolCommented:
*** the type attribute in the script tag is going away - but we still need to use it until everyone is using a new browser
0
 
Ray PaseurCommented:
@DualCool: Nice code sample.  Just curious... It's been a long time since I saw a need for anything except <script> in an HTML document.  Doesn't this work correctly for all modern browsers?

Best to all, ~Ray
0
 
DualCoolCommented:
thank ya - it's a best practice to use it

If you know you will be using the html5 doc type you wouldn't neeed to but again it's a good practice
0
 
DualCoolCommented:
I always say it's better to have it and not need it then to need it and not have it.
0
 
Ray PaseurCommented:
better to have it and not need it
Roger that!
0
 
EICTAuthor Commented:
Hi DualCool,
Thanks for your response.  
I will take onboard your comments. The problem I have is the class and id tags are created on the fly via PHP according to which rows are turned from the SQL query. Each row has a unique record ID so I was using this to generate the class and id names as each row is created without referring to an fixed names in the javascript function.

The problem can be seen better from the attached pictures.
When I clicked the link heading, for example "Personal Safety" the heading can not be seen as it's of the page view but the first associated Risk headings can be for example 3-S4.

I would like to be able to see the Personal Safety heading and all the Risk headings (3-S4 to 3-01). i.e. the entire row contents.

Sorry not sure if I made this clear.
desired-view.gif
current-view.gif
0
 
DualCoolCommented:
@ray I can tell you depending on your doc type your page wont validate without the type attribute - sometimes you need it
0
 
DualCoolCommented:
EICT lets look at one problem at a time - first the content that is out of view

are you giving the table a height? if the content is larger than the parent the content could be cut off like that
0
 
EICTAuthor Commented:
DualCool,

No the table does not have a height. I've also tried removing the row heights.
I don't know if this makes a difference but the list in the second column is a nested table within the parent table second column cell?
0
 
GaryCommented:
Did you try the suggestion in the very first comment
Fiddle based on your fiddle.
http://jsfiddle.net/vyj99/5/

Scroll down to see the links.
0
 
DualCoolCommented:
I can't think of a reason for your content being cut off unless you have a parent element hiding the overflow or there is a validation error.  Or that is in fact the end of the code which could mean the php isn't doing quite what you want .. ie a "for" loop in the php is completing sooner than expected
0
 
DualCoolCommented:
After looking again at your screen shot it's clearly not the php theory - which means the problem is in the style or syntax - try giving you table , rows, and cells heights - check the positioning and that each element has a opening and closing tag
0
 
EICTAuthor Commented:
Cathal, Sorry for not replying I did try the first suggestion but still no joy.
0
 
EICTAuthor Commented:
DualCool,
I'm going through it now with a fine tooth comb.

I've uploaded the html version to http://www.enterpriseict.co.uk/linktest.html  so you can see the problem.

I'm going to try specifying the row /cell height after the link has been clicked.
0
 
EICTAuthor Commented:
I've sorted it, all be it a bit roughly.
I've changed the ahref on the link to refer to an anchor. Then I set the anchor open and close tags around the table in the second column cell.
0
 
GaryCommented:
So what was wrong with the fiddle?
0
 
EICTAuthor Commented:
Hi Cathal, I tried your fiddle.
I added in a table of data instead of the text but the problem still occurs. If I have the category 3 heading near the bottom of my browser window then click on it, I can no longer see the heading.

This shows your fiddle with more content (ie the table of Risks) in the right cell.
http://jsfiddle.net/mbarber/vyj99/7/embedded/result/

http://jsfiddle.net/mbarber/vyj99/7/

Putting the anchor tags around the table meant the entire table including link heading stay in view.

Thanks for your help.
0
 
EICTAuthor Commented:
Cathal,
Sorry mean to say  - in order for you to get the Category 3 heading to the bottom of your browser you would need to expand/click on the other two Category headings.

The issue of the header moving off view is not such a problem with a 3 Category list but with a long list if is easy for the user to loose their place - which is why I had the problem in the first place.

Thanks again.
0
 
GaryCommented:
Not sure I'm following you, if you want the title to stay at the top of the TD cell then just add this css
td {vertical-align:top}

else I'm not sure what the problem is.
0
 
EICTAuthor Commented:
Putting the link tags around all the content in the second cell (i.e. the nested table) mean the entire nested table and link was displayed after the link was clicked. Else the link would disappear from view along with some of the nested table.

I.e The focus appeared to be on the entire content of the second cell rather than just the top of the cell.


I solved this myself
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 8
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now