Solved

how to set focus in HTML to particular menu item?

Posted on 2015-02-24
7
50 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
Independent Software Vendors: 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!

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Copying table data to one another 15 37
Disable selected option from one select box when selected in another select box 26 66
Clear input text 15 26
CSS - Centering an image 2 25
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

749 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