View Full Version : Navigation menu issue after page reload

09-25-2012, 09:38 PM
Hi everyone, I have a one page horizontally sliding site with a fixed position image-based navigation menu. Each image in the menu has an "on" state (when hovering), and "off" state (when not hovering), and an "active" state (when a button is clicked, it will slide to that portion of the page, and that button will stay "on" until another button is clicked). These are handled by 3 javascript functions. By default, the user starts on the "home" section of the page, so when the page loads I call the function to turn on the home button.

The trouble is that I have a contact form on the page. When a user clicks the contact button in the menu, the page slides over to the contact form section and the contact button becomes "active". After filling out the form and pressing submit, the page gets reloaded and I have some PHP handling the validation and mailing. In the form action i have it return to the contact portion of the page (action = "index.php#contact), where it displays errors or a success message. But even though the user is viewing the contact form, since the page has been reloaded, the default "home" button turns on, instead of the contact button.

I need to find a way so that once the page is reloaded by either a succesful or unsucessful contact form submission, to keep the contact button "on", instead of reverting to the default "home" button being turned on.

I thought I could use a PHP variable, with a default value and then a new value would be given to it after the submit button was pressed. By checking the value of that variable, I could see if the page was being loaded the first time (and to therefore turn the home button on) or if it was being reloaded after submitting the form (and therefore turn the contact button on). However, this approach did not work. I also tried using document.getElementById().value to get the value of a hidden form field. However, I didn't realize that the value exists even before the user has pressed the submit button. Since the value always stayed the same, the conditional statement was always true, so that didn't work either

Setting a button to the active state (on until another is clicked) is just a simple function call, so to turn the home button to the "on" state button I just call a function "mActive(img2,2)" in a window.onload function I have for some other stuff. The contact form is just a plain HTML form, nothing special.

Does anyone know how I cout get this to work? Your help would be greatly appreciated. I wasted half a day trying to figure this out! Thanks in advance.

P.S. Sorry that was really long, I hope I explained everything clearly!

rnd me
09-25-2012, 09:55 PM
modify the function that sets the active tab by wrapping a conditional around the tab setter.

look at the hash, and if set to about, don't set home:

if( location.hash.slice(1) != "contact" ){

09-26-2012, 07:15 AM
Thank you so much! I'm pretty inexperienced with javascript so I had never seen the location.hash function before. I have it working properly now by doing this in my window.onload function:

if (window.location.hash == "#contact")
mActive(img0,0); // turn on contact image
mActive(img2,2); // turn on home image

Thanks again! :)