423,109 Members | 2,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,109 IT Pros & Developers. It's quick & easy.

iframe content has the navigation bar

P: 7
I thought I could do this with just CSS, but it's not working.

I have an html file header that contains the website banner and navigation bar.
The nav bar is a <ul> list of links to the various pages, and CSS makes them look like buttons.

I include that file using an <iframe> element in my other pages.

when a user clicks a menu button (about us, home, etc.) the change in color isn't saved. The hover works - so it looks selected - and then the new page comes up and the selection disappears.

If I want to use a js script to force it to check highlighting, how do I get at the <li> elements? If I'm in index.html, for example, I have the <iframe> element, but I wouldn't think that the current document would conain the <li> elements of the navigation bar. If I'm in the header.html, then I don't know what page I'm on (i.e. what page is including the header) to know which menu item should be highlighted.

Any ideas on how I can do this?

Sep 9 '09 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
The iframe document contains the li elements, so once you have that you can loop through to get them. As for saving the colour change, you can use a cookie or the URL to save the change. If you're using a server-side language, remove the iframe and include the navigation in each page.
Sep 9 '09 #2

P: 7
Thanks for the quick reply!
I solved my problem by having one file with the header and footer, and loading the other pages into an iframe in the center of that file - depending upon which navigation button the user clicks.

now I have a new problem. I have a contact form, and want to do some validation. I added a:

onsubmit="return validateForm()"

to the form tag, and I am testing with bad data to see the errors (which are spans to the right of the fields. If there's an error, the innerHTML of the span is filled in, otherwise, nothing appears there.) so I know that the validateForm() is returning false.

Here's the problem -- the whole current page is trying to fit in the iframe in the center of the page. I'm not seeing the form at all, but I get two headers, two nav bars -- seriously ugly and not useful.

Is there anyway to force re-display of the form itself in the frame like it is before the user hits submit?

Sep 10 '09 #3

Expert Mod 15k+
P: 16,027
If you can, I would advise you to drop the idea of using iframes. That depends largely on if you're using a language server-side, e.g. PHP, JSP.

If you can't, you'll need to set the action of the form to the page contained within the iframe, not the main parent page (which contains the navigation as well as the iframe).
Sep 10 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.