Solved

how to set focus in HTML to particular menu item?

Posted on 2015-02-24
7
41 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
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:jkruijt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I accepted my on comment as a solution because it actually solved my problem before the expert could.
0

Featured Post

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

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

772 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

12 Experts available now in Live!

Get 1:1 Help Now