asked on

Activating Menu

Hi,

I have a menu, when the user click on the menu it should get a background color to #a51d43

this is what i have and it's not working

#nav ul li a {
 /* margin:10px; */
    color:#FFF;
 /* padding:4px;
    font-size:20px;
    text-decoration:none; */
    }

#nav ul li a:hover {
    border-bottom:3px #FFF solid;
 	background-color:#000000;
    }

#nav ul li .active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }



    <menu id="nav">
    <ul class="categories" style="font-size:12px;color:#ffffff;">
      <li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;color:#ffffff;font-weight:bold;">Home</a></li>
      <li><a href="#" class="VersionHist" style="color:#ffffff;font-weight:bold;">Version History</a></li>
      <li><a href="AddRule.cfm" class="AddRule" target="_self" style="color:#ffffff;font-weight:bold;">Add New Testing Rule</a></li>
    </ul>
    </menu>





$(document).ready(function () {
	$.ajaxSetup({ cache: false });
	
	var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

    // passes on every "a" tag 
    $("#nav ul li a").each(function() {
            // checks if its the same on the address bar
        if(url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) { 
            $(this).closest("li").addClass("active");
        }
		else if(url == "Index.cfm"){
			$(".Alert").closest("li").addClass("active");
		}
		else if(url == "AddRule.cfm"){
			$(".Alert").closest("li").addClass("active");
		}

		
    });

Open in new window

Alexandre Simões

Do you have javascript errors?

Because if the first regex execution doesn't find anything, getting the first item will throw an error.

var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

Check the dev tools to see if you have javascript errors.

lulu50

ASKER

no I am not getting any error

ASKER CERTIFIED SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lulu50

ASKER

Alexandre

yes, that is correct that I had the active CSS wrong

but when I submit the form to itself I lose my active style

so when I click on the menu I do get the background changed, but when I submit the page to itself the background goes back to the default color.

lulu50

ASKER

if the url is this -> AddRule.cfm -> it works fine

but

when I submit the page to itself

AddRule.cfm?id=51 -> now this does not work because it has id=51

Julian Hansen

Where is your code showing the submit?

lulu50

ASKER

oh it goes to SubmitRule.cfm for an insert than go back to the same page that's when I lose my menu.



<FORM id="UnitTestingFrm" NAME="UnitTestingFrm" METHOD="POST" ACTION="SubmitRule.cfm?id=<cfoutput>#PID#</cfoutput>">

   <button name="SubRule" id="SubRule" type="submit" style="border: 0; background: transparent;cursor:pointer;" >
    <img src="images/NextBtn.jpg" alt="Next" />
	</button>

</FORM>

Open in new window

Alexandre Simões

Let me see if I get it right:

So if you do Ctrl+F5 it highlights the menu but if you click that highlighted menu item, it refreshes the page but doesn't get highlighted back.

is that it?

lulu50

ASKER

If I click on the menu it will highlights but if I add (id=51) in the URL and click on enter
it will not highlights.

AddRule.cfm?id=51 -> it will not highlights

Alexandre Simões

Ok, so what you need should be something like:

        if (url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) {
            $(this).closest("li").addClass("active");
        } else if (window.location.href.indexOf("Index.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        } else if (window.location.href.indexOf("AddRule.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        }

Open in new window

If it works it should still be optimized, but for the time being it's enough just to test.

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lulu50

ASKER

Alexandre and Julian Thank you both for all your help

IT WORKS :-)

THANK YOU THANK YOU AND ONE MORE THANK YOU

Thanks,
lulu

lulu50

ASKER

one more time THANK YOU LOL

Julian Hansen

You are most welcome.