Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Navigation menu issue after page reload

    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!

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    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:
    Code:
    if( location.hash.slice(1) != "contact" ){
     mActive(img2,2);
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    kan3xiao (09-26-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    if (window.location.hash == "#contact")
         mActive(img0,0);  // turn on contact image
    else
         mActive(img2,2);  // turn on home image
    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •