0

I've been trying out solutions to similar cases but none of them work so far.

Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.

Here's from the index.html file:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="support" ><a href="support.html">Support</a></li>
        <li ><a href="#contact">Contact</a></li>
</ul>
</div>

and here's from support.html:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html#home">Home</a></li>
        <li><a href="index.html#about">About</a></li>
        <li class="current"><a href="#support">Support</a></li>
        <li ><a href="index.html#contact">Contact</a></li>
    </ul>
</div>

This is one of the solutions that I tried with no results: https://stackoverflow.com/a/11539359

JS is not my strong suit, thank you so much for your help!

Community
  • 1
  • 1
user3125991
  • 1
  • 1
  • 1
  • Can you provide a jsfiddle, or a link where you tried this? What is the js that you have tried? – Raunak Kathuria Dec 22 '13 at 04:15
  • @RaunakKathuria here's the **[website im trying to fix](http://phamilycares.com)** click on support and then to physicians to see the problem – user3125991 Dec 23 '13 at 16:49
  • Can you load all javascript in one place, whenever i load the page it gives error Uncaught ReferenceError: jQuery is not defined, load all on head on at end of body – Raunak Kathuria Dec 23 '13 at 21:38
  • @RaunakKathuria yes, all the javascript is at the end of index to load page faster.. thank you for your help, i forgot that i asked this question, im still trying to figure this out – user3125991 Jan 02 '14 at 23:58
  • Please check the answer and look at the files included in it – Raunak Kathuria Jan 03 '14 at 02:20

1 Answers1

0

There were lot of issues with the way you are loading scripts for example

 $(document).ready(function() {
        $('#ind').cycle({
            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });

you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions

I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now

One more thing make your contact height same as other container or remove extra margin/padding from Physicians section

Raunak Kathuria
  • 3,185
  • 1
  • 18
  • 27
  • i see that you added new js sources and i didnt understand what you said about loading the js on head on at end of body until now. thank you! im going to study the js(jquery_002 and jquery-1) that u included. – user3125991 Jan 03 '14 at 03:00
  • I have not included anything, i just saved you webpage and it was saved from there. The only problem was js was not loaded properly and it was used even before loading it – Raunak Kathuria Jan 03 '14 at 03:02
  • why did you separate the js sources though? like for support.html, the support js sources were in support_files folder but for the Phamily = Physicians + Family_files.html, the js sources were in the Phamily = Physicians + Family_files folder – user3125991 Jan 03 '14 at 03:11
  • Its just a demo because when you save file from browser it loads all the file in separate directory, so first I saved the index file then the support file. Dont make your pages exactly like this, just move all the javascript to end. I didnt change anything else apart from moving js at same place – Raunak Kathuria Jan 03 '14 at 03:14
  • Let me know if you face any issue, else if it has solved your doubt just approve the answer :) – Raunak Kathuria Jan 03 '14 at 03:37