Solved

how to set focus in HTML to particular menu item?

Posted on 2015-02-24
7
44 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

930 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

10 Experts available now in Live!

Get 1:1 Help Now