Solved

how to set focus in HTML to particular menu item?

Posted on 2015-02-24
7
46 Views
Last Modified: 2015-03-04
Hi There,

I'm using SSI on apache and the navigation menu is one of the Includes (menu.shtml, giving choices like Home, Links, Contact, FAQ). When navigating away from the home page using the menu, the next page will include the navigation menu again and will give the first entry (Home) the focus, regardless the fact I have been navigating to a page using the third menu option (i.e. Contact).
I am searching for a way to let the included menu show the current navigation choice (i.e. Contact). Hope someone can help me.

Regards,
John
0
Comment
Question by:jkruijt
  • 4
  • 3
7 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40628950
When you navigate to a new page, you are going to the server for page generation.  On the server you already know which page is making the request, so you just set the styling or mouse focus (not clear which you are looking for) to the appropriate entry.  If you have static pages, then you will probably need to use a session cookie and javascript to do it.

Cd&
0
 

Author Comment

by:jkruijt
ID: 40628987
Hi Cd,
ThX for your answer. I'm Cd myself and a newby in HTML. The site uses CSS and HTML, so I can use both. But, looking in the HTML instruction set, I can't find the statement to set the 'auto-focus' to the correct navigation button. I've tried Java, but that doesn't help me any further. Can you please give me some more direction?
regards,
John
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40629174
Without a link to the page it is not likely I can give you anything definitive.  I don't even know what kind of structure you are using for the menu and I am still not clear whether you are looking to styled the active menu or set physical focus. I also do not know how the page is being generated server side and that is important be cause it could mean a simple or difficult change.

If you skills are limited to HTML and CSS it might be difficult, depending on what it is you actually want to do.

BTW, autofocus attribute is new to HTML5 so it might or might not be recognized depending on the browser and version , and the DOCTYPE.  It only applies to inputs, but again I don't know what kind of structure you are using.

Cd&
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Author Comment

by:jkruijt
ID: 40630007
Hi Cd&,

A new day, a new try. I have attached the three files from the site as an example. The url is www.johndesiweb.nl.
The index.html and the links.html are pages, where the menu.shtml is a Include, which is located in the include folder.
As you can see both, index.html and links.html, are referring to menu.shtml using the Include statement line. There are more includes, but for the example those are not important.
Furthermore I added the style.css file.

I hope you can explain to me, how I manage to let the menu.html showing (by giving the correct focus) on which page you are. Now, in the current setting when I move from the home to the links pages the home button from the menu is still having the focus, although I'm already at the links page. I do understand that it is happing, but I'm not able to change it.

Regards,
John
links.html
style.css
menu.html
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40635680
Okay I think I see what you are trying to do, but it is not really going to work on links.

It is styling the right element, but anything beyond that like actually focusing on the target link is not going to happen without logic in the PHP to set tabindex="1" for the link where you want focus.

You could also do tight on the pages using javascript to set
document.getElementById('id of the right link').tabindex="1";

Cd&
0
 

Accepted Solution

by:
jkruijt earned 0 total points
ID: 40636865
Hi Cd&,

Thanks for your answer. I've tried it, but the problem is that changing the page after it has been displayed is not the solution. I think I have solved it eventually myself.
This is what I do:

1. in the calling page I set a variable to recognize the visitors choice.
2. in the menu I decide with a <--#if--> statement which menu choice need to be high lighted using the style attribute 'current' .

I have attached the index.html and the menu.shtml so you can see what I mean.
remember I had to rename menu.shtml in menu.html to transfer them to this site.

Thanks anyway for assisting me!

John
links.html
menu.html
0
 

Author Closing Comment

by:jkruijt
ID: 40644174
I accepted my on comment as a solution because it actually solved my problem before the expert could.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 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