Solved

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

Posted on 2014-02-19
23
261 Views
Last Modified: 2014-03-30
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
Comment
Question by:EICT
  • 9
  • 8
  • 4
  • +1
23 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39870715
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
 
LVL 2

Expert Comment

by:DualCool
ID: 39871256
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
 
LVL 2

Expert Comment

by:DualCool
ID: 39871321
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
 
LVL 2

Expert Comment

by:DualCool
ID: 39871334
*** 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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39882319
@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
 
LVL 2

Expert Comment

by:DualCool
ID: 39882533
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
 
LVL 2

Expert Comment

by:DualCool
ID: 39882563
I always say it's better to have it and not need it then to need it and not have it.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39882611
better to have it and not need it
Roger that!
0
 

Author Comment

by:EICT
ID: 39882982
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
 
LVL 2

Expert Comment

by:DualCool
ID: 39883257
@ray I can tell you depending on your doc type your page wont validate without the type attribute - sometimes you need it
0
 
LVL 2

Expert Comment

by:DualCool
ID: 39883328
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:EICT
ID: 39883885
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
 
LVL 58

Expert Comment

by:Gary
ID: 39883914
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
 
LVL 2

Expert Comment

by:DualCool
ID: 39884018
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
 
LVL 2

Expert Comment

by:DualCool
ID: 39884053
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
 

Author Comment

by:EICT
ID: 39885948
Cathal, Sorry for not replying I did try the first suggestion but still no joy.
0
 

Author Comment

by:EICT
ID: 39885955
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
 

Author Comment

by:EICT
ID: 39886041
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
 
LVL 58

Expert Comment

by:Gary
ID: 39886310
So what was wrong with the fiddle?
0
 

Accepted Solution

by:
EICT earned 0 total points
ID: 39889322
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
 

Author Comment

by:EICT
ID: 39889331
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
 
LVL 58

Expert Comment

by:Gary
ID: 39889369
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
 

Author Closing Comment

by:EICT
ID: 39964665
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

762 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

18 Experts available now in Live!

Get 1:1 Help Now