Solved

how to set focus in HTML to particular menu item?

Posted on 2015-02-24
7
47 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

789 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